Navigation sets available in the Benefits Delivery & Administration UI Toolkit have shared styling and states, with the global navigation deviating more significantly from the sub-navigation.

Accessibility Callout

Make navs used as navigation accessible

If you are using navs to provide a navigation bar, be sure to add a role="navigation" to the most logical parent container of the <ul>, or wrap a <nav> element around the whole navigation. Do not add the role to the <ul> itself, as this would prevent it from being announced as an actual list by assistive technologies.

Global Navigation

This section is still being thought out, and concepts are being tested. Check back soon for more!

Sub Navigation

Use sub-navigaiton (or side-/sidebar-navigation, if you will) to help keep users oriented on long and/or complex pages.

Vertical sub-navs should be a portion of the page width, and appear next to the content in which they navigate. If an item is disabled or unavailable, but must still be displayed, be sure to provide a visual cue that the element is not clickable, as well as contextually-appropriate hover effects.

Thanks to a font-based icon set, adding icons is as easy as including them before link text.

Multi-tiered sub-navs allow for menu-like interactions, where a link can toggle the visibility of sets of links that are nested under it.

The below examples are configured to he "accordion" style (only one section open at a time). This can be changed to allow for multiple sections to be open simultaneously.

Breaking it down to its basic parts and functionality, a file tree is really just another form of multi-tiered sub-navigation, with some additional iconography added for context.

Horizontal sub-navs should appear above the content in which they navigate and be the width of that content's container, if possible. Don't forget the disabled links!

If you're going to make your sub-navs sticky, consider a state change while the element is fixed in the browser viewport — such as a box-shadow.

Breadcrumbs

Indicate the current page's location within a navigational hierarchy.

  1. Home
  1. Home
  2. Library
  1. Home
  2. Library
  3. Data

Pagination

Provide pagination links for your site or app with the multi-page pagination component.

Default pagination

Simple pagination inspired by Rdio, great for apps and search results. The large block is hard to miss, easily scalable, and provides large click areas.

Disabled and active states

Links are customizable for different circumstances. Apply disabled treatments for unclickable links and an active treatment to indicate the current page.

Sizing

Fancy larger or smaller pagination? Additional sizes are available.