--- layout: documentation doc-tab: components doc-subtab: navbar --- {% include subnav-components.html %} {% capture navbar_example %} {% include navbar.html id="Example" %} {% endcapture %} {% capture navbar_brand_example %} {% endcapture %} {% capture navbar_burger_example %}
{% endcapture %} {% capture navbar_brand_items_example %} {% endcapture %} {% capture navbar_menu_example %} {% endcapture %} {% capture navbar_menu_active_example %}
{% endcapture %} {% capture navbar_start_end_example %}
{% endcapture %} {% capture navbar_item_link_example %} Home {% endcapture %} {% capture navbar_item_brand_example %} {% endcapture %} {% capture navbar_item_dropdown_example %}
Docs
{% endcapture %} {% capture navbar_item_dropdown_bis_example %}
Overview
{% endcapture %} {% capture navbar_item_other_example %}

Tweet

Download

{% endcapture %} {% capture navbar_transparent_example %} {% include navbar.html transparent=true boxed=true id="TransparentExample" %} {% endcapture %} {% capture navbar_dropdown_example %} {% endcapture %} {% capture navbar_dropdown_hover_example %} {% endcapture %} {% capture navbar_dropdown_active_example %} {% endcapture %} {% capture navbar_dropdown_default_example %}

Documentation

Everything you need to create a website with Bulma

{% endcapture %} {% capture navbar_dropdown_boxed_example %}

Documentation

Everything you need to create a website with Bulma

{% endcapture %} {% capture navbar_dropdown_item_active_example %}

Documentation

Everything you need to create a website with Bulma

