Bulma Navbar

Bulma's Navbar is a responsive navigation component that supports dropdowns, logos, and call-to-action buttons. It automatically collapses into a hamburger menu on mobile devices.

Basic Navbar

The simplest navbar with brand and menu:

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="/">
      <strong>My Website</strong>
    </a>
  </div>
</nav>

Complete Navbar with Menu

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="/">
      <img src="logo.png" alt="Logo" width="112" height="28">
    </a>
    
    <!-- Hamburger menu for mobile -->
    <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>

  <div class="navbar-menu">
    <!-- Left side -->
    <div class="navbar-start">
      <a class="navbar-item">Home</a>
      <a class="navbar-item">Documentation</a>
      
      <!-- Dropdown -->
      <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>

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

Navbar Colors

Apply different color schemes:

<!-- Primary color -->
<nav class="navbar is-primary">

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

<!-- Custom colors -->
<nav class="navbar is-info">
<nav class="navbar is-success">
<nav class="navbar is-warning">
<nav class="navbar is-danger">

<!-- Transparent navbar (for hero sections) -->
<nav class="navbar is-transparent">

Fixed Navbar

Create fixed navigation bars:

<!-- Fixed to top -->
<nav class="navbar is-fixed-top">

<!-- Fixed to bottom -->
<nav class="navbar is-fixed-bottom">

<!-- With spacing adjustment (to avoid content being hidden) -->
<body>
  <nav class="navbar is-fixed-top">
  <!-- Content -->
  <div class="section" style="margin-top: 3.25rem;">
    <!-- Page content -->
  </div>
</body>

Navbar Items with Icons

<div class="navbar-item">
  <span class="icon">
    <i class="fas fa-home"></i>
  </span>
  <span>Home</span>
</div>

<div class="navbar-item">
  <span class="icon-text">
    <span class="icon">
      <i class="fas fa-bell"></i>
    </span>
    <span>Notifications</span>
    <span class="tag is-danger is-rounded">3</span>
  </span>
</div>

Responsive Behavior

Bulma navbar automatically handles responsiveness:

<!-- Always hide dropdown arrow on mobile -->
<div class="navbar-item has-dropdown is-hoverable">
  <a class="navbar-link is-arrowless">
    Menu
  </a>
</div>

<!-- Show/hide items based on screen size -->
<div class="navbar-item is-hidden-touch">
  Visible on desktop only
</div>

<div class="navbar-item is-hidden-desktop">
  Visible on mobile only
</div>

Navbar with Search

<div class="navbar-item">
  <div class="field has-addons">
    <div class="control">
      <input class="input" type="text" placeholder="Search...">
    </div>
    <div class="control">
      <button class="button is-primary">
        <span class="icon">
          <i class="fas fa-search"></i>
        </span>
      </button>
    </div>
  </div>
</div>

JavaScript Integration

For hamburger menu functionality:

// Add this JavaScript to toggle the mobile menu
document.addEventListener('DOMContentLoaded', () => {
  const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
  
  if ($navbarBurgers.length > 0) {
    $navbarBurgers.forEach( el => {
      el.addEventListener('click', () => {
        const target = el.dataset.target;
        const $target = document.getElementById(target);
        
        el.classList.toggle('is-active');
        $target.classList.toggle('is-active');
      });
    });
  }
});

Complete Examples

E-commerce Navbar

<nav class="navbar is-dark" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="/">
      <strong>ShopFast</strong>
    </a>
  </div>

  <div class="navbar-menu">
    <div class="navbar-start">
      <a class="navbar-item">Categories</a>
      <a class="navbar-item">Deals</a>
      <a class="navbar-item">New Arrivals</a>
    </div>

    <div class="navbar-end">
      <div class="navbar-item">
        <div class="field has-addons">
          <div class="control">
            <input class="input" type="text" placeholder="Search products">
          </div>
          <div class="control">
            <button class="button is-primary">
              <i class="fas fa-search"></i>
            </button>
          </div>
        </div>
      </div>
      
      <a class="navbar-item">
        <span class="icon">
          <i class="fas fa-shopping-cart"></i>
        </span>
        <span class="tag is-danger is-rounded">5</span>
      </a>
      
      <a class="navbar-item">Account</a>
    </div>
  </div>
</nav>

Documentation Site Navbar

<nav class="navbar is-light" role="navigation" aria-label="main navigation">
  <div class="container">
    <div class="navbar-brand">
      <a class="navbar-item" href="/">
        <strong>Docs</strong>
      </a>
    </div>

    <div class="navbar-menu">
      <div class="navbar-start">
        <div class="navbar-item has-dropdown is-hoverable">
          <a class="navbar-link">Getting Started</a>
          <div class="navbar-dropdown">
            <a class="navbar-item">Installation</a>
            <a class="navbar-item">Quick Start</a>
            <a class="navbar-item">Tutorial</a>
          </div>
        </div>
        
        <div class="navbar-item has-dropdown is-hoverable">
          <a class="navbar-link">Components</a>
          <div class="navbar-dropdown">
            <a class="navbar-item">Buttons</a>
            <a class="navbar-item">Forms</a>
            <a class="navbar-item">Cards</a>
            <a class="navbar-item">Modals</a>
          </div>
        </div>
        
        <a class="navbar-item">API Reference</a>
        <a class="navbar-item">Examples</a>
      </div>

      <div class="navbar-end">
        <div class="navbar-item">
          <div class="buttons">
            <a class="button is-primary">Download</a>
            <a class="button is-light">GitHub</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</nav>

Best Practices

Always include role=&qout;navigation&qout; and aria-label for accessibility
Use .container inside navbar to limit width on large screens
Implement proper JavaScript for hamburger menu toggle
Test navbar on all screen sizes
Keep menu items clear and concise
Use dropdowns for organizing related links

Tip: Use is-spaced class for navbar with more padding, and is-transparent for hero section overlays.

Next: Bulma Notification Component

Frontend

JavaScript & Frameworks

Backend

Artificial Intelligence

Database

CSS Frameworks

Data Analytics

Digital Marketing