Documentation

Everything you need to create a website with Bulma

Navbar

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

New!
Since 0.4.3
Colors Yes
Sizes No
Variables Yes

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

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

  • a number of navbar-item
  • the navbar-burger as last child
<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <!-- navbar items, navbar burger... -->
  </div>
</nav>

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

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="http://bulma.io">
      <img src="http://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
    </a>

    <button class="button navbar-burger">
      <span></span>
      <span></span>
      <span></span>
    </button>
  </div>
</nav>

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

<button class="button navbar-burger">
  <span></span>
  <span></span>
  <span></span>
</button>

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.

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <!-- navbar items, navbar burger... -->
  </div>
  <div class="navbar-menu">
    <!-- navbar start, navbar end -->
  </div>
</nav>

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

<div class="navbar-menu">
  <!-- hidden on mobile -->
</div>

<div class="navbar-menu is-active">
  <!-- shown on mobile -->
</div>

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

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

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

<div class="navbar-menu">
  <div class="navbar-start">
    <!-- navbar items -->
  </div>

  <div class="navbar-end">
    <!-- navbar items -->
  </div>
</div>

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="http://bulma.io/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="fa 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="fa 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

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.

<nav class="navbar is-transparent">
  <div class="navbar-brand">
    <a class="navbar-item" href="http://bulma.io">
      <img src="http://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
    </a>

    <a class="navbar-item is-hidden-desktop" href="https://github.com/jgthms/bulma" target="_blank">
      <span class="icon" style="color: #333;">
        <i class="fa fa-lg fa-github"></i>
      </span>
    </a>

    <a class="navbar-item is-hidden-desktop" href="https://twitter.com/jgthms" target="_blank">
      <span class="icon" style="color: #55acee;">
        <i class="fa fa-lg fa-twitter"></i>
      </span>
    </a>

    <div class="navbar-burger burger" data-target="navMenuTransparentExample">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>

  <div id="navMenuTransparentExample" class="navbar-menu">
    <div class="navbar-start">
      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link  is-active" href="/documentation/overview/start/">
          Docs
        </a>
        <div class="navbar-dropdown is-boxed">
          <a class="navbar-item " href="/documentation/overview/start/">
            Overview
          </a>
          <a class="navbar-item " href="http://bulma.io/documentation/modifiers/syntax/">
            Modifiers
          </a>
          <a class="navbar-item " href="http://bulma.io/documentation/columns/basics/">
            Columns
          </a>
          <a class="navbar-item " href="http://bulma.io/documentation/layout/container/">
            Layout
          </a>
          <a class="navbar-item " href="http://bulma.io/documentation/form/general/">
            Form
          </a>
          <a class="navbar-item " href="http://bulma.io/documentation/elements/box/">
            Elements
          </a>
          
            <a class="navbar-item is-active" href="http://bulma.io/documentation/components/breadcrumb/">
              Components
            </a>
          
          <hr class="navbar-divider">
          <div class="navbar-item">
            <div>
              <p class="is-size-6-desktop">
                <strong class="has-text-info">0.5.3</strong>
              </p>
              
                <small>
                  <a class="bd-view-all-versions" href="/versions">View all versions</a>
                </small>
              
            </div>
          </div>
        </div>
      </div>
      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link " href="http://bulma.io/blog/">
          Blog
        </a>
        <div id="blogDropdown" class="navbar-dropdown is-boxed" data-style="width: 18rem;">
          
            <a class="navbar-item" href="/2017/08/03/list-of-tags/">
              <div class="navbar-content">
                <p>
                  <small class="has-text-info">03 Aug 2017</small>
                </p>
                <p>New feature: list of tags</p>
              </div>
            </a>
          
            <a class="navbar-item" href="/2017/08/01/bulma-bootstrap-comparison/">
              <div class="navbar-content">
                <p>
                  <small class="has-text-info">01 Aug 2017</small>
                </p>
                <p>Bulma / Bootstrap comparison</p>
              </div>
            </a>
          
            <a class="navbar-item" href="/2017/07/24/access-previous-bulma-versions/">
              <div class="navbar-content">
                <p>
                  <small class="has-text-info">24 Jul 2017</small>
                </p>
                <p>Access previous Bulma versions</p>
              </div>
            </a>
          
          <a class="navbar-item" href="http://bulma.io/blog/">
            More posts
          </a>
          <hr class="navbar-divider">
          <div class="navbar-item">
            <div class="navbar-content">
              <div class="level is-mobile">
                <div class="level-left">
                  <div class="level-item">
                    <strong>Stay up to date!</strong>
                  </div>
                </div>
                <div class="level-right">
                  <div class="level-item">
                    <a class="button bd-is-rss is-small" href="http://bulma.io/atom.xml">
                      <span class="icon is-small">
                        <i class="fa fa-rss"></i>
                      </span>
                      <span>Subscribe</span>
                    </a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="navbar-item has-dropdown is-hoverable">
        <div class="navbar-link">
          More
        </div>
        <div id="moreDropdown" class="navbar-dropdown is-boxed">
          <a class="navbar-item " href="http://bulma.io/extensions/">
            <div class="level is-mobile">
              <div class="level-left">
                <div class="level-item">
                  <p>
                    <strong>Extensions</strong>
                    <br>
                    <small>Side projects to enhance Bulma</small>
                  </p>
                </div>
              </div>
              <div class="level-right">
                <div class="level-item">
                  <span class="icon has-text-info">
                    <i class="fa fa-plug"></i>
                  </span>
                </div>
              </div>
            </div>
          </a>
        </div>
      </div>
      <a class="navbar-item " href="http://bulma.io/expo/">
        <span class="bd-emoji">⭐️</span>
        Expo
      </a>
      <a class="navbar-item " href="http://bulma.io/love/">
        <span class="bd-emoji">❤️</span>
        Love
      </a>
    </div>

    <div class="navbar-end">
      <a class="navbar-item is-hidden-desktop-only" href="https://github.com/jgthms/bulma" target="_blank">
        <span class="icon" style="color: #333;">
          <i class="fa fa-lg fa-github"></i>
        </span>
      </a>
      <a class="navbar-item is-hidden-desktop-only" href="https://twitter.com/jgthms" target="_blank">
        <span class="icon" style="color: #55acee;">
          <i class="fa fa-lg fa-twitter"></i>
        </span>
      </a>
      <div class="navbar-item">
        <div class="field is-grouped">
          <p class="control">
            <a class="bd-tw-button button"
  data-social-network="Twitter"
  data-social-action="tweet"
  data-social-target="http://bulma.io"
  target="_blank"
  href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&hashtags=bulmaio&url=http://bulma.io&via=jgthms">
  <span class="icon">
    <i class="fa fa-twitter"></i>
  </span>
  <span>
    Tweet
  </span>