{% endcapture %} {% capture navbar_divider_example %}
{% endcapture %} {% capture navbar_js_html %}
{% endcapture %} {% capture navbar_js_code %} document.addEventListener('DOMContentLoaded', function () { // Get all "navbar-burger" elements var $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0); // Check if there are any nav burgers if ($navbarBurgers.length > 0) { // Add a click event on each of them $navbarBurgers.forEach(function ($el) { $el.addEventListener('click', () => { // Get the target from the "data-target" attribute var target = $el.dataset.target; var $target = document.getElementById(target); // Toggle the class on both the "navbar-burger" and the "navbar-menu" $el.classList.toggle('is-active'); $target.classList.toggle('is-active'); }); }); } }); {% endcapture %}

Navbar

A responsive horizontal navbar that can supports images, links, buttons, and dropdowns

New! 0.4.3

The new navbar replaces the deprecated nav component, whose documentation you can still access temporarily here.

The navbar component is a responsive and versatile horizontal navigation bar with the following structure:

  • navbar the main container
    • navbar-brand the left side, always visible, which usually contains the logo and optionally some links or icons
      • navbar-burger the hamburger icon, which toggles the navbar menu on touch devices
    • navbar-menu the right side, hidden on touch devices, visible on desktop
      • navbar-start the left part of the menu, which appears next to the navbar brand on desktop
      • navbar-end the right part of the menu, which appears at the end of the navbar
        • navbar-item each single item of the navbar, which can either be a a or a div
          • navbar-link a link as the sibling of a dropdown, with an arrow
          • navbar-dropdown the dropdown menu, which can include navbar items and dividers
            • navbar-divider a horizontal line to separate navbar items
{{navbar_example}}
{% highlight html %}{{navbar_example}}{% endhighlight %}

Navbar brand

The navbar-brand is the left side of the navbar. It can contain:

  • a number of navbar-item
  • the navbar-burger as last child
{% highlight html %}{{navbar_brand_example}}{% endhighlight %}

The navbar brand is always visible: on both touch devices {% include bp/touch.html %} and desktop {% include bp/desktop.html %}. As a result, it is recommended to only use a few navbar items to avoid overflowing horizontally on small devices.

{{navbar_brand_items_example}}
{% highlight html %}{{navbar_brand_items_example}}{% endhighlight %}

On desktop {% include bp/desktop.html %}, the navbar brand will only take up the space it needs.

Navbar burger

The navbar-burger is a hamburger menu that only appears on mobile. It has to appear as the last child of navbar-brand.

{% highlight html %}{{ navbar_burger_example }}{% endhighlight %}

You can add the modifier class is-active to turn it into a cross.

Navbar menu

The navbar-menu is the counterpart of the navbar brand. As such, it must appear as a direct child of navbar, as a sibling of navbar-brand.

{% highlight html %}{{navbar_menu_example}}{% endhighlight %}

The navbar-menu is hidden on touch devices {% include bp/touch.html %}. You need to add the modifier class is-active to display it.

{% highlight html %}{{navbar_menu_active_example}}{% endhighlight %}

On desktop {% include bp/desktop.html %}, the navbar-menu will fill up the space available in the navbar, leaving the navbar brand just the space it needs. It needs, however, two elements as direct children:

  • navbar-start
  • navbar-end

Navbar start and navbar end

The navbar-start and navbar-end are the two direct and only children of the navbar-menu.

On desktop {% include bp/desktop.html %}:

  • navbar-start will appear on the left
  • navbar-end will appear on the right

Each of them can contain any number of navbar-item.

{% highlight html %}{{navbar_start_end_example}}{% endhighlight %}

Navbar item

A navbar-item is a repeatable element that can be:

  • a navigation link {% highlight html %}{{ navbar_item_link_example }}{% endhighlight %}
  • a container for the brand logo {% highlight html %}{{ navbar_item_brand_example }}{% endhighlight %}
  • the parent of a dropdown menu {% highlight html %}{{ navbar_item_dropdown_example }}{% endhighlight %}
  • a child of a navbar dropdown {% highlight html %}{{ navbar_item_dropdown_bis_example }}{% endhighlight %}
  • a container for almost anything you want, like a field {% highlight html %}{{ navbar_item_other_example }}{% endhighlight %}

It can either be an anchor tag <a> or a <div>, as a direct child of either:

  • navbar
  • navbar-brand
  • navbar-start
  • navbar-end
  • navbar-dropdown

Transparent navbar

To seamlessly integrate the navbar in any visual context, you can add the is-transparent modifer on the navbar component. This will remove any hover or active background from the navbar items.

{{navbar_transparent_example}}
{% highlight html %}{{navbar_transparent_example}}{% endhighlight %}

To create a dropdown menu, you will need 4 elements:

  • navbar-item with the has-dropdown modifier
  • navbar-link which contains the dropdown arrow
  • navbar-dropdown which can contain instances of navbar-item and navbar-divider
{{ navbar_dropdown_example }}
{% highlight html %}{{ navbar_dropdown_example }}{% endhighlight %}

Show/hide the dropdown with either CSS or JavaScript

The navbar-dropdown is visible on touch devices {% include bp/touch.html %} but hidden on desktop {% include bp/desktop.html %}. How the dropdown is displayed on desktop depends on the parent's class.

The navbar-item with the has-dropdown modifier, has 2 additional modifiers

  • is-hoverable: the dropdown will show up when hovering the parent navbar-item
  • is-active: the dropdown will show up all the time

While the CSS :hover implementation works perfectly, the is-active class is available for users who want to control the display of the dropdown with JavaScript.

{{ navbar_dropdown_hover_example }}
{% highlight html %}{{ navbar_dropdown_hover_example }}{% endhighlight %}
{{ navbar_dropdown_active_example }}
{% highlight html %}{{ navbar_dropdown_active_example }}{% endhighlight %}

Styles for the dropdown menu

By default, the navbar-dropdown has:

  • a grey border-top
  • a border-radius at both bottom corners
{{ navbar_dropdown_default_example }}
{% highlight html %}{{ navbar_dropdown_default_example }}{% endhighlight %}

When having a transparent navbar, it is preferable to use the boxed version of the dropdown, by using the is-boxed modifier.

  • the grey border is removed
  • a slight inner shadow is added
  • all corners are rounded
  • the hover/active state is animated
{{ navbar_dropdown_boxed_example }}
{% highlight html %}{{ navbar_dropdown_boxed_example }}{% endhighlight %}

Active dropdown navbar item

{{ navbar_dropdown_item_active_example }}
{% highlight html %}{{ navbar_dropdown_item_active_example }}{% endhighlight %}

Dropdown divider

You can add a navbar-divider to display a horizontal rule in a navbar-dropdown.

{% highlight html %}{{ navbar_divider_example }}{% endhighlight %}