Navbar

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

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

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

• a number of navbar-item
• the navbar-burger as last child

The navbar brand is always visible: on both touch devices < 1024px and desktop >= 1024px . As a result, it is recommended to only use a few navbar items to avoid overflowing horizontally on small devices.

On desktop >= 1024px , the navbar brand will only take up the space it needs.

The navbar-burger is a hamburger menu that only appears on mobile. 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).

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

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.

The navbar-menu is hidden on touch devices < 1024px . You need to add the modifier class is-active to display it.

On desktop >= 1024px , 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

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

On desktop >= 1024px :

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

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

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

• a navigation link

  <a class="navbar-item">
    Home
  </a>

• a container for the brand logo

  <a class="navbar-item">
    <img src="https://versions.bulma.io/0.7.2/images/bulma-logo.png" width="112" height="28" alt="Bulma">
  </a>

• the parent of a dropdown menu

  <div class="navbar-item has-dropdown">
    <a class="navbar-link">
      Docs
    </a>
  
    <div class="navbar-dropdown">
      <!-- Other navbar items -->
    </div>
  </div>

• a child of a navbar dropdown

  <div class="navbar-dropdown">
    <a class="navbar-item">
      Overview
    </a>
  </div>

• a container for almost anything you want, like a field

  <div class="navbar-item">
    <div class="field is-grouped">
      <p class="control">
        <a class="button">
          <span class="icon">
            <i class="fas fa-twitter" aria-hidden="true"></i>
          </span>
          <span>Tweet</span>
        </a>
      </p>
      <p class="control">
        <a class="button is-primary">
          <span class="icon">
            <i class="fas fa-download" aria-hidden="true"></i>
          </span>
          <span>Download</span>
        </a>
      </p>
    </div>
  </div>

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

You can add the following modifier classes:

• is-expanded to turn it into a full-width element
• is-tab to add a bottom border on hover and show the bottom border using is-active

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.

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

• Add either is-fixed-top or is-fixed-bottom to the navbar component

  <nav class="navbar is-fixed-top">

• Add the corresponding has-navbar-fixed-top or has-navbar-fixed-bottom modifier to either <html> or <body> element to provide the appropriate padding to the page

  <html class="has-navbar-fixed-top">

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

The navbar-dropdown is visible on touch devices < 1024px but hidden on desktop >= 1024px . 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

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.

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.

By default, the navbar-dropdown has:

• a grey border-top
• a border-radius at both bottom corners

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

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

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

• is-primary
• is-link
• is-info
• is-success
• is-warning
• is-danger
• is-black
• is-dark
• is-light
• is-white

You can use these variables to customize this component. Simply set one or multiple of these variables before importing Bulma. Learn how.