You are viewing the deprecated 0.5.3 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

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

### 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`.

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

### 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" 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');

          });
        });
      }

    });

### 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="http://bulma.io/versions/0.5.3/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/versions/0.5.3">
          <img src="http://bulma.io/versions/0.5.3/images/bulma-logo.png" alt="Bulma v0.5.3: 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.3/documentation/overview/start/">
              Docs
            </a>
            <div class="navbar-dropdown is-boxed">
              <a class="navbar-item " href="/versions/0.5.3/documentation/overview/start/">
                Overview
              </a>
              <a class="navbar-item " href="http://bulma.io/versions/0.5.3/documentation/modifiers/syntax/">
                Modifiers
              </a>
              <a class="navbar-item " href="http://bulma.io/versions/0.5.3/documentation/columns/basics/">
                Columns
              </a>
              <a class="navbar-item " href="http://bulma.io/versions/0.5.3/documentation/layout/container/">
                Layout
              </a>
              <a class="navbar-item " href="http://bulma.io/versions/0.5.3/documentation/form/general/">
                Form
              </a>
              <a class="navbar-item " href="http://bulma.io/versions/0.5.3/documentation/elements/box/">
                Elements
              </a>

                <a class="navbar-item is-active" href="http://bulma.io/versions/0.5.3/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/versions/0.5.3/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.3/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.3/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.3/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.3/expo/">
            <span class="bd-emoji">⭐️</span>
            Expo
          </a>
          <a class="navbar-item " href="http://bulma.io/versions/0.5.3/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.3"
      target="_blank"
      href="https://twitter.com/intent/tweet?text=Bulma v0.5.3: a modern CSS framework based on Flexbox&hashtags=bulmaio&url=http://bulma.io/versions/0.5.3&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>

### Dropdown menu #

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/versions/0.5.3/images/bulma-logo.png" alt="Bulma v0.5.3: 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/versions/0.5.3/images/bulma-logo.png" alt="Bulma v0.5.3: 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/versions/0.5.3/images/bulma-logo.png" alt="Bulma v0.5.3: 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!