</a>

          </p>
          <p class="control">
            <a class="button is-primary" href="https://github.com/jgthms/bulma/archive/0.5.3.zip">
              <span class="icon">
                <i class="fa fa-download"></i>
              </span>
              <span>Download</span>
            </a>
          </p>
        </div>
      </div>
    </div>
  </div>
</nav>

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
<nav class="navbar" role="navigation" aria-label="dropdown navigation">
  <div class="navbar-item has-dropdown">
    <a class="navbar-link">
      Docs
    </a>

    <div class="navbar-dropdown">
      <a class="navbar-item">
        Overview
      </a>
      <a class="navbar-item">
        Elements
      </a>
      <a class="navbar-item">
        Components
      </a>
      <hr class="navbar-divider">
      <div class="navbar-item">
        Version 0.5.3
      </div>
    </div>
  </div>
</nav>

Show/hide the dropdown with either CSS or JavaScript

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

<div class="navbar-item has-dropdown is-hoverable">
  <!-- navbar-link, navbar-dropdown etc. -->
</div>
<nav class="navbar" role="navigation" aria-label="dropdown navigation">
  <div class="navbar-item has-dropdown is-hoverable">
    <a class="navbar-link">
      Docs
    </a>

    <div class="navbar-dropdown">
      <a class="navbar-item">
        Overview
      </a>
      <a class="navbar-item">
        Elements
      </a>
      <a class="navbar-item">
        Components
      </a>
      <hr class="navbar-divider">
      <div class="navbar-item">
        Version 0.5.3
      </div>
    </div>
  </div>
</nav>
<div class="navbar-item has-dropdown is-active">
  <!-- navbar-link, navbar-dropdown etc. -->
</div>
<nav class="navbar" role="navigation" aria-label="dropdown navigation">
  <div class="navbar-item has-dropdown is-active">
    <a class="navbar-link">
      Docs
    </a>

    <div class="navbar-dropdown">
      <a class="navbar-item">
        Overview
      </a>
      <a class="navbar-item">
        Elements
      </a>
      <a class="navbar-item">
        Components
      </a>
      <hr class="navbar-divider">
      <div class="navbar-item">
        Version 0.5.3
      </div>
    </div>
  </div>
</nav>

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.

<div class="navbar-dropdown is-right">
  <!-- navbar-item, navbar-divider etc. -->
</div>

Documentation

Everything you need to create a website with Bulma

<nav class="navbar" role="navigation" aria-label="dropdown navigation">
  <div class="navbar-menu">
    <div class="navbar-start">
      <div class="navbar-item has-dropdown is-active">
        <a class="navbar-link">
          Left
        </a>

        <div class="navbar-dropdown">
          <a class="navbar-item">
            Overview
          </a>
          <a class="navbar-item">
            Elements
          </a>
          <a class="navbar-item">
            Components
          </a>
          <hr class="navbar-divider">
          <div class="navbar-item">
            Version 0.5.3
          </div>
        </div>
      </div>
    </div>

    <div class="navbar-end">
      <div class="navbar-item has-dropdown is-active">
        <a class="navbar-link">
          Right
        </a>

        <div class="navbar-dropdown is-right">
          <a class="navbar-item">
            Overview
          </a>
          <a class="navbar-item">
            Elements
          </a>
          <a class="navbar-item">
            Components
          </a>
          <hr class="navbar-divider">
          <div class="navbar-item">
            Version 0.5.3
          </div>
        </div>
      </div>
    </div>
  </div>
