You are viewing the deprecated 0.5.2 version of the website. Click here to view the latest version

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/versions/0.5.2">
      <img src="http://bulma.io/versions/0.5.2/images/bulma-logo.png" alt="Bulma v0.5.2: 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

Javascript toggle

The Bulma package does not come with any JavaScript.
Here is however an implementation example, which toggles the class is-active on both the navbar-burger and the targeted navbar-menu.

<button class="button navbar-burger" data-target="navMenu">
  <span></span>
  <span></span>
  <span></span>
</button>

<div class="navbar-menu" id="navMenu">
  <!-- navbar-start, navbar-end... -->
</div>

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 navbar 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');

      });
    });
  }

});

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/versions/0.5.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="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

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/versions/0.5.2">
      <img src="http://bulma.io/versions/0.5.2/images/bulma-logo.png" alt="Bulma v0.5.2: 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="/versions/0.5.2/documentation/overview/start/">
          Docs
        </a>
        <div class="navbar-dropdown is-boxed">
          <a class="navbar-item " href="/versions/0.5.2/documentation/overview/start/">
            Overview
          </a>
          <a class="navbar-item " href="http://bulma.io/versions/0.5.2/documentation/modifiers/syntax/">
            Modifiers
          </a>
          <a class="navbar-item " href="http://bulma.io/versions/0.5.2/documentation/columns/basics/">
            Columns
          </a>
          <a class="navbar-item " href="http://bulma.io/versions/0.5.2/documentation/layout/container/">
            Layout
          </a>
          <a class="navbar-item " href="http://bulma.io/versions/0.5.2/documentation/form/general/">
            Form
          </a>
          <a class="navbar-item " href="http://bulma.io/versions/0.5.2/documentation/elements/box/">
            Elements
          </a>
          
            <a class="navbar-item is-active" href="http://bulma.io/versions/0.5.2/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.2</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/versions/0.5.2/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/versions/0.5.2/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/versions/0.5.2/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/versions/0.5.2/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/versions/0.5.2/expo/">
        <span class="bd-emoji">⭐️</span>
        Expo
      </a>
      <a class="navbar-item " href="http://bulma.io/versions/0.5.2/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/versions/0.5.2"
  target="_blank"
  href="https://twitter.com/intent/tweet?text=Bulma v0.5.2: a modern CSS framework based on Flexbox&hashtags=bulmaio&url=http://bulma.io/versions/0.5.2&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.2.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.2
      </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.2
      </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.2
      </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.2
          </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.2
          </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/versions/0.5.2/images/bulma-logo.png" alt="Bulma v0.5.2: 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.2
      </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/versions/0.5.2/images/bulma-logo.png" alt="Bulma v0.5.2: 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.2
      </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/versions/0.5.2/images/bulma-logo.png" alt="Bulma v0.5.2: 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.2
      </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!

Navbar

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

Navbar brand #

Navbar burger #

Navbar menu #

Javascript toggle

Navbar start and navbar end #

Navbar item #

Transparent navbar #

Show/hide the dropdown with either CSS or JavaScript

Right dropdown 0.5.1

Styles for the dropdown menu

Active dropdown navbar item

Dropdown divider

Colors #

Variables #

Navbar

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

Navbar brand #

Navbar burger #

Navbar menu #

Javascript toggle

Navbar start and navbar end #

Navbar item #

Transparent navbar #

Dropdown menu #

Show/hide the dropdown with either CSS or JavaScript

Right dropdown 0.5.1

Styles for the dropdown menu

Active dropdown navbar item

Dropdown divider

Colors #

Variables #