Fork me on GitHub

Aoi (青い) style guide

Navbar

Use the navbar class on <nav> or <div> elements to style a global navbar.

<nav class="navbar">
    <ul class="nav">
        <li><a href="#">Link</a></li>
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
</nav>

Of course you can give your navbar a kick by adding a color class to the navbar class:

<nav class="navbar accent">
    <ul class="nav">
        <li><a href="#">Link</a></li>
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
</nav>
<nav class="navbar red">
    <ul class="nav">
        <li><a href="#">Link</a></li>
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
</nav>
<nav class="navbar amber">
    <ul class="nav">
        <li><a href="#">Link</a></li>
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
</nav>
<nav class="navbar blue">
    <ul class="nav">
        <li><a href="#">Link</a></li>
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
</nav>
<nav class="navbar green">
    <ul class="nav">
        <li><a href="#">Link</a></li>
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
</nav>
<nav class="navbar plum">
    <ul class="nav">
        <li><a href="#">Link</a></li>
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
</nav>
<nav class="navbar raspberry">
    <ul class="nav">
        <li><a href="#">Link</a></li>
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
</nav>
<nav class="navbar banana">
    <ul class="nav">
        <li><a href="#">Link</a></li>
        <li class="active"><a href="#">Link</a></li>
        <li><a href="#">Link</a></li>
    </ul>
</nav>

Pager

Use the nav-pager class on a <ol> or a <ul> element to render a compound navigation control to pick an item from a list, with optional shortcuts to move forward and backward, and skip to the beginning or end.

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5 
<ol class="nav-pager">
    <li>
        <a title="Page 1" href="#">1</a>
    </li>
    <li class="active">
        <a title="Page 2 (current)" href="#">2</a>
    </li>
    <li>
        <a title="Page 3" href="#">3</a>
    </li>
    <li>
        <a title="Page 4" href="#">4</a>
    </li>
    <li>
        <a title="Page 5" href="#">5</a>
    </li>
    <li>
        <a title="Move one page forward" href="#"><i class="fa fa-step-forward"></i></a>
    </li>
    <li>
        <a title="Move five pages forward" href="#"><i class="fa fa-fast-forward"></i></a>
    </li>
</ol>

Guidelines

It is recommended to limit the number of items in the pager control to a minimum. Display at most five items, centered on the current item, unless you're at the beginning or at the end of the list. The purpose of the pager is to provide a speed dial affordance, not to clutter the UI and add cognitive load with unnecessarily long lists of options.

If there is at least one more item before or after the items rendered by the pager, display the step backward and/or forward items, through the Font Awesome icons fa-step-backward and fa-step-forward respectively.

Moreover, if there are at least 5 more items beyond the first and/or last items, display the fast-forward and backward items as well, through the Font Awesome icons fa-fast-backward and fa-fast-forward respectively.

  3. 19
  4. 20
  5. 21
  6. 22
  7. 23 
<ol class="nav-pager">
    <li>
        <a title="Move five pages backward" href="#"><i class="fa fa-fast-backward"></i></a>
    </li>
    <li>
        <a title="Move one page backward" href="#"><i class="fa fa-step-backward"></i></a>
    </li>
    <li>
        <a title="Page 19" href="#">19</a>
    </li>
    <li>
        <a title="Page 20" href="#">20</a>
    </li>
    <li class="active">
        <a title="Page 21 (current)" href="#">21</a>
    </li>
    <li>
        <a title="Page 22" href="#">22</a>
    </li>
    <li>
        <a title="Page 23" href="#">23</a>
    </li>
    <li>
        <a title="Move one page forward" href="#"><i class="fa fa-step-forward"></i></a>
    </li>
    <li>
        <a title="Move five pages forward" href="#"><i class="fa fa-fast-forward"></i></a>
    </li>
</ol>