Purpose: Specifications on building and using vertical navigation, which reside on either the left or right side of the main page view.
- 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)
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.
- Collapsible / Non-collapsible
- Single-level / Multiple levels
|Deck of Cards|
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.
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.
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.
|title||Basic data table markup|
For kicks, a three-column layout (main content in the middle)
|title||Modal within a modal|
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.
View this markup on JSFiddle.
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:
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.
As always, use valid, semantic, proper HTML markup to optimize accessibility and usability of modals.
W3 HTML Validator
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.
|title||Research and Discussion|
|label||Research & Discussion|
Research and Discussion
None at this time.