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.
|Web resource key:||
|AMD Module key:||N/A|
Should be placed immediately before
Usually placed inside an
.aui-page-panel-nav but will expand horizontally to fit any appropriate container element.
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 is used to split content across multiple pages.
Note: the current page is set to
aui-nav-selected and should not be a link.
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).
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
<a> when the action
can take the user to another location in the system.