A Stimulus Controller for the Bulma Navbar Component

Recently I migrated this blog away from Tailwind to Bulma CSS framework, which uses a more semantical approach to CSS classes.

Since this blog is a modern Symfony project, it uses Symfony Encore for providing frontend resources, and Symfony UX with the Hotwired / Stimulus Bridge.

So naturally, instead of the plain javascript in the Bulma documentation, required to make the burger menu of the Navbar component working, I wanted to implement it using a Stimulus controller.

This turned out to be simple. The controller is bulma_navbar_controller.js:

import { Controller } from '@hotwired/stimulus';

export default class extends Controller {
    static targets = ['items'];

    toggle(event) {
        event.currentTarget.classList.toggle('is-active');
        this.itemsTarget.classList.toggle('is-active');
    }
}

And the HTML for the navbar is modified to include data-controller="bulma-navbar“, data-action="click->bulma-navbar#toggle", and data-bulma-navbar-target="items":

<nav class="navbar is-dark block" role="navigation" aria-label="main navigation" data-controller="bulma-navbar">
    <div class="navbar-brand">
        <a class="navbar-item" href="...">
            Blog
        </a>

        <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-action="click->bulma-navbar#toggle">
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
            <span aria-hidden="true"></span>
        </a>
    </div>
    <div class="navbar-menu" data-bulma-navbar-target="items">
        
    </div>
</nav>

P.S. I could have used Bootstrap or any other similar CSS frameworks instead of Bulma as well, the main reason for the switch was going away from Tailwind, because i found it hard to come back to after a few months, and changing the existing styles. I picked Bulma at seemingly random from a list of „tailwind alternatives“ to learn something new.