You are viewing the deprecated 0.4.4 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! 0.4.3

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 a 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

<nav class="navbar ">
  <div class="navbar-brand">
    <a class="navbar-item" href="https://versions.bulma.io/0.4.4">
      <img src="https://versions.bulma.io/0.4.4/images/bulma-logo.png" alt="Bulma v0.4.4: 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-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-twitter"></i>
      </span>
    </a>

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

  <div id="navMenuExample" class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item " href="https://versions.bulma.io/0.4.4/">
        Home
      </a>
      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link  is-active" href="/versions/0.4.4/documentation/overview/start/">
          Docs
        </a>
        <div class="navbar-dropdown ">
          <a class="navbar-item " href="/versions/0.4.4/documentation/overview/start/">
            Overview
          </a>
          <a class="navbar-item " href="https://versions.bulma.io/0.4.4/documentation/modifiers/syntax/">
            Modifiers
          </a>
          <a class="navbar-item " href="https://versions.bulma.io/0.4.4/documentation/grid/columns/">
            Grid
          </a>
          <a class="navbar-item " href="https://versions.bulma.io/0.4.4/documentation/form/general/">
            Form
          </a>
          <a class="navbar-item " href="https://versions.bulma.io/0.4.4/documentation/elements/box/">
            Elements
          </a>

            <a class="navbar-item is-active" href="https://versions.bulma.io/0.4.4/documentation/components/breadcrumb/">
              Components
            </a>

          <a class="navbar-item " href="https://versions.bulma.io/0.4.4/documentation/layout/container/">
            Layout
          </a>
          <hr class="navbar-divider">
          <div class="navbar-item">
            <div>
              <p class="has-text-info is-size-6-desktop"><strong>0.4.4</strong></p>

                <small>
                  <a class="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="https://versions.bulma.io/0.4.4/blog/">
          Blog
        </a>
        <div id="blogDropdown" class="navbar-dropdown " data-style="width: 18rem;">

            <a class="navbar-item" href="/2017/03/10/new-field-element/">
              <div class="navbar-content">
                <p>
                  <small class="has-text-info">10 Mar 2017</small>
                </p>
                <p>New field element (for better controls)</p>
              </div>
            </a>

            <a class="navbar-item" href="/2016/04/11/metro-ui-css-grid-with-bulma-tiles/">
              <div class="navbar-content">
                <p>
                  <small class="has-text-info">11 Apr 2016</small>
                </p>
                <p>Metro UI CSS grid with Bulma tiles</p>
              </div>
            </a>

            <a class="navbar-item" href="/2016/02/09/blog-launched-new-responsive-columns-new-helpers/">
              <div class="navbar-content">
                <p>
                  <small class="has-text-info">09 Feb 2016</small>
                </p>
                <p>Blog launched, new responsive columns, new helpers</p>
              </div>
            </a>

          <a class="navbar-item" href="https://versions.bulma.io/0.4.4/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 is-rss is-small" href="https://versions.bulma.io/0.4.4/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 ">
          <a class="navbar-item " href="https://versions.bulma.io/0.4.4/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>
    </div>

    <div class="navbar-end">
      <a class="navbar-item" href="https://github.com/jgthms/bulma" target="_blank">
        Github
      </a>
      <a class="navbar-item" href="https://twitter.com/jgthms" target="_blank">
        Twitter
      </a>
      <div class="navbar-item">
        <div class="field is-grouped">
          <p class="control">
            <a id="twitter"
              class="button"
              data-social-network="Twitter"
              data-social-action="tweet"
              data-social-target="https://versions.bulma.io/0.4.4"
              target="_blank"
              href="https://twitter.com/intent/tweet?text=Bulma v0.4.4: a modern CSS framework based on Flexbox&url=https://versions.bulma.io/0.4.4&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.4.4.zip">
              <span class="icon">
                <i class="fa fa-download"></i>
              </span>
              <span>Download</span>
            </a>
          </p>
        </div>
      </div>
    </div>
  </div>
</nav>

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

<nav class="navbar">
  <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">
  <div class="navbar-brand">
    <a class="navbar-item" href="https://versions.bulma.io/0.4.4">
      <img src="https://versions.bulma.io/0.4.4/images/bulma-logo.png" alt="Bulma v0.4.4: a modern CSS framework based on Flexbox" width="112" height="28">
    </a>

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

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

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.

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

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

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.

<nav class="navbar">
  <div class="navbar-brand">
    <!-- navbar items, nav 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.

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

<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 nav burgers
  if ($navbarBurgers.length > 0) {

    // Add a click event on each of them
    $navbarBurgers.forEach(function ($el) {
      $el.addEventListener('click', () => {

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

      });
    });
  }

});