</nav>

<section class="hero is-primary">
  <div class="hero-body">
    <p class="title">
      Documentation
    </p>
    <p class="subtitle">
      Everything you need to <strong>create a website</strong> with Bulma
    </p>
  </div>
</section>

Styles for the dropdown menu

By default, the navbar-dropdown has:

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

Documentation

Everything you need to create a website with Bulma

<nav class="navbar" role="navigation" aria-label="dropdown navigation">
  <a class="navbar-item">
    <img src="http://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
  </a>

  <div class="navbar-item has-dropdown is-active">
    <a class="navbar-link">
      Docs
    </a>

    <div class="navbar-dropdown">
      <a class="navbar-item">
        Overview
      </a>
      <a class="navbar-item">
        Elements
      </a>
      <a class="navbar-item">
        Components
      </a>
      <hr class="navbar-divider">
      <div class="navbar-item">
        Version 0.5.3
      </div>
    </div>
  </div>
</nav>

<section class="hero is-primary">
  <div class="hero-body">
    <p class="title">
      Documentation
    </p>
    <p class="subtitle">
      Everything you need to <strong>create a website</strong> with Bulma
    </p>
  </div>
</section>

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

Documentation

Everything you need to create a website with Bulma

<nav class="navbar is-transparent" role="navigation" aria-label="dropdown navigation">
  <a class="navbar-item">
    <img src="http://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
  </a>

  <div class="navbar-item has-dropdown is-active">
    <a class="navbar-link">
      Docs
    </a>

    <div class="navbar-dropdown is-boxed">
      <a class="navbar-item">
        Overview
      </a>
      <a class="navbar-item">
        Elements
      </a>
      <a class="navbar-item">
        Components
      </a>
      <hr class="navbar-divider">
      <div class="navbar-item">
        Version 0.5.3
      </div>
    </div>
  </div>
</nav>

<section class="hero">
  <div class="hero-body">
    <p class="title">
      Documentation
    </p>
    <p class="subtitle">
      Everything you need to <strong>create a website</strong> with Bulma
    </p>
  </div>
</section>

Active dropdown navbar item

Documentation

Everything you need to create a website with Bulma

<nav class="navbar" role="navigation" aria-label="dropdown navigation">
  <a class="navbar-item">
    <img src="http://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
  </a>

  <div class="navbar-item has-dropdown is-active">
    <a class="navbar-link">
      Docs
    </a>

    <div class="navbar-dropdown">
      <a class="navbar-item">
        Overview
      </a>
      <a class="navbar-item is-active">
        Elements
      </a>
      <a class="navbar-item">
        Components
      </a>
      <hr class="navbar-divider">
      <div class="navbar-item">
        Version 0.5.3
      </div>
    </div>
  </div>
</nav>

<section class="hero is-primary">
  <div class="hero-body">
    <p class="title">
      Documentation
    </p>
    <p class="subtitle">
      Everything you need to <strong>create a website</strong> with Bulma
    </p>
  </div>
</section>

Dropdown divider

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

<hr class="navbar-divider">

Colors #

New! 0.5.2

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

  • is-primary
  • is-info
  • is-success
  • is-warning
  • is-danger
  • is-black
  • is-dark
  • is-light
  • is-white
<nav class="navbar is-primary">
  <!-- navbar brand, navbar menu... -->
</nav>

Variables #

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

Name Default value
Name Default value
$navbar-background-color $white
$navbar-height 3.25rem
$navbar-item-color $grey-dark
$navbar-item-hover-color $black
$navbar-item-hover-background-color $background
$navbar-item-active-color $black
$navbar-item-active-background-color transparent
$navbar-tab-hover-background-color transparent
$navbar-tab-hover-border-bottom-color $primary
$navbar-tab-active-color $primary
$navbar-tab-active-background-color transparent
$navbar-tab-active-border-bottom-color $primary
$navbar-tab-active-border-bottom-style solid
$navbar-tab-active-border-bottom-width 3px
$navbar-dropdown-background-color $white
$navbar-dropdown-border-top 1px solid $border
$navbar-dropdown-offset -4px
$navbar-dropdown-arrow $link
$navbar-dropdown-radius $radius-large
$navbar-dropdown-z 20
$navbar-dropdown-boxed-radius $radius-large
$navbar-dropdown-boxed-shadow 0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
$navbar-dropdown-item-hover-color $black
$navbar-dropdown-item-hover-background-color $background
$navbar-dropdown-item-active-color $primary
$navbar-dropdown-item-active-background-color $background
$navbar-divider-background-color $border

This page is open source. Noticed a typo? Or something unclear? Improve this page on GitHub

Bulma Partners

Check out their products!

Bulma Newsletter

Get notified when v1 is ready!