--- layout: documentation doc-tab: components doc-subtab: nav --- {% include subnav-components.html %}

Nav

A responsive horizontal nav bar that can contain links, tabs, buttons, icons, and a logo

The nav container can have 3 parts:

  • nav-left
  • nav-center
  • nav-right

For responsiveness, 2 additional classes are available:

  • nav-toggle for the hamburger menu on mobile
  • nav-menu for menu that is collapsable on mobile (you can combine it with nav-right)
{% highlight html %} {% endhighlight %}

Modifiers

  • the nav container can have a shadow by adding the has-shadow modifier
  • the nav-item can become active by adding the is-active modifier
  • the nav-item can become a tab by adding the is-tab modifier
{% highlight html %} {% endhighlight %}