Navigation

Ask a question Design guidelines

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

API status: general
Included in AUI core? Yes. You do not need to explicitly require the web resource key.
Web resource key: com.atlassian.auiplugin:aui-navigation
AMD Module key: N/A
Experimental since: 5.0
General API status: 5.1

Examples

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.

Simple nav

This element is primarily used in nav groups or with a modifier class, but can be used by itself.

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