--- layout: documentation doc-tab: components doc-subtab: nav --- {% include subnav-components.html %}
{% if site.vernum >= 43 %}

This component has been deprecated and will be deleted soon.

While both .nav and .navbar currently co-exist to ensure backwards compatibility, the .nav will probably be deleted in an upcoming update, so you should start using the new navbar instead.

{% endif %}

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