Skip to main content
The navbar component is a responsive horizontal navigation bar that can contain logos, links, buttons, and dropdown menus.

​
Basic Navbar

A simple navbar with brand and menu items: 
<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="#">
      <img src="logo.png" alt="Logo">
    </a>

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

  <div id="navbarBasic" class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item">Home</a>
      <a class="navbar-item">Documentation</a>
    </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>

​
Structure

The navbar consists of several components:
  • navbar - Main container
    • navbar-brand - Left side, always visible
      • navbar-burger - Hamburger menu for mobile
    • navbar-menu - Collapsible menu (mobile)
      • navbar-start - Left-aligned menu items
      • navbar-end - Right-aligned menu items
        • navbar-item - Individual menu items
        • navbar-link - Link with dropdown
        • navbar-dropdown - Dropdown container

​
Complete Example

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="#">
      <img src="logo.png" width="112" height="28" alt="Logo">
    </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>
      <span aria-hidden="true"></span>
    </a>
  </div>

  <div class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item">Home</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>

​
Navbar Brand

The brand section is always visible and contains your logo: 
<div class="navbar-brand">
  <a class="navbar-item" href="#">
    <img src="logo.png" alt="Site Logo">
  </a>
</div>

​
Navbar Burger

The hamburger menu for mobile navigation: 
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarMenu">
  <span aria-hidden="true"></span>
  <span aria-hidden="true"></span>
  <span aria-hidden="true"></span>
  <span aria-hidden="true"></span>
</a>
The burger requires JavaScript to toggle the is-active class on both the burger and the navbar-menu.

​
Navbar Dropdown

Add dropdown menus to navbar items: 
<div class="navbar-item has-dropdown is-hoverable">
  <a class="navbar-link">Products</a>
  <div class="navbar-dropdown">
    <a class="navbar-item">Product A</a>
    <a class="navbar-item">Product B</a>
    <a class="navbar-item">Product C</a>
  </div>
</div>

​
Dropdown Modifiers

<!-- Hoverable (shows on hover) -->
<div class="navbar-item has-dropdown is-hoverable">
  <!-- content -->
</div>

<!-- Dropup (shows above) -->
<div class="navbar-item has-dropdown has-dropdown-up">
  <!-- content -->
</div>

<!-- Right-aligned dropdown -->
<div class="navbar-item has-dropdown is-hoverable">
  <a class="navbar-link">Right Aligned</a>
  <div class="navbar-dropdown is-right">
    <a class="navbar-item">Item</a>
  </div>
</div>

<!-- Boxed dropdown -->
<div class="navbar-item has-dropdown is-hoverable">
  <a class="navbar-link">Boxed</a>
  <div class="navbar-dropdown is-boxed">
    <a class="navbar-item">Item</a>
  </div>
</div>

​
Active Items

Highlight the current page: 
<div class="navbar-start">
  <a class="navbar-item is-active">Home</a>
  <a class="navbar-item">About</a>
  <a class="navbar-item">Contact</a>
</div>

​
Navbar Tabs

Create a tab-style navbar: 
<div class="navbar-start">
  <a class="navbar-item is-tab is-active">Home</a>
  <a class="navbar-item is-tab">Features</a>
  <a class="navbar-item is-tab">Pricing</a>
  <a class="navbar-item is-tab">About</a>
</div>

​
Colors

Navbars support all color variants: 
<!-- Primary -->
<nav class="navbar is-primary">
  <!-- navbar content -->
</nav>

<!-- Link -->
<nav class="navbar is-link">
  <!-- navbar content -->
</nav>

<!-- Info -->
<nav class="navbar is-info">
  <!-- navbar content -->
</nav>

<!-- Success -->
<nav class="navbar is-success">
  <!-- navbar content -->
</nav>

<!-- Warning -->
<nav class="navbar is-warning">
  <!-- navbar content -->
</nav>

<!-- Danger -->
<nav class="navbar is-danger">
  <!-- navbar content -->
</nav>

<!-- Dark -->
<nav class="navbar is-dark">
  <!-- navbar content -->
</nav>

​
Fixed Navbar

Fix the navbar to the top or bottom:

​
Fixed Top

<nav class="navbar is-fixed-top">
  <!-- navbar content -->
</nav>
Add to <html> or <body>: 
<html class="has-navbar-fixed-top">

​
Fixed Bottom

<nav class="navbar is-fixed-bottom">
  <!-- navbar content -->
</nav>
Add to <html> or <body>: 
<html class="has-navbar-fixed-bottom">

​
Transparent Navbar

Create a transparent navbar: 
<nav class="navbar is-transparent">
  <!-- navbar content -->
</nav>

​
Spaced Navbar

Add extra padding: 
<nav class="navbar is-spaced">
  <!-- navbar content -->
</nav>

​
With Shadow

Add a bottom shadow: 
<nav class="navbar has-shadow">
  <!-- navbar content -->
</nav>

​
JavaScript Example

Toggle mobile menu: 
document.addEventListener('DOMContentLoaded', () => {
  // Get all navbar burgers
  const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);

  // Add a click event on each of them
  $navbarBurgers.forEach( el => {
    el.addEventListener('click', () => {
      // Get the target from the "data-target" attribute
      const target = el.dataset.target;
      const $target = document.getElementById(target);

      // Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
      el.classList.toggle('is-active');
      $target.classList.toggle('is-active');
    });
  });
});

​
Responsive Behavior

The navbar is responsive by default:
  • Mobile (< 1024px): Menu is hidden, burger is visible
  • Desktop (≥ 1024px): Full horizontal menu is displayed

​
Modifiers

ClassDescription
is-primary, is-link, etc.Color variants
is-fixed-topFixes navbar to top
is-fixed-bottomFixes navbar to bottom
is-transparentTransparent background
is-spacedExtra padding
has-shadowBottom shadow
navbar-item is-activeActive/current item
navbar-item is-tabTab-style item
has-dropdownEnables dropdown on item
is-hoverableShows dropdown on hover
has-dropdown-upDropdown appears above
navbar-dropdown is-boxedBoxed dropdown style
navbar-dropdown is-rightRight-aligned dropdown

​
CSS Variables

VariableDefaultDescription
--bulma-navbar-height3.25remHeight of navbar
--bulma-navbar-padding-vertical1remVertical padding
--bulma-navbar-padding-horizontal2remHorizontal padding
--bulma-navbar-z30Z-index
--bulma-navbar-item-img-max-height1.75remMax height for images

​
Accessibility

  • Use <nav> element with role="navigation"
  • Add aria-label="main navigation" to describe purpose
  • Include aria-label="menu" on burger button
  • Toggle aria-expanded on burger when menu opens/closes
  • Use semantic HTML for dropdown structure
The navbar requires JavaScript for mobile menu toggling. The component only provides styling - you must implement the burger menu functionality.

Build docs developers (and LLMs) love

Get started for freeTalk to us