Navigation patterns

Summary

Navigation covers simple navigation components, then combines them into horizontal and vertical nav groups, built on a common markup pattern. Commonly uses badges within navigation items.

Navigation patterns include horizontal navigation bars, vertical navigation groups, breadcrumbs and pagination.

Status

Patterns

Horizontal navigation

Should be placed immediately before .aui-page-panel.

Vertical navigation

Usually placed inside an .aui-page-panel-nav but will expand horizontally to fit any appropriate container element.

Breadcrumbs

Breadcrumbs are used as a high-level representation of where users have navigated. Users can click the links to go back to previous pages.

Pagination

Pagination is used to split content across multiple pages.

Note: the current page is set to aui-nav-selected and should not be a link.

Navgroup headers

Navgroups are placed before nav UL elements and can have headers:

Split horizontal nav

In a horizontal nav group, nav items placed in a primary nav group aui-nav-primary are placed to the left, and secondary to the right. These divs currently have no effect in vertical nav but can be included for consistency. A common use case for horizontal navigation is to have most items on the left and a small number of items on the right (usually just one).

Actions list

Use the action list to list actions at the bottom of a message.

Actions should have the appearance of a link, but should use the appropriate HTML element for the action — for example, use a <button> when the action is handled by JavaScript or does something on the current page; use an <a> when the action can take the user to another location in the system.

Code

JavaScript API

An imperative API is provided for interacting with .aui-nav elements, such as in the above examples, along with those found in the sidebar and application header components.