Navbar

Navbar wrappers for brand area, menus, dropdowns, and link entries.

Bulma Pattern

This wrapper follows Bulma's Components markup. Compare class behavior with the official Bulma docs.

Supported tags

<navbar><navbar-brand><navbar-burger><navbar-menu><navbar-start><navbar-end><navbar-item><navbar-item-dropdown><navbar-link><navbar-dropdown><navbar-divider>

Example

<navbar light>
  <navbar-brand>
    <navbar-item href="/">Ralma</navbar-item>
    <navbar-burger active dataTarget="main-nav"></navbar-burger>
  </navbar-brand>
  <navbar-menu id="main-nav" active>
    <navbar-start>
      <navbar-item href="/docs">Docs</navbar-item>
      <navbar-item-dropdown hoverable>
        <navbar-link>More</navbar-link>
        <navbar-dropdown>
          <navbar-item href="/docs/components">Components</navbar-item>
          <navbar-divider></navbar-divider>
          <navbar-item href="/docs/api">API</navbar-item>
        </navbar-dropdown>
      </navbar-item-dropdown>
    </navbar-start>
  </navbar-menu>
</navbar>

Usage Notes

  • Covers full navbar hierarchy from brand to dropdown children.
  • `<navbar-item>` and `<navbar-link>` support safe href behavior.
  • `<navbar-burger>` defaults to `button` for accessibility.
Back to Components

Maintained by aldi

The source code is licensed under MIT.

Available on GitHub and npm.