Documentation

Navigation

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

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

Pagination Navigation

Used to show links between paginated content:

Code

HTML

Simple nav

<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 <span class="aui-badge">123</span></a></li>
    <li><a href="http://example.com/">Kitchen Sink</a></li>
</ul>

They are rarely used on their own, they are primarily for use in nav groups or with a modifier class.

Breadcrumbs

<ol class="aui-nav aui-nav-breadcrumbs">
    <li><a href="http://example.com/">Nav</a></li>
    <li><a href="http://example.com/">Nav</a></li>
    <li><a href="http://example.com/">Nav</a></li>
    <li class="aui-nav-selected">Selected</li>
</ol>

The last item in breadcrumbs is, by definition, the selected item; it can be plain text or a link. All other items should be links to pages within a content heirarchy (order is significant).

Pagination

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

Note the current page is set to "aui-nav-selected" and should not be a link.

Horizontal navgroup

<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 <span class="aui-badge">123</span></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="#"><span class="aui-icon aui-icon-test16-dark"></span> Overview</a></li>
                <li><a href="#">Kitchen sink</a></li>
            </ul>
        </div><!-- .aui-navgroup-primary -->
        <div class="aui-navgroup-secondary">
            <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><!-- .aui-navgroup-secondary -->
    </div><!-- .aui-navgroup-inner -->
</nav><!-- .aui-navgroup -->

Vertical navgroup

<nav class="aui-navgroup aui-navgroup-vertical">
    <div class="aui-navgroup-inner">
        <ul class="aui-nav">
            <li class="aui-nav-selected"><a href="#">Selected foo</a></li>
            <li><a href="#">Bar</a></li>
            <li><a href="#">Baz</a></li>
        </ul>
        <ul class="aui-nav">
            <li><a href="#">Issues</a></li>
            <li><a href="#">Popular issues</a></li>
        </ul>
        <ul class="aui-nav">
            <li><a href="#">Versions</a></li>
            <li><a href="#">Labels</a></li>
        </ul>
        <div class="aui-nav-heading"><strong>Heading</strong></div>
        <ul class="aui-nav">
            <li><a href="#">Wiki</a></li>
            <li><a href="#">Builds</a></li>
            <li><a href="#">Team avacado design patterns</a></li>
            <li><a href="#">Biglongwordthathascomeintoanavanddoesntfit</a></li>
            <li><a href="#">Our QA process</a></li>
        </ul>
    </div>
</nav>

Navgroup headers

Navgroups can include headers. They are placed before nav UL elements:

<div class="aui-nav-heading"><strong>Heading</strong></div>
<ul class="aui-nav">
...

Split horizontal nav

A common use case for horizontal navigation is to have most items on the left and a small number (usually just one) item on the right, eg. a configuration icon. Inside navgroup inner, add these:

<div class="aui-navgroup-primary">
    <!-- .aui-nav goes here -->
</div><!-- .aui-navgroup-primary -->
<div class="aui-navgroup-secondary">
    <!-- .aui-nav goes here -->
</div><!-- .aui-navgroup-secondary -->

In horizontal nav primary defaults to left, secondary to the right. Add aui-nav and aui-nav-neading elements inside as normal. These divs currently have no effect in vertical nav; but can be included for consistency.