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 |
|---|---|
| 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 |
Should be placed immediately before .aui-page-panel.
<nav class="aui-navgroup aui-navgroup-horizontal"> <div class="aui-navgroup-inner"> <div class="aui-navgroup-primary"> <ul class="aui-nav"> <li><a href="#">Nav item</a></li> <li class="aui-nav-selected"><a href="#">Selected item</a></li> <li><a href="#">Pull requests <aui-badge>123</aui-badge></a></li> <li><a href="#dropdown2-nav1" aria-owns="dropdown2-nav1" aria-haspopup="true" class="aui-dropdown2-trigger">Dropdown <span class="aui-icon-dropdown"></span></a></li> <li><a href="#">Overview</a></li> <li><a href="#">Kitchen sink</a></li> </ul> </div> </div></nav>Usually placed inside an .aui-page-panel-nav but will expand horizontally to fit any appropriate container element.
<div class="aui-flatpack-example"> <nav class="aui-navgroup aui-navgroup-vertical"> <div class="aui-navgroup-inner"> <ul class="aui-nav"> <li class="aui-nav-selected"><a href="http://example.com/">Selected Nav Item</a></li> <li><a href="http://example.com/">Nav item</a></li> <li><a href="http://example.com/">Nav item</a></li> </ul> <ul class="aui-nav"> <li><a href="http://example.com/">Nav item</a></li> <li><a href="http://example.com/">Nav item</a></li> </ul> <div class="aui-nav-heading"><strong>Heading</strong></div> <ul class="aui-nav"> <li><a href="http://example.com/">Nav item</a></li> <li><a href="http://example.com/">Nav item</a></li> </ul> </div> </nav></div>Breadcrumbs are used as a high-level representation of where users have navigated. Users can click the links to go back to previous pages.
<div class="aui-flatpack-example"> <ol class="aui-nav aui-nav-breadcrumbs"> <li><a href="http://example.com/">Breadcrumbs</a></li> <li><a href="http://example.com/">Sub-page</a></li> <li class="aui-nav-selected">Direct parent page</li> </ol></div>This element is primarily used in nav groups or with a modifier class, but can be used by itself.
<nav class="aui-header"> <ul class="aui-nav"> <li><a href="http://example.com/">Nav item</a></li> <li class="aui-nav-selected"><a href="http://example.com/">Selected item</a></li> <li><a href="http://example.com/">Item with badge <aui-badge>123</aui-badge></a></li> <li><a href="http://example.com/">Kitchen Sink</a></li> </ul></nav>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.
<ol class="aui-nav aui-nav-pagination"> <li class="aui-nav-first"><a href="#">First</a></li> <li class="aui-nav-previous"><a href="#">Prev</a></li> <li><a href="http://example.com/">1</a></li> <li class="aui-nav-selected">2</li> <li><a href="http://example.com/">3</a></li> <li class="aui-nav-truncation"><a href="http://example.com/" id="pagination-truncation">…</a></li> <li><a href="http://example.com/">998</a></li> <li><a href="http://example.com/">999</a></li> <li class="aui-nav-next"><a href="#">Next</a></li> <li class="aui-nav-last"><a href="#">Last</a></li></ol>Navgroups are placed before nav UL elements and can have headers:
<div class="aui-nav-heading"><strong>Heading</strong></div><ul class="aui-nav"> <li>...</li> <li>...</li> <li>...</li> <li>...</li> <li>...</li> <li>...</li></ul>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).
<nav class="aui-navgroup aui-navgroup-horizontal"> <div class="aui-navgroup-inner"> <div class="aui-navgroup-primary"> <div class="aui-nav-heading"><strong>Heading</strong></div> <ul class="aui-nav"> <li><a href="#">Nav item</a></li> <li class="aui-nav-selected"><a href="#">Selected item</a></li> <li><a href="#">Pull Requests <aui-badge>123</aui-badge></a></li> <li><a href="#dropdown2-nav1" aria-owns="dropdown2-nav1" aria-haspopup="true" class="aui-dropdown2-trigger">Dropdown <span class="aui-icon-dropdown"></span></a></li> <li><a href="#">Overview</a></li> <li><a href="#">Kitchen Sink</a></li> </ul> </div> <div class="aui-navgroup-secondary"> <div class="aui-nav-heading"><strong>Heading</strong></div> <ul class="aui-nav"> <li><a href="#dropdown2-nav1" aria-owns="dropdown2-nav1" aria-haspopup="true" class="aui-dropdown2-trigger"><span class="aui-icon aui-icon-small aui-iconfont-configure">Configure</span></a></li> </ul> </div> </div>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.
<div class="aui-message aui-message-error"> <p class="title"> <strong>So this is what 1985 looked like...</strong> </p> <p>It appears your internet connection is offline right now. Your messages may not send.</p> <ul class="aui-nav-actions-list"> <li><button class="aui-button aui-button-link">Try to connect</button></li> <li><a class="aui-button aui-button-link" href="#">Check server status</a></li> </ul></div>