Navigation patterns

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

Patterns

Horizontal navigation

Should be placed immediately before .aui-page-panel.

Demo code
Result
AخA
 
<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="#nav-item-content"><span class="assistive">Selected item:</span> Interesting Nav 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</a></li>
                <li><a href="#">Overview</a></li>
                <li><a href="#">Kitchen sink</a></li>
            </ul>
        </div>
    </div>
</nav>

Vertical navigation

Usually placed inside an .aui-page-panel-nav but will expand horizontally to fit any appropriate container element.

Demo code
Result
 
<nav class="aui-navgroup aui-navgroup-vertical">
    <div class="aui-navgroup-inner">
        <ul class="aui-nav">
            <li class="aui-nav-selected"><span><span class="assistive">Current page:</span> Interesting Nav Item</span></li>
            <li><a href="https://example.com/">Regular Nav item</a></li>
            <li><a href="https://example.com/">Other Nav item</a></li>
        </ul>
        <ul class="aui-nav">
            <li><a href="https://example.com/">Nav item</a></li>
            <li><a href="https://example.com/">Nav item</a></li>
        </ul>
        <div class="aui-nav-heading"><strong>Heading</strong></div>
        <ul class="aui-nav">
            <li><a href="https://example.com/">Nav item</a></li>
            <li><a href="https://example.com/">Nav item</a></li>
        </ul>
    </div>
</nav>

Breadcrumbs are used as a high-level representation of where users have navigated. Users can click the links to go back to previous pages.

Demo code
Result
  1. Breadcrumbs
  2. Sub-page
  3. Current page: Direct parent page
 
<ol class="aui-nav aui-nav-breadcrumbs">
    <li><a href="https://example.com/">Breadcrumbs</a></li>
    <li><a href="https://example.com/">Sub-page</a></li>
    <li class="aui-nav-selected"><span class="assistive">Current page:</span> Direct parent page</li>
</ol>

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.

Demo code
Result
  1. First
  2. Prev
  3. 1
  4. Current page: 2
  5. 3
  6. …
  7. 998
  8. 999
  9. Next
  10. Last
 
<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="https://example.com/">1</a></li>
    <li class="aui-nav-selected"><span class="assistive">Current page:</span> 2</li>
    <li><a href="https://example.com/">3</a></li>
    <li class="aui-nav-truncation"><a href="https://example.com/" id="pagination-truncation">&hellip;</a></li>
    <li><a href="https://example.com/">998</a></li>
    <li><a href="https://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>

Navgroup headers

Navgroups are placed before nav UL elements and can have headers:

Demo code
Result
Heading
  • ...
  • ...
  • ...
  • ...
  • ...
  • ...
 
<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>

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

Demo code
Result
 
<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="#nav-item-content"><span class="assistive">Selected item:</span> Interesting Nav 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</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>
</nav>

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.

Demo code
Result

So this is what 1985 looked like...

It appears your internet connection is offline right now. Your messages may not send.

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

Code

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.

 
var sidebarNav = AJS.navigation('#sidebar-nav');
sidebarNav.isCollapsed();