Navbar start and 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>

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.4.4/images/bulma-logo.png" width="112" height="28">
</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"></i>
        </span>
        <span>Tweet</span>
      </a>
    </p>
    <p class="control">
      <a class="button is-primary">
        <span class="icon">
          <i class="fa fa-download"></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 modifier 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="https://versions.bulma.io/0.4.4">
      <img src="https://versions.bulma.io/0.4.4/images/bulma-logo.png" alt="Bulma v0.4.4: 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-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-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">
      <a class="navbar-item " href="https://versions.bulma.io/0.4.4/">
        Home
      </a>
      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link  is-active" href="/versions/0.4.4/documentation/overview/start/">
          Docs
        </a>
        <div class="navbar-dropdown is-boxed">
          <a class="navbar-item " href="/versions/0.4.4/documentation/overview/start/">
            Overview
          </a>
          <a class="navbar-item " href="https://versions.bulma.io/0.4.4/documentation/modifiers/syntax/">
            Modifiers
          </a>
          <a class="navbar-item " href="https://versions.bulma.io/0.4.4/documentation/grid/columns/">
            Grid
          </a>
          <a class="navbar-item " href="https://versions.bulma.io/0.4.4/documentation/form/general/">
            Form
          </a>
          <a class="navbar-item " href="https://versions.bulma.io/0.4.4/documentation/elements/box/">
            Elements
          </a>

            <a class="navbar-item is-active" href="https://versions.bulma.io/0.4.4/documentation/components/breadcrumb/">
              Components
            </a>

          <a class="navbar-item " href="https://versions.bulma.io/0.4.4/documentation/layout/container/">
            Layout
          </a>
          <hr class="navbar-divider">
          <div class="navbar-item">
            <div>
              <p class="has-text-info is-size-6-desktop"><strong>0.4.4</strong></p>

                <small>
                  <a class="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="https://versions.bulma.io/0.4.4/blog/">
          Blog
        </a>
        <div id="blogDropdown" class="navbar-dropdown is-boxed" data-style="width: 18rem;">

            <a class="navbar-item" href="/2017/03/10/new-field-element/">
              <div class="navbar-content">
                <p>
                  <small class="has-text-info">10 Mar 2017</small>
                </p>
                <p>New field element (for better controls)</p>
              </div>
            </a>

            <a class="navbar-item" href="/2016/04/11/metro-ui-css-grid-with-bulma-tiles/">
              <div class="navbar-content">
                <p>
                  <small class="has-text-info">11 Apr 2016</small>
                </p>
                <p>Metro UI CSS grid with Bulma tiles</p>
              </div>
            </a>

            <a class="navbar-item" href="/2016/02/09/blog-launched-new-responsive-columns-new-helpers/">
              <div class="navbar-content">
                <p>
                  <small class="has-text-info">09 Feb 2016</small>
                </p>
                <p>Blog launched, new responsive columns, new helpers</p>
              </div>
            </a>

          <a class="navbar-item" href="https://versions.bulma.io/0.4.4/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 is-rss is-small" href="https://versions.bulma.io/0.4.4/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="https://versions.bulma.io/0.4.4/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>
    </div>

    <div class="navbar-end">
      <a class="navbar-item" href="https://github.com/jgthms/bulma" target="_blank">
        Github
      </a>
      <a class="navbar-item" href="https://twitter.com/jgthms" target="_blank">
        Twitter
      </a>
      <div class="navbar-item">
        <div class="field is-grouped">
          <p class="control">
            <a id="twitter"
              class="button"
              data-social-network="Twitter"
              data-social-action="tweet"
              data-social-target="https://versions.bulma.io/0.4.4"
              target="_blank"
              href="https://twitter.com/intent/tweet?text=Bulma v0.4.4: a modern CSS framework based on Flexbox&url=https://versions.bulma.io/0.4.4&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.4.4.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">
  <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.4.4
      </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.

<nav class="navbar">
  <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.4.4
      </div>
    </div>
  </div>
</nav>

<nav class="navbar">
  <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.4.4
      </div>
    </div>
  </div>
</nav>

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">
  <a class="navbar-item">
    <img src="https://versions.bulma.io/0.4.4/images/bulma-logo.png" alt="Bulma v0.4.4: 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.4.4
      </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">
  <a class="navbar-item">
    <img src="https://versions.bulma.io/0.4.4/images/bulma-logo.png" alt="Bulma v0.4.4: 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.4.4
      </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">
  <a class="navbar-item">
    <img src="https://versions.bulma.io/0.4.4/images/bulma-logo.png" alt="Bulma v0.4.4: 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.4.4
      </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">

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

Dropdown menu

Show/hide the dropdown with either CSS or JavaScript

Styles for the dropdown menu

Active dropdown navbar item

Dropdown divider