Purpose: Specifications on building and using vertical navigation, which reside on either the left or right side of the main page view.

Category: Navigation

Related jiras:

Process Phase:

  • UXI JIRA Created (insert link above)
  • Component Specification draft complete
  • UXI code review complete
  • Reconcile with UIM and KRAD existing designs
  • Conduct user testing (if needed)
  • Routed for review with Kuali UX Working Group and UX/KRAD Working Group
  • Reviewed with KAI
  • Rice JIRA Created (in KULRICE Project)
  • KRAD Implementation complete
  • Component released (insert rice release version below)

Version: 1.0

 

 

 


Description

Vertical navigation in Kuali applications is used primarily to section individual pieces of content within pages, functioning almost like a subnavigational element. However, the use isn't limited to subnavigation.

Variations

  1. Collapsible / Non-collapsible
  2. Single-level / Multiple levels

 

Desktop Usage

Examples of vertical navigation within Kuali Coeus Proposal Development and Budget Development, respectively

Example of a collapsed vertical navigation

Quick summary of features:

  • Vertical navigation uses Bootstrap grid sizing
  • Offers an option to collapse the sidebar, reducing specific items to their icons for more space in the main content portion
  • Offers an option to have nested levels, providing up to three-level depths of children pages
  • Allows buttons or actions to be placed above the navigation for use to get back to a parent document
  • When collapsed, hovering or focusing on each item will expand its submenus for quick and easy navigation. Additionally, tabbing through the page will focus the navigation links as if it were expanded making it more useful for those users using assistive tech.
  • Vertical navigation is automatically collapsed on screens with a width less than 768px wide, and when going from desktop to tablet or below (i.e., when playing around with the browser by resizing it, which is not a real-world example of use).

When to use this component:

  • Use this component any time navigation is needed within your interface.

Responsive Usage

Since much of the Kuali interface is built upon Bootstrap's grid system, responsive switching is automatically included and enabled. When the interfaces switches into a responsive-sized layout, the navigation collapses and becomes horizontal navigation with a menu icon in the top right. Tapping that icon will expand the navigation. Tapping it again will close the navigation.

Child pages are hidden initially when the menu is opened, but tapping a parent will expand its children and make them available for selecting.

Demos

Bootstrap's grid

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options.

Left-side vertical navigation example (with main content to the right)

The left-side container takes up 3 of 12 columns, regardless of screen width. The right-side container takes up 9 of 12, regardless of screen width.

<div class="container">
	<div class="col-md-3">
		<nav></nav>
	</div>
	<div class="col-md-9">
		<main></main>
	</div>
</div>

For kicks, a three-column layout (main content in the middle)

<div class="container">
	<div class="col-md-3">
		<nav></nav>
	</div>
	<div class="col-md-6">
		<main></main>
	</div>
	<div class="col-md-3">
		<aside></aside>
	</div>
</div>

CSS

Grid-based styles come from Bootstrap, however there are custom styles added by Kuali to manage the styles for the vertical navigation.

Styles are currently found in uif-navigation.less and are in some serious need of cleanup.
TODO: Cleanup styles, LESSify them, and include them here.

JSFiddle

View this markup on JSFiddle.

Accessibility Considerations

The navigation needs to be keyboard accessible. This means using the Tab key to navigate through each menu item and its children in order, much like reading through an unordered list. Use ARIA role's to identify the container as navigation which will allow quicker access via screen readers and other assistive technology. You may even consider using a heading, even if it's positioned off-screen. Some other things to keep in mind:

  • When the navigation is expanded (not in its collapsed state) the icon labels are visible and so the icons that accompany them should not be announced.
  • When the navigation is collapsed, the label text is hidden off-screen (still accessible to assistive tech) and so either the icons should be announced, or the label text should be announced.
  • For subnavigation that has child navigation (i.e., the parent link merely opens child links) the following needs to happen when opening a submenu:
    • When expanded is true, send focus to the first child link, using proper, semantic un/ordered list markup.
    • When expanded is false, send focus back to the parent item.

Accessibility Resources:

As always, use valid, semantic, proper HTML markup to optimize accessibility and usability of modals.

W3 HTML Validator
WebAim WAVE 

Keyboard Shortcuts

Since navigation is a primary rule when using anything on the Web, keyboard functionality should be maintained. Using proper, semantic code will help with this.

Research and Discussion

None at this time.