Navbar

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

Colors Yes
Sizes No
Variables Yes

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

Basic Navbar #

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

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="https://bulma.io">
      <img src="https://versions.bulma.io/0.7.2/images/bulma-logo.png" width="112" height="28">
    </a>

    <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>

  <div id="navbarBasicExample" class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item">
        Home
      </a>

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

      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link">
          More
        </a>

        <div class="navbar-dropdown">
          <a class="navbar-item">
            About
          </a>
          <a class="navbar-item">
            Jobs
          </a>
          <a class="navbar-item">
            Contact
          </a>
          <hr class="navbar-divider">
          <a class="navbar-item">
            Report an issue
          </a>
        </div>
      </div>
    </div>

    <div class="navbar-end">
      <div class="navbar-item">
        <div class="buttons">
          <a class="button is-primary">
            <strong>Sign up</strong>
          </a>
          <a class="button is-light">
            Log in
          </a>
        </div>
      </div>
    </div>
  </div>
</nav>

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 < 1024px and desktop >= 1024px . 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="https://bulma.io">
      <img src="https://versions.bulma.io/0.7.2/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
    </a>

    <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
      <span aria-hidden="true"></span>
    </a>
  </div>
</nav>

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


The navbar-burger is a hamburger menu that only appears on mobile. It has to appear as the last child of navbar-brand. It has to contain three empty span tags in order to visualize the hamburger lines or the cross (when active).

<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
  <span aria-hidden="true"></span>
  <span aria-hidden="true"></span>
  <span aria-hidden="true"></span>
</a>

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 < 1024px . 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 >= 1024px , the navbar-menu will fill up the space available in the navbar, leaving the navbar brand just the space it needs. It needs, however, two elements as direct children:

  • navbar-start
  • navbar-end


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

On desktop >= 1024px :

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

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

<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="https://versions.bulma.io/0.7.2/images/bulma-logo.png" width="112" height="28" alt="Bulma">
    </a>
  • the parent of a dropdown menu
    <div class="navbar-item has-dropdown">
      <a class="navbar-link">
        Docs
      </a>
    
      <div class="navbar-dropdown">
        <!-- Other navbar items -->
      </div>
    </div>
  • a child of a navbar dropdown
    <div class="navbar-dropdown">
      <a class="navbar-item">
        Overview
      </a>
    </div>
  • a container for almost anything you want, like a field
    <div class="navbar-item">
      <div class="field is-grouped">
        <p class="control">
          <a class="button">
            <span class="icon">
              <i class="fas fa-twitter" aria-hidden="true"></i>
            </span>
            <span>Tweet</span>
          </a>
        </p>
        <p class="control">
          <a class="button is-primary">
            <span class="icon">
              <i class="fas fa-download" aria-hidden="true"></i>
            </span>
            <span>Download</span>
          </a>
        </p>
      </div>
    </div>

It can either be an anchor tag <a> or a <div>, as a direct child of either:

  • navbar
  • navbar-brand
  • navbar-start
  • navbar-end
  • navbar-dropdown

You can add the following modifier classes:

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

Transparent navbar #

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://bulma.io">
      <img src="https://versions.bulma.io/0.7.2/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
    </a>
    <div class="navbar-burger burger" data-target="navbarExampleTransparentExample">
      <span></span>
      <span></span>
      <span></span>
    </div>
  </div>

  <div id="navbarExampleTransparentExample" class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item" href="https://versions.bulma.io/0.7.2/">
        Home
      </a>
      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link" 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="https://versions.bulma.io/0.7.2/documentation/modifiers/syntax/">
            Modifiers
          </a>
          <a class="navbar-item" href="https://versions.bulma.io/0.7.2/documentation/columns/basics/">
            Columns
          </a>
          <a class="navbar-item" href="https://versions.bulma.io/0.7.2/documentation/layout/container/">
            Layout
          </a>
          <a class="navbar-item" href="https://versions.bulma.io/0.7.2/documentation/form/general/">
            Form
          </a>
          <hr class="navbar-divider">
          <a class="navbar-item" href="https://versions.bulma.io/0.7.2/documentation/elements/box/">
            Elements
          </a>
          <a class="navbar-item is-active" href="https://versions.bulma.io/0.7.2/documentation/components/breadcrumb/">
            Components
          </a>
        </div>
      </div>
    </div>

    <div class="navbar-end">
      <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="https://bulma.io" target="_blank" href="https://twitter.com/intent/tweet?text=Bulma: a modern CSS framework based on Flexbox&amp;hashtags=bulmaio&amp;url=https://bulma.io&amp;via=jgthms">
              <span class="icon">
                <i class="fab fa-twitter"></i>
              </span>
              <span>
                Tweet
              </span>
            </a>
          </p>
          <p class="control">
            <a class="button is-primary" href="https://github.com/jgthms/bulma/releases/download/0.7.1/bulma-0.7.1.zip">
              <span class="icon">
                <i class="fas fa-download"></i>
              </span>
              <span>Download</span>
            </a>
          </p>
        </div>
      </div>
    </div>
  </div>
