Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Deck of Cards
idcomponent_details
Card
iddesktop-usage
defaulttrue
labelDesktop Usage

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.
Card
idresponsive-usage
labelResponsive Usage

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.

Card
iddemos
labelDemos

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.

Code Block
titleBasic data table markup
linenumberstrue
languagexml
firstline1
<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)

Code Block
titleModal within a modal
linenumberstrue
languagexml
firstline1
<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.

Code Block
languagecss
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.

Card
idaccessibility
labelAccessibility Considerations
nextAfter0
Section

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:
    • Use aria-expanded="true|false" to announce the state of the 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 

Card
idkeyboard-shortcuts
labelKeyboard Shortcuts

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.

Card
idcomponent_discussion
titleResearch and Discussion
labelResearch & Discussion

Research and Discussion

None at this time.