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 API: 5
General API: 5.1

Examples

Horizontal navigation

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

Example
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="#">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>

Vertical navigation

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

Example
 
<article 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>
</article>

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.

Example
 
<article 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>
</article>

Simple nav

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

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

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.

Example
  1. First
  2. Prev
  3. 1
  4. 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="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">&hellip;</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>

Navgroup headers

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

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

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

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.

Example

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>