you can use .nav class to create menus and navigations
<ul class="nav" >
<li class="nav-item">
<a href="#" class="nav-link">Link a</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link a</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link a</a>
</li>
</ul>
You can change the direction of the nav by adding the class .horizontal
<ul class="nav horizontal" >
...
</ul>
You can use nav as breadcrumbs by ading the class .breadcrumbs, you can also add the class .is-active to a .nav-link in order show the current position of the breadcrumb.
<ul class="nav breadcrumbs" >
<li class="nav-item">
<a href="#" class="nav-link">Link a</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link a</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Link a</a>
</li>
</ul>
You can create tabs by adding the class .tabs into a .nav component
<ul class="nav tabs">
<li class="nav-item">
<a href="" class="nav-link">Link a</a>
</li>
<li class="nav-item">
<a href="" class="nav-link">Link b</a>
</li>
<li class="nav-item active">
<a href="" class="nav-link is-active">Link c</a>
</li>
</ul>
you can change the poition of the tabs by using the flexbox utilities classes .justify-
<ul class="nav tabs">
...
</ul>
<ul class="nav tabs justify-center">
...
</ul>
<ul class="nav tabs justify-end">
...
</ul>
You can make tabs to use the full width of its container by adding the class .full
<ul class="nav tabs full">
...
</ul>
you can change the style of tabs to outline by adding the class .outline
<ul class="nav tabs outline">
...
</ul>