Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Task marked incomplete
Section
Column
width80%
Panel
bgColor#f6f6f6
titleBGColor#333333
borderStylesolid
titleModals
borderColor#cccccc
titleColorwhite

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:

JIRA
columnskey,summary,type,created,updated,due,assignee,reporter,priority,status,resolution
serverKuali: Jira
serverIdbe3acfec-fcc2-335b-8051-b2b053a39956
keyUXI-362

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

 

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.

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 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.