--- layout: documentation doc-tab: components doc-subtab: navbar variables: - name: $navbar-background-color value: $white - name: $navbar-height value: 3.25rem - name: $navbar-item-color value: $grey-dark - name: $navbar-item-hover-color value: $black - name: $navbar-item-hover-background-color value: $background - name: $navbar-item-active-color value: $black - name: $navbar-item-active-background-color value: transparent - name: $navbar-tab-hover-background-color value: transparent - name: $navbar-tab-hover-border-bottom-color value: $primary - name: $navbar-tab-active-color value: $primary - name: $navbar-tab-active-background-color value: transparent - name: $navbar-tab-active-border-bottom-color value: $primary - name: $navbar-tab-active-border-bottom-style value: solid - name: $navbar-tab-active-border-bottom-width value: 3px - name: $navbar-dropdown-background-color value: $white - name: $navbar-dropdown-border-top value: 1px solid $border - name: $navbar-dropdown-offset value: -4px - name: $navbar-dropdown-arrow value: $link - name: $navbar-dropdown-radius value: $radius-large - name: $navbar-dropdown-z value: 20 - name: $navbar-dropdown-boxed-radius value: $radius-large - name: $navbar-dropdown-boxed-shadow value: 0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1) - name: $navbar-dropdown-item-hover-color value: $black - name: $navbar-dropdown-item-hover-background-color value: $background - name: $navbar-dropdown-item-active-color value: $primary - name: $navbar-dropdown-item-active-background-color value: $background - name: $navbar-divider-background-color value: $border --- {% 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_snippet %}
{% endcapture %} {% capture navbar_dropdown_hover_example %} {% endcapture %} {% capture navbar_dropdown_active_snippet %}
{% endcapture %} {% capture navbar_dropdown_active_example %} {% endcapture %} {% capture navbar_dropdown_right_snippet %}
{% endcapture %} {% capture navbar_dropdown_right_example %}

Documentation

Everything you need to create a website with Bulma

{% 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', function () { // 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

{% include meta.html new=true since="0.4.3" colors=false sizes=false variables=true %}

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 an 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 %} {% include heading.html name="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.

{% include heading.html name="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.

{% include heading.html name="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
{% include heading.html name="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 %} {% include heading.html name="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
{% include heading.html name="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 %} {% include heading.html name="Dropdown menu" %}

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.

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

Right dropdown 0.5.1

If your parent navbar-item is on the right side, you can position the dropdown to start from the right with the is-right modifier.

{% highlight html %}{{ navbar_dropdown_right_snippet }}{% endhighlight %}
{{ navbar_dropdown_right_example }}
{% highlight html %}{{ navbar_dropdown_right_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 %} {% include variables.html %}