Navbar

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

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.zcopy.site">
      <img src="https://bulma.zcopy.site/images/bulma-logo.png" width="112" height="28">
    </a>

    <a role="button" class="navbar-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.zcopy.site">
      <img src="https://bulma.zcopy.site/images/bulma-logo.png" alt="Bulma: 基于Flexbox的免费、开源、现代化的CSS框架 | Bulma中文网" 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 touch devices. 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://bulma.zcopy.site/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.

HTML

<nav class="navbar is-transparent">
  <div class="navbar-brand">
    <a class="navbar-item" href="https://bulma.zcopy.site">
      <img src="https://bulma.zcopy.site/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
    </a>
    <div class="navbar-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://bulma.zcopy.site/">
        Home
      </a>
      <div class="navbar-item has-dropdown is-hoverable">
        <a class="navbar-link" href="https://bulma.zcopy.site/documentation/overview/start/">
          Docs
        </a>
        <div class="navbar-dropdown is-boxed">
          <a class="navbar-item" href="https://bulma.zcopy.site/documentation/overview/start/">
            Overview
          </a>
          <a class="navbar-item" href="https://bulma.zcopy.site/documentation/overview/modifiers/">
            Modifiers
          </a>
          <a class="navbar-item" href="https://bulma.zcopy.site/documentation/columns/basics/">
            Columns
          </a>
          <a class="navbar-item" href="https://bulma.zcopy.site/documentation/layout/container/">
            Layout
          </a>
          <a class="navbar-item" href="https://bulma.zcopy.site/documentation/form/general/">
            Form
          </a>
          <hr class="navbar-divider">
          <a class="navbar-item" href="https://bulma.zcopy.site/documentation/elements/box/">
            Elements
          </a>
          <a class="navbar-item is-active" href="https://bulma.zcopy.site/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.9.4/bulma-0.9.4.zip">
              <span class="icon">
                <i class="fas fa-download"></i>
              </span>
              <span>Download</span>
            </a>
          </p>
        </div>
      </div>
    </div>
  </div>
</nav>

Fixed navbar #

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

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="https://bulma.zcopy.site/documentation/overview/start/">
    Docs
  </a>
  <div class="navbar-dropdown">
    <a class="navbar-item" href="https://bulma.zcopy.site/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.9.4
          </div>
        </div>
      </div>
    </div>
  </div>
</nav>

Dropdown without arrow

You can remove the arrow in the items of the navbar by adding the is-arrowless modifier to them.

<div class="navbar-item has-dropdown is-hoverable">
  <a class="navbar-link is-arrowless">
    Docs
  </a>
  <!-- navbar-dropdowns -->
</div>
<div class="navbar-item has-dropdown is-hoverable">
  <a class="navbar-link is-arrowless">
    Link without arrow
  </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.9.4
    </div>
  </div>
</div>

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://bulma.zcopy.site/images/bulma-logo.png"
      alt="Bulma: 基于Flexbox的免费、开源、现代化的CSS框架 | Bulma中文网"
      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.9.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" role="navigation" aria-label="dropdown navigation">
  <a class="navbar-item">
    <img src="https://bulma.zcopy.site/images/bulma-logo.png"
      alt="Bulma: 基于Flexbox的免费、开源、现代化的CSS框架 | Bulma中文网"
      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.9.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" role="navigation" aria-label="dropdown navigation">
  <a class="navbar-item">
    <img src="https://bulma.zcopy.site/images/bulma-logo.png"
      alt="Bulma: 基于Flexbox的免费、开源、现代化的CSS框架 | Bulma中文网"
      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.9.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">

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>
Type Name Description
Spacing is-spaced Sets Top and Bottom paddings with 1rem,
Left and Right paddings with 2rem
Shading has-shadow Adds a small amount of box-shadow around the navbar

Variables #

Name
Type
Value
Computed Value
Computed Type
$navbar-background-color
variable
$scheme-main
hsl(0, 0%, 100%)
color
$navbar-box-shadow-size
size
0 2px 0 0
$navbar-box-shadow-color
variable
$background
hsl(0, 0%, 96%)
color
$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
variable
$text
hsl(0, 0%, 29%)
color
$navbar-item-hover-color
variable
$link
hsl(229, 53%,  53%)
color
$navbar-item-hover-background-color
variable
$scheme-main-bis
hsl(0, 0%, 98%)
color
$navbar-item-active-color
variable
$scheme-invert
hsl(0, 0%, 4%)
color
$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
variable
$link
hsl(229, 53%,  53%)
color
$navbar-tab-active-color
variable
$link
hsl(229, 53%,  53%)
color
$navbar-tab-active-background-color
string
transparent
$navbar-tab-active-border-bottom-color
variable
$link
hsl(229, 53%,  53%)
color
$navbar-tab-active-border-bottom-style
string
solid
$navbar-tab-active-border-bottom-width
size
3px
$navbar-dropdown-background-color
variable
$scheme-main
hsl(0, 0%, 100%)
color
$navbar-dropdown-border-top
size
2px solid $border
$navbar-dropdown-offset
size
-4px
$navbar-dropdown-arrow
variable
$link
hsl(229, 53%,  53%)
color
$navbar-dropdown-radius
variable
$radius-large
6px
size
$navbar-dropdown-z
string
20
$navbar-dropdown-boxed-radius
variable
$radius-large
6px
size
$navbar-dropdown-boxed-shadow
shadow
0 8px 8px bulmaRgba($scheme-invert, 0.1), 0 0 0 1px bulmaRgba($scheme-invert, 0.1)
$navbar-dropdown-item-hover-color
variable
$scheme-invert
hsl(0, 0%, 4%)
color
$navbar-dropdown-item-hover-background-color
variable
$background
hsl(0, 0%, 96%)
color
$navbar-dropdown-item-active-color
variable
$link
hsl(229, 53%,  53%)
color
$navbar-dropdown-item-active-background-color
variable
$background
hsl(0, 0%, 96%)
color
$navbar-divider-background-color
variable
$background
hsl(0, 0%, 96%)
color
$navbar-divider-height
size
2px
$navbar-bottom-box-shadow-size
size
0 -2px 0 0
$navbar-breakpoint
variable
$desktop
960px + (2 * $gap)
computed
$navbar-colors
variable
$colors
Bulma colors
map