Building a Responsive Bulma Navbar with a Dropdown Menu

Desired outcome

Create a navigation bar that:

• Displays the full menu on viewports ≥1024 px.
• Shows a hamburger icon on narrower screens.
• Toggles the mobile menu when the hamburger is clicked.
• Provides a dropdown submenu that appears on hover/focus without extra CSS.

Prerequisites

• Bulma CSS version 0.9.0 or newer (the classes is-active, has-dropdown and related dropdown styling are present).
• Ability to edit HTML and add a <script> block or external JS file.
• Basic familiarity with CSS class naming and DOM manipulation.

Focused procedure

1. Add Bulma CSS

Include Bulma from a CDN or your build pipeline. Place the link in the <head> of your page:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">

2. Write the navbar markup

Copy the following HTML into the <body> where you want the navbar to appear. Adjust the href values and labels as needed.

<nav class="navbar" role="navigation" aria-label="main navigation">
  <div class="navbar-brand">
    <a class="navbar-item" href="https://example.com">
      <strong>MySite</strong>
    </a>
    <!-- Hamburger for mobile -->
    <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
      <span aria-hidden="true">
      <span aria-hidden="true">
      <span aria-hidden="true">
    </a>
  </div>

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

      <!-- Dropdown -->
      <div class="navbar-item has-dropdown">
        <a class="navbar-link" href="/more">More</a>
        <div class="navbar-dropdown">
          <a class="navbar-dropdown-item" href="/more/item1">Item 1</a>
          <a class="navbar-dropdown-item" href="/more/item2">Item 2</a>
          <a class="navbar-dropdown-item" href="/more/item3">Item 3</a>
        </div>
      </div>
    </div>

    <div class="navbar-end">
      <a class="navbar-item" href="/contact">Contact</a>
    </div>
  </div>
</nav>

3. Add the minimal JavaScript for the hamburger toggle

Place this script just before the closing </body> tag (or in an external file). It toggles the is-active class on both the burger and the menu.

document.addEventListener('DOMContentLoaded', () => {
  // Get all "navbar-burger" elements
  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');
      });
    });
  }
});

4. Verify the implementation

1. Open the page in a desktop browser (≥1024 px width). Confirm the full menu is visible and the hamburger icon is hidden.
2. Resize the viewport to less than 1024 px. The hamburger icon should appear in place of the menu.
3. Click the hamburger icon. The icon and the navbar-menu should both receive the is-active class (visible via browser devtools). The menu should slide down.
4. Hover (or focus via keyboard) over the “More” link. The dropdown (navbar-dropdown) should appear, showing its items.
5. Click the hamburger again; the is-active classes should be removed and the menu should collapse.

Expected checks and relevant recovery options

Checks

• Class presence: After toggling, both .navbar-burger and .navbar-menu must have is-active. Absence indicates a selector or data‑target mismatch.
• Dropdown visibility: The .navbar-dropdown should have display: block (or the Bulma‑provided visibility) when its parent .navbar-item.has-dropdown is hovered/focused.
• Responsive breakpoint: Bulma’s navbar collapses at the $navbar-breakpoint (default 1024 px). Verify by checking the computed width at which the hamburger appears.

Recovery options

• If the menu does not open, confirm that the data-target attribute on the burger matches the id of the navbar-menu element.
• If the dropdown does not appear, ensure the parent .navbar-item has the class has-dropdown and that the sibling .navbar-dropdown exists directly after the .navbar-link.
• If styles look off, verify that you are loading a Bulma version ≥0.9.0; older versions may use different class names (e.g., is-active was introduced in 0.9.0).

Limitations

Bulma’s navbar relies on CSS for layout and hover/focus dropdowns; the only JavaScript required is for the hamburger toggle. This means:

• On devices where JavaScript is disabled, the mobile menu cannot be opened (the hamburger will be visible but non‑functional). Consider providing a fallback link or a server‑side rendered menu for critical navigation.
• The dropdown appears on hover/focus only; if you need a click‑to‑open dropdown on touch devices, you would need to add extra JavaScript or adjust the HTML (e.g., using aria-haspopup and handling click events). Bulma’s provided CSS does not cover that scenario.