Navigation

There are several types of navigation. Vertical navigation is the default within #content and horizontal is the default when placed within #header. Breadcrumb navigation is used when the items represent a hierarchy, giving context to the current view.

Note: On small screens or less horizontal navigation will become vertical navigation.

Navigation is used to structure the key areas of the product.

API: stable
Example Element Code
Vertical navigation.
<nav class="ace-nav-container" role="navigation">
      <ul class="ace-nav ace-nav-default">
            <li class="ace-nav-item"><a href="http://example.com/">Documents</a></li>
            <li class="ace-nav-item"><a href="http://example.com/">Q&amp;A</a></li>
            <li class="ace-nav-item ace-nav-active"><a href="http://example.com/">Reports</a></li>
            <li class="ace-nav-item"><a href="http://example.com/">Manage</a></li>
            <li class="ace-nav-item"><a href="http://example.com/">Notifications</a></li>
            <li class="ace-nav-item"><a href="http://example.com/">Support</a></li>
      </ul>
</nav>
Horizontal navigation.
<nav class="ace-nav-container" role="navigation">
      <ul class="ace-nav ace-nav-horizontal">
            <li class="ace-nav-item"><a href="http://example.com/">Documents</a></li>
            <li class="ace-nav-item"><a href="http://example.com/">Q&amp;A</a></li>
            <li class="ace-nav-item ace-nav-active"><a href="http://example.com/">Reports</a></li>
            <li class="ace-nav-item"><a href="http://example.com/">Manage</a></li>
            <li class="ace-nav-item"><a href="http://example.com/">Notifications</a></li>
            <li class="ace-nav-item"><a href="http://example.com/">Support</a></li>
      </ul>
</nav>
Breadcrumb navigation.
Breadcrumb navigation using assets.

Navigation attributes