--- title: Navbar layout: docs theme: library fullwidth: true doc-tab: components doc-subtab: navbar breadcrumb: - home - documentation - components - components-navbar meta: colors: true sizes: false variables: true modals: - docs/examples/navbar-bottom.html --- {% capture navbar_basic_example %} {% endcapture %} {% capture navbar_example %} {% include docs/examples/navbar.html id="Default" %} {% endcapture %} {% capture navbar_brand_example %} {% endcapture %} {% capture navbar_burger_example %} {% endcapture %} {% capture navbar_burger_active_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 %} {% include svg/bulma-logo.html %} {% endcapture %} {% capture navbar_item_dropdown_example %} {% endcapture %} {% capture navbar_item_dropdown_bis_example %} {% endcapture %} {% capture navbar_item_other_example %} {% endcapture %} {% capture navbar_transparent_example %} {% include docs/examples/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_dropup_snippet %} {% endcapture %} {% capture navbar_dropup_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', () => { // Get all "navbar-burger" elements const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0); // Add a click event on each of them $navbarBurgers.forEach( el => { el.addEventListener('click', () => { // Get the target from the "data-target" attribute const target = el.dataset.target; const $target = document.getElementById(target); // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu" el.classList.toggle('is-active'); $target.classList.toggle('is-active'); }); }); }); {% endcapture %} {% capture navbar_jquery_code %} $(document).ready(function() { // Check for click events on the navbar burger icon $(".navbar-burger").click(function() { // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu" $(".navbar-burger").toggleClass("is-active"); $(".navbar-menu").toggleClass("is-active"); }); }); {% endcapture %} {% capture navbar_color_markup %} {% endcapture %}

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

{% include docs/elements/anchor.html name="Basic Navbar" %}

To get started quickly, here is what a complete basic navbar looks like:

{{ navbar_basic_example }}
{% highlight html %}{{ navbar_basic_example }}{% endhighlight %} {% include docs/elements/anchor.html name="Navbar brand" %}

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

{% highlight html %}{{navbar_brand_example}}{% endhighlight %}

The navbar brand is always visible: on both touch devices {% include docs/bp/touch.html %} and desktop {% include docs/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 docs/bp/desktop.html %}, the navbar brand will only take up the space it needs.

{% include docs/elements/anchor.html name="Navbar burger" %}

The navbar-burger is a hamburger menu that only appears on touch devices. It has to appear as the last child of navbar-brand. It has to contain three empty span tags in order to visualize the hamburger lines or the cross (when active).

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

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

{% highlight html %}{{ navbar_burger_active_example }}{% endhighlight %}
{% include docs/elements/anchor.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 docs/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 docs/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:


{% include docs/elements/anchor.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 docs/bp/desktop.html %}:

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

{% highlight html %}{{navbar_start_end_example}}{% endhighlight %} {% include docs/elements/anchor.html name="Navbar item" %}

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

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

You can add the following modifier classes:

{% include docs/elements/anchor.html name="Transparent navbar" %}

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

{% include docs/elements/snippet.html content=navbar_transparent_example paddingless=true horizontal=true more=true %} {% include docs/elements/anchor.html name="Fixed navbar" %}

You can now fix the navbar to either the top or bottom of the page. This is a 2-step process:

Try it out!

{% include docs/elements/anchor.html name="Dropdown menu" %}

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

{{ 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 docs/bp/touch.html %} but hidden on desktop {% include docs/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

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

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

Dropup

If you're using a navbar at the bottom, like the fixed bottom navbar, you might want to use a dropup menu. Simply add the has-dropdown and has-dropdown-up modifiers to the parent navbar-item.

{% highlight html %}{{ navbar_dropup_snippet }}{% endhighlight %}
{{ navbar_dropup_example }}
{% highlight html %}{{ navbar_dropup_example }}{% endhighlight %}
{% assign vernum = site.data.meta.version | downcase | remove: "." | plus: 0 %} {% if vernum >= 72 %}

Dropdown without arrow

You can remove the arrow in the items of the navbar by adding the is-arrowless modifier to them.

{% highlight html %} {% endhighlight %} {% capture navbar_dropup_without_arrow_example %} {% endcapture %}
{{ navbar_dropup_without_arrow_example }}
{% highlight html %}{{ navbar_dropup_without_arrow_example }}{% endhighlight %}
{% endif %}

Styles for the dropdown menu

By default, the navbar-dropdown has:

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

{{ 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 docs/elements/anchor.html name="Colors" %}

You can change the background color of the navbar by using one of the 9 color modifiers:

{% highlight html %}{{ navbar_color_markup }}{% endhighlight %}
{% include docs/examples/navbar.html %}
{% include docs/examples/navbar-color.html color="primary" %}
{% include docs/examples/navbar-color.html color="link" %}
{% include docs/examples/navbar-color.html color="info" %}
{% include docs/examples/navbar-color.html color="success" %}
{% include docs/examples/navbar-color.html color="warning" light=true %}
{% include docs/examples/navbar-color.html color="danger" %}
{% include docs/examples/navbar-color.html color="black" %}
{% include docs/examples/navbar-color.html color="dark" %}
{% include docs/examples/navbar-color.html color="light" light=true %}
{% include docs/examples/navbar-color.html color="white" light=true %}
{% include docs/elements/anchor.html name="Navbar Helper Classes" %}
Type Name Description
Spacing is-spaced Sets Top and Bottom paddings with 1rem,
Left and Right paddings with 2rem
Shading has-shadow Adds a small amount of box-shadow around the navbar