While some navigation components are sure to be application-specific, the UI-Toolkit provides a suite of common navigation components that should hopefully form the backbone for your application's navigation paradigms.
Below, we provide discussions and demonstrations of each of these individual components, as well as an example of how they can work together in context.
*Note: We use <button> tags in this demonstration to show how the focus state gives a clear representation of the selected item. Navigation features will also work with <a> tags if you so desire.
Tabs are elements that help you organize and navigate multiple documents in a single container. They can be used for switching between items in the container. To display a tab as active, simply add the .active class.
<ul class="tabs">
<li class="tab-title active"><button>Summary</button></li>
<li class="tab-title"><button>Basics</button></li>
<li class="tab-title"><button>Budget</button></li>
<li class="tab-title"><button>Accounts</button></li>
</ul>
To display your tabs vertically, add the .vertical class.
<ul class="tabs vertical">
<li class="tab-title active"><button>Summary</button></li>
<li class="tab-title"><button>Basics</button></li>
<li class="tab-title"><button>Budget</button></li>
<li class="tab-title"><button>Accounts</button></li>
</ul>
Filters are elements that allow you to re-organize the content within a single container to fit a desired context or categorical match. To display an entry as active, again, add the .active class.
<ul class="filter-nav">
<li class="filter-nav-entry active"><button>Summary</button></li>
<li class="filter-nav-entry"><button>Basics</button></li>
<li class="filter-nav-entry"><button>Budget</button></li>
<li class="filter-nav-entry"><button>Accounts</button></li>
</ul>
Like with tabs, you may display your filters vertically with the .vertical class.
<ul class="filter-nav vertical">
<li class="filter-nav-entry active"><button>Summary</button></li>
<li class="filter-nav-entry"><button>Basics</button></li>
<li class="filter-nav-entry"><button>Budget</button></li>
<li class="filter-nav-entry"><button>Accounts</button></li>
</ul>
The heading-navigation component operates very similarly to tabs, but should exist at a higher-level on the page in the event that a secondary level of specificity is required. Again, to display an entry as active, add the .active class.
<ul class="heading-nav">
<li class="heading-nav-entry active"><button>Summary</button></li>
<li class="heading-nav-entry"><button>Basics</button></li>
<li class="heading-nav-entry"><button>Budget</button></li>
<li class="heading-nav-entry"><button>Accounts</button></li>
</ul>
Unlike both filters and tabs, heading-navigation entries cannot be displayed vertically.
Below is an example of the way in which these navigation components can be combined in context.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis facilisis lorem, vitae egestas leo. Nulla at augue vulputate, sodales diam rutrum, rhoncus felis. Mauris vitae lacus sodales, ullamcorper felis sed, sodales est. Nullam volutpat leo mi, non pellentesque ante porttitor at. Integer a diam massa. Suspendisse cursus velit mi, eget accumsan massa eleifend vel. Phasellus ut placerat quam. Integer eleifend enim et elit malesuada, commodo congue ipsum tempor. Nulla feugiat leo vel magna feugiat bibendum. Sed eget eros vulputate, laoreet ante sit amet, malesuada nulla. Aenean id maximus ante, ac mattis ex.
Integer vestibulum est in justo finibus faucibus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut massa justo, scelerisque vitae auctor at, sagittis tincidunt risus. Duis aliquet est ante, non congue lectus fermentum sit amet. Aliquam iaculis laoreet risus eget vulputate. Etiam sodales condimentum odio, scelerisque pulvinar velit varius quis. Duis eu ex velit. Sed vel massa accumsan, bibendum nulla id, interdum elit. Duis sollicitudin cursus felis, id molestie risus hendrerit vel. Nulla id nisi vitae erat eleifend vestibulum a tempor neque. Donec neque dui, maximus sed ultrices nec, vestibulum nec ex. Donec tempor condimentum nisl, ac finibus ligula facilisis at. Quisque eu dui lacus. Sed lobortis elit nec consequat fermentum. Maecenas a erat ut risus vestibulum consectetur. Aliquam erat volutpat.
<div class="bg-off-white padding-medium">
<h1 class="padding-bottom-medium">Navigation Concepts</h1>
<ul class="heading-nav padding-bottom-medium">
<li class="heading-nav-entry active"><button>Doc Vault</button></li>
<li class="heading-nav-entry"><button>Statements & Reports</button></li>
<li class="heading-nav-entry"><button>More Documents</button></li>
</ul>
<div class="card padding-none">
<ul class="tabs padding-left-medium padding-top-small">
<li class="tab-title active"><button>My Uploads</button></li>
<li class="tab-title"><button>Shared with Me</button></li>
<li class="tab-title"><button>eSignatures</button></li>
<li class="tab-title"><button>All Documents</button></li>
</ul>
<div class="row padding-horiz-medium">
<div class="columns small-3 padding-top-medium">
<ul class="filter-nav vertical">
<h6>Collection Types</h6>
<li class="filter-nav-entry active"><button>All Collections</button></li>
<li class="filter-nav-entry"><button>Insurance Docs</button></li>
<li class="filter-nav-entry"><button>Estate Docs</button></li>
<li class="filter-nav-entry"><button>Financial Docs</button></li>
</ul>
</div>
<div class="columns small-9 padding-vert-medium">
<h1>All Collections</h1>
<h3>Subheading for content below</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam quis facilisis lorem, vitae egestas leo. Nulla at augue vulputate, sodales diam rutrum, rhoncus felis. Mauris vitae lacus sodales, ullamcorper felis sed, sodales est. Nullam volutpat leo mi, non pellentesque ante porttitor at. Integer a diam massa. Suspendisse cursus velit mi, eget accumsan massa eleifend vel. Phasellus ut placerat quam. Integer eleifend enim et elit malesuada, commodo congue ipsum tempor. Nulla feugiat leo vel magna feugiat bibendum. Sed eget eros vulputate, laoreet ante sit amet, malesuada nulla. Aenean id maximus ante, ac mattis ex.</p>
<p>Integer vestibulum est in justo finibus faucibus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut massa justo, scelerisque vitae auctor at, sagittis tincidunt risus. Duis aliquet est ante, non congue lectus fermentum sit amet. Aliquam iaculis laoreet risus eget vulputate. Etiam sodales condimentum odio, scelerisque pulvinar velit varius quis. Duis eu ex velit. Sed vel massa accumsan, bibendum nulla id, interdum elit. Duis sollicitudin cursus felis, id molestie risus hendrerit vel. Nulla id nisi vitae erat eleifend vestibulum a tempor neque. Donec neque dui, maximus sed ultrices nec, vestibulum nec ex. Donec tempor condimentum nisl, ac finibus ligula facilisis at. Quisque eu dui lacus. Sed lobortis elit nec consequat fermentum. Maecenas a erat ut risus vestibulum consectetur. Aliquam erat volutpat.</p>
</div>
</div>
</div>
</div>
Tabs may be used on a dark background using the .ghost class. You may also use the .ghost-children class to target descendants.
See the ghosting section for more explanation.
<div class="bg-black padding-medium">
<ul class="tabs ghost">
<li class="tab-title active"><button>Summary</button></li>
<li class="tab-title"><button>Basics</button></li>
<li class="tab-title"><button>Budget</button></li>
<li class="tab-title"><button>Accounts</button></li>
</ul>
</div>
Filter Navigation may be used on a dark background using the .ghost class. See the ghosting section for more explanation.
<ul class="filter-nav padding-medium bg-black ghost">
<li class="filter-nav-entry active"><button>Summary</button></li>
<li class="filter-nav-entry"><button>Basics</button></li>
<li class="filter-nav-entry"><button>Budget</button></li>
<li class="filter-nav-entry"><button>Accounts</button></li>
</ul>
Heading navigation may be used on a dark background using the .ghost class. See the ghosting section for more explanation.
<ul class="heading-nav bg-black padding-medium ghost">
<li class="heading-nav-entry active"><button>Summary</button></li>
<li class="heading-nav-entry"><button>Basics</button></li>
<li class="heading-nav-entry"><button>Budget</button></li>
<li class="heading-nav-entry"><button>Accounts</button></li>
</ul>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmodtempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodoconsequat. Duis aute irure dolor in reprehenderit in voluptate velit essecillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat nonproident, sunt in culpa qui officia deserunt mollit anim id est laborum.