The most common navigation elements.
<ul class="tabs">
<li class="active"><a href="#">Gerelateerde producten</a></li>
<li><a href="#">Geschikte printers</a></li>
<li><a href="#">Reviews (0)</a></li>
</ul><ul class="breadcrumbs">
<li><a href="/">Home</a> ›</li>
<li><a href="/">Cartridges</a> ›</li>
<li><a href="/">Epson</a> ›</li>
<li><a href="/">16</a> ›</li>
<li class="active">Epson 16 magenta (C13T16234010)</li>
</ul>
Use class menu to format a list item in a proper menu.
Add class menu-primary, menu-secondary or menu-tertiary to change the color.
Important: All these menu's break to vertical menu when the viewport is < 768px (< sm)
<ul class="menu">
<li class="active"><a href="/">Home</a></li>
<li><a href="/">Cartridges</a></li>
<li><a href="/">Toners</a></li>
<li><a href="/">Papier</a></li>
<li><a href="/">Labels</a></li>
</ul><ul class="menu menu-primary">
<li class="active"><a href="/">Home</a></li>
<li><a href="/">Cartridges</a></li>
<li><a href="/">Toners</a></li>
<li><a href="/">Papier</a></li>
<li><a href="/">Labels</a></li>
</ul><ul class="menu menu-secondary">
<li class="active"><a href="/">Home</a></li>
<li><a href="/">Cartridges</a></li>
<li><a href="/">Toners</a></li>
<li><a href="/">Papier</a></li>
<li><a href="/">Labels</a></li>
</ul><ul class="menu menu-tertiary">
<li class="active"><a href="/">Home</a></li>
<li><a href="/">Cartridges</a></li>
<li><a href="/">Toners</a></li>
<li><a href="/">Papier</a></li>
<li><a href="/">Labels</a></li>
</ul>Unique to this class is the additon of menu-outline for a simplistic list menu.
<ul class="menu menu-outline">
<li class="active"><a href="/">Home</a></li>
<li><a href="/">Cartridges</a></li>
<li><a href="/">Toners</a></li>
<li><a href="/">Papier</a></li>
<li><a href="/">Labels</a></li>
</ul>Love list items, but not the list part? Use menu-basic remove the padding and bullet points. This class is unique in the menu- classes since it does not require menu.
<ul class="menu-basic">
<li><a href="/">HP 364</a></li>
<li><a href="/">HP 125</a></li>
<li><a href="/">Canon CLI-526</a></li>
<li><a href="/">Canon CLI-551</a></li>
<li><a href="/">Brother LC-1100</a></li>
</ul>Don't want width: 100%;? Add the class menu-auto.
<ul class="menu menu-auto">
<li class="active"><a href="/">Home</a></li>
<li><a href="/">Cartridges</a></li>
<li><a href="/">Toners</a></li>
<li><a href="/">Papier</a></li>
<li><a href="/">Labels</a></li>
</ul>Use class menu-vertical to create full width menu's. Combine with grid classes to resize. Add class class menu-primary, menu-secondary or menu-tertiary for color.
<ul class="menu-vertical">
<li class="active"><a href="/">Home</a></li>
<li><a href="/">Cartridges</a></li>
<li><a href="/">Toners</a></li>
<li><a href="/">Papier</a></li>
<li><a href="/">Labels</a></li>
</ul><ul class="menu-vertical menu-vertical-primary">
<li class="active"><a href="/">Home</a></li>
<li><a href="/">Cartridges</a></li>
<li><a href="/">Toners</a></li>
<li><a href="/">Papier</a></li>
<li><a href="/">Labels</a></li>
</ul><ul class="menu-vertical menu-vertical-secondary">
<li class="active"><a href="/">Home</a></li>
<li><a href="/">Cartridges</a></li>
<li><a href="/">Toners</a></li>
<li><a href="/">Papier</a></li>
<li><a href="/">Labels</a></li>
</ul><ul class="menu-vertical menu-vertical-tertiary">
<li class="active"><a href="/">Home</a></li>
<li><a href="/">Cartridges</a></li>
<li><a href="/">Toners</a></li>
<li><a href="/">Papier</a></li>
<li><a href="/">Labels</a></li>
</ul>Don't want width: 100%;? Add the class menu-vertical-auto.
<ul class="menu-vertical menu-vertical-auto">
<li class="active"><a href="/">Home</a></li>
<li><a href="/">Cartridges</a></li>
<li><a href="/">Toners</a></li>
<li><a href="/">Papier</a></li>
<li><a href="/">Labels</a></li>
</ul>