Navigation patterns


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

To mark element as selected - use aui-nav-selected classname and provide adequate assistive label.
For details - see accessibility patterns - current and selected items


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 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.

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.


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.