Search results

7 Navigation
7.1 Tabs

Aside from the main navigation, tabs are the primary navigation component within our application and are typically used for navigating to secondary features or concepts within a larger feature.

  • Tab bars should always extend the full width of the screen.
  • Avoid using more than 8 tabs in one tab bar.
  • Tabs should always be displayed on one line and should never wrap.
  • Some features may utilize both a primary and secondary set of tabs to indicate another level of hierarchy within a given feature. This is acceptable, but should be avoided if possible as the extra depth makes navigation more complex for users.
  • Never use more than two levels of tabs.
Example 
<ul class="nav nav-tabs">
    <li class="active"><a href="#">Overview</a></li>
    <li><a href="#">Details</a></li>
    <li><a href="#">People</a></li>
</ul>
7.2 Pagination

List and table pages should be paginated according to the following criteria:

  • For pages using a standard tabular display, 15 items per page should be used by default.
    • If the data display is particularly dense, use 25 items per page instead.
  • For pages using a 'search results' style display where each item consists of a link or headline followed by pagagraph or list detail, 10 items per page should be used by default.
  • These standards should be considered guidelines only — the number of items per page may vary depending on use case (e.g. batch editing), data density, or if the page in question is for internal use.
Example 

<ul class="pagination">
    <li class="active"><a href="?page=1">1</a></li>
    <li><a href="?page=2">2</a></li>
    <li><a href="?page=3">3</a></li>
    <li><a href="?page=2">Next &rarr;</a></li>
</ul>
<br>
<ul class="pagination">
    <li><a href="?page=1">&larr; Prev</a></li>
    <li><a href="?page=1">1</a></li>
    <li class="active"><a href="?page=2">2</a></li>
    <li><a href="?page=3">3</a></li>
    <li><a href="?page=3">Next &rarr;</a></li>
</ul>
7.3 Breadcrumbs

Breadcrumbs can be used to display the users' pathway through levels of navigation. Breadcrumbs should:

  • appear after navigating down to a level
  • live above the title of the page (where the 'Back' link typically appears)
  • be separated by a single rsaquo (›)
  • display previous pages as links and the active page as static text
7.4 Dropdown menus

Dropdown menus are usually linked to a button and should be implemented using the following guidelines:

  • Organize actions within the menu by importance.
  • Group actions by related concepts. Separate groups of concepts using a separator.
  • Actions that lead to another dialog should be followed by a horizontal ellipsis (…) character; immediate actions should not.
Examples
.btn-primary
Generally, dropdown menus should use the primary class.
.btn-default
If a secondary dropdown menu is required in addition to the primary one, use the default class. 
<div class="dropdown">
        <button class="btn [modifier class] dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Actions <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">Email project stakeholders</a></li>
            <li><a href="#">Print…</a></li>
            <li><a href="#>Copy project…</a></li>
            <li><a href="#">Archive project…</a></li>
            <li><a href="#">Cancel project…</a></li>
        </ul>
    </div>