The navbar combines branding (navbar-brand), navigation (navbar-menu with navbar-start / navbar-end), and a mobile burger (navbar-burger).
CSS-only styling, JS for toggling
Bulma styles the collapsed mobile menu, but opening and closing it requires JavaScript (or a creative HTML/CSS workaround). Official docs toggle the is-active class on both the burger and the navbar-menu target—typically a dozen lines listening for click events.
In this playground you can:
- Keep a static expanded navbar by adding
is-activeto the burger and menu (good for learning markup). - Try a checkbox hack: hidden checkbox +
label.navbar-burger+ a few lines of CSS so:checkedreveals the menu without a framework script.
Compare with Bootstrap navbars, where collapse ships in the JS bundle. Bulma leaves behavior to you—consistent with the CSS-only philosophy from How Bulma works.
Important interview questions and answers
- Q: Why does the burger need JavaScript?
A: Bulma provides presentation; togglingis-activeand updatingaria-expandedis interactive behavior the framework does not bundle. - Q: navbar vs menu component?
A:navbaris the top site chrome with burger + horizontal items;menuis a vertical list for sidebars and settings panels.
Self-check
- Which class must be toggled on both burger and menu for mobile open state?
- Name one playground-friendly approach when you cannot load JS in the editor.
Challenge
Mobile nav markup
- Include burger +
navbar-menustructure from the lesson. - Toggle
is-activeon burger and menu in markup to simulate open state.
Done when: both burger and menu show the open state when is-active is present.
Interview prep
- Why does Bulma not toggle the burger for you?
Bulma is CSS-only—you add a few lines of JS (or a checkbox hack) to toggle
is-activeon burger and menu.