</nav>

Fixed navbar #

New! 0.6.1

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

  • Add either is-fixed-top or is-fixed-bottom to the navbar component
    <nav class="navbar is-fixed-top">
  • Add the corresponding has-navbar-fixed-top or has-navbar-fixed-bottom modifier to either <html> or <body> element to provide the appropriate padding to the page
    <html class="has-navbar-fixed-top">

Try it out!


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.7.1
      </div>
    </div>
  </div>
</nav>

Show/hide the dropdown with either CSS or JavaScript

The navbar-dropdown is visible on touch devices < 1024px but hidden on desktop >= 1024px . How the dropdown is displayed on desktop depends on the parent's class.

The navbar-item with the has-dropdown modifier, has 2 additional modifiers

  • is-hoverable: the dropdown will show up when hovering the parent navbar-item
  • is-active: the dropdown will show up all the time

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.7.1
      </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.7.1
      </div>
    </div>
  </div>
</nav>

Right dropdown

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

Dropup

New! 0.6.1

If you're using a navbar at the bottom, like the fixed bottom navbar, you might want to use a dropup menu. Simply add the has-dropdown and has-dropdown-up modifiers to the parent navbar-item.

<div class="navbar-item has-dropdown has-dropdown-up is-hoverable">
  <a class="navbar-link" href="/documentation/overview/start/">
    Docs
  </a>
  <div class="navbar-dropdown">
    <a class="navbar-item" href="/documentation/overview/start/">
      Overview
    </a>
  </div>
</div>

Documentation

Everything you need to create a website with Bulma

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

<nav class="navbar" role="navigation" aria-label="dropdown navigation">
  <div class="navbar-menu">
    <div class="navbar-start">
      <div class="navbar-item has-dropdown has-dropdown-up is-active">
        <a class="navbar-link">
          Dropup
        </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.7.1
          </div>
        </div>
      </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" role="navigation" aria-label="dropdown navigation">
  <a class="navbar-item">
    <img src="https://versions.bulma.io/0.7.2/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.7.1
      </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="https://versions.bulma.io/0.7.2/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.7.1
      </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="https://versions.bulma.io/0.7.2/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.7.1
      </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-link
  • 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 Type Default value Computed value
Name Type Default value Computed value
$navbar-background-color color $white hsl(0, 0%, 100%)
$navbar-box-shadow-size size 0 2px 0 0
$navbar-box-shadow-color color $background hsl(0, 0%, 96%)
$navbar-height size 3.25rem
$navbar-padding-vertical size 1rem
$navbar-padding-horizontal size 2rem
$navbar-z string 30
$navbar-fixed-z string 30
$navbar-item-color color $grey-dark hsl(0, 0%, 29%)
$navbar-item-hover-color color $link hsl(217, 71%, 53%)
$navbar-item-hover-background-color color $white-bis hsl(0, 0%, 98%)
$navbar-item-active-color color $black hsl(0, 0%, 4%)
$navbar-item-active-background-color string transparent
$navbar-item-img-max-height size 1.75rem
$navbar-burger-color variable $navbar-item-color
$navbar-tab-hover-background-color string transparent
$navbar-tab-hover-border-bottom-color color $link hsl(217, 71%, 53%)
$navbar-tab-active-color color $link hsl(217, 71%, 53%)
$navbar-tab-active-background-color string transparent
$navbar-tab-active-border-bottom-color color $link hsl(217, 71%, 53%)
$navbar-tab-active-border-bottom-style string solid
$navbar-tab-active-border-bottom-width size 3px
$navbar-dropdown-background-color color $white hsl(0, 0%, 100%)
$navbar-dropdown-border-top size 2px solid $border
$navbar-dropdown-offset size -4px
$navbar-dropdown-arrow color $link hsl(217, 71%, 53%)
$navbar-dropdown-radius size $radius-large 6px
$navbar-dropdown-z string 20
$navbar-dropdown-boxed-radius size $radius-large 6px
$navbar-dropdown-boxed-shadow size 0 8px 8px rgba($black, 0.1), 0 0 0 1px rgba($black, 0.1)
$navbar-dropdown-item-hover-color color $black hsl(0, 0%, 4%)
$navbar-dropdown-item-hover-background-color color $background hsl(0, 0%, 96%)
$navbar-dropdown-item-active-color color $link hsl(217, 71%, 53%)
$navbar-dropdown-item-active-background-color color $background hsl(0, 0%, 96%)
$navbar-divider-background-color color $background hsl(0, 0%, 96%)
$navbar-divider-height size 2px
$navbar-bottom-box-shadow-size size 0 -2px 0 0

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

#native_company# #native_desc#
#native_cta#
New!

The official Bulma book! 😲

by Jeremy Thomas, creator of Bulma, Oleksii Potiekhin,
Mikko Lauhakari, Aslam Shah and David Berning

A step-by-step guide that teaches you how to build a web interface from scratch using Bulma.

Formats available:
PDF Epub Mobi
or
Kindle

Newsletter

Features, releases, showcase… stay in the loop!