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.
| API status: | general |
|---|---|
| Web resource key: |
com.atlassian.auiplugin:aui-navigation
|
| AMD Module key: | N/A |
| Experimental API: | 5 |
| General API: | 5.1 |
Should be placed immediately before .aui-page-panel.
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.
This element is primarily used in nav groups or with a modifier class, but can be used by itself.
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:
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
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.
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.