--- 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

Each nav item needs to be wrapped in a nav-item element.

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)
  • toggle is-active on nav-toggle and nav-menu when nav-toggle was clicked
{% capture nav_example %} {% endcapture %}
{{nav_example}}
{% highlight html %} {{nav_example}} {% 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

To optimise the space on desktop, but also allow the mobile view to be usable, you can duplicate nav items in both nav-left and nav-right, and show/hide them with responsive helpers.

{% capture nav_tabs_example %} {% endcapture %}
{{nav_tabs_example}}
{% highlight html %} {{nav_tabs_example}} {% endhighlight %}