Navbar

Overview

The Navbar component implements Bulma's powerful, responsive navigation bar for your Bulma React UI.

It supports color, transparency, fixed positioning, dropdowns, and granular composition with subcomponents for brand, menu, items, burger (mobile toggle), start/end, and rich dropdowns. Use it for main navigation, site branding, and complex menu layouts.

info

Compose your navigation using Navbar, Navbar.Brand, Navbar.Burger, Navbar.Menu, Navbar.Start, Navbar.End, Navbar.Item, Navbar.Dropdown, and more for full Bulma flexibility.

Import

import { Navbar } from '@allxsmith/bestax-bulma';

Usage

This example demonstrates a fully responsive navigation bar using Navbar and its subcomponents. The Navbar.Burger toggles the mobile menu, while Navbar.Brand displays branding or a logo. Use the active prop on Navbar.Burger and Navbar.Menu to control the open state. Compose navigation links and dropdowns within Navbar.Start and Navbar.End for flexible layouts. Customize with color, bgColor, fixed, and transparent props as needed.

function example() {
  const [active, setActive] = useState(false);

  return (
    <Navbar>
      <Navbar.Brand>
        <Navbar.Item href="#">
          <img src="/img/logo.svg" alt="Logo" width="28" height="28" />
        </Navbar.Item>
        <Navbar.Burger
          active={active}
          onClick={() => setActive(a => !a)}
          aria-label="menu"
          aria-expanded={active}
        />
      </Navbar.Brand>
      <Navbar.Menu active={active}>
        <Navbar.Start>
          <Navbar.Item href="#">Home</Navbar.Item>
          <Navbar.Item href="#">Docs</Navbar.Item>
          <Navbar.Item href="#">About</Navbar.Item>
          <Navbar.Item href="#">Contact</Navbar.Item>
        </Navbar.Start>
        <Navbar.End>
          <Navbar.Item href="#">Login</Navbar.Item>
        </Navbar.End>
      </Navbar.Menu>
    </Navbar>
  );
}

Brand Only

This example shows a simple navbar with just the brand logo. The Navbar.Brand component is used to contain the logo image, which links to the homepage or main section of the site.

<Navbar>
  <Navbar.Brand>
    <Navbar.Item href="#">
      <img src="/img/logo.svg" alt="Logo" width="28" height="28" />
    </Navbar.Item>
  </Navbar.Brand>
</Navbar>

Burger Only

Demonstrates the Navbar.Burger component, which is the mobile menu toggle. It doesn't have an associated menu in this snippet, but in practice, it would control the visibility of the Navbar.Menu.

note

The burger is only shown on touch/mobile viewports by default. The example below forces display: flex so you can see it on desktop.

<Navbar>
  <Navbar.Burger
    aria-label="menu"
    aria-expanded={false}
    style={{ display: 'flex' }}
  />
</Navbar>

Burger Active

Shows the Navbar.Burger in its active state, indicating that the menu it controls is open. The active prop is used to toggle this state.

<Navbar>
  <Navbar.Burger
    active
    aria-label="menu"
    aria-expanded
    style={{ display: 'flex' }}
  />
</Navbar>

This example illustrates a Navbar.Menu with Navbar.Start and Navbar.End sections. The start section could contain primary navigation links, while the end section might hold user account links like login or profile.

<Navbar>
  <Navbar.Menu active>
    <Navbar.Start>
      <Navbar.Item href="#">Home</Navbar.Item>
    </Navbar.Start>
    <Navbar.End>
      <Navbar.Item href="#">Login</Navbar.Item>
    </Navbar.End>
  </Navbar.Menu>
</Navbar>

A more complex example with navigation links and a dropdown menu. The dropdown is used for additional links or actions related to the main navigation items.

<Navbar>
  <Navbar.Brand>
    <Navbar.Item>
      <img src="/img/logo.svg" alt="Logo" width="28" height="28" />
    </Navbar.Item>
  </Navbar.Brand>
  <Navbar.Menu active>
    <Navbar.Start>
      <Navbar.Item href="#">Home</Navbar.Item>
      <Navbar.Item href="#">Docs</Navbar.Item>
      <Navbar.Dropdown hoverable>
        <Navbar.Link>More</Navbar.Link>
        <Navbar.DropdownMenu>
          <Navbar.Item href="#">About</Navbar.Item>
          <Navbar.Item href="#">Jobs</Navbar.Item>
          <Navbar.Item href="#">Contact</Navbar.Item>
          <Navbar.Divider />
          <Navbar.Item href="#">Report an issue</Navbar.Item>
        </Navbar.DropdownMenu>
      </Navbar.Dropdown>
    </Navbar.Start>
  </Navbar.Menu>
</Navbar>

Custom Link Component

Use the as prop on Navbar.Item to render a custom link component, such as a router link. Its props follow as, so props like to are forwarded to the link component and are checked against that component's own types, no cast needed. See the Routing guide for the full patterns.

// import { Link } from 'react-router-dom';
function example() {
  const Link = props => <a>{props.children}</a>;
  return (
    <Navbar>
      <Navbar.Menu active>
        <Navbar.Start>
          <Navbar.Item as={Link} to="/">
            Home
          </Navbar.Item>
          <Navbar.Item as={Link} to="/pricing">
            Pricing
          </Navbar.Item>
        </Navbar.Start>
      </Navbar.Menu>
    </Navbar>
  );
}

Example of a navbar with a transparent background. This is often used for navbars that overlay content, like images or videos, giving a more integrated look.

<Navbar transparent>{/* ...brand and menu... */}</Navbar>

Shows the navbar fixed to the top of the viewport. This is useful for keeping the navigation accessible at all times as the user scrolls.

<Navbar fixed="top">{/* ...brand and menu... */}</Navbar>

Demonstrates a dropdown menu aligned to the right. This can be useful for user account menus, notifications, or other contextual actions.

<Navbar>
  <Navbar.Menu active>
    <Navbar.End>
      <Navbar.Dropdown hoverable right>
        <Navbar.Link>Right Dropdown</Navbar.Link>
        <Navbar.DropdownMenu right>
          <Navbar.Item href="#">Profile</Navbar.Item>
          <Navbar.Item href="#">Settings</Navbar.Item>
        </Navbar.DropdownMenu>
      </Navbar.Dropdown>
    </Navbar.End>
  </Navbar.Menu>
</Navbar>

Dropup

This example shows a dropdown menu that opens upwards, which can be useful in certain layout situations to prevent covering content. A Hero is placed above the navbar to give the dropup room to expand.

<>
  <Hero color="primary" size="small">
    <Hero.Body>
      <Title>Hero above Navbar</Title>
      <SubTitle>Hover "Dropup" below to see the menu open upward</SubTitle>
    </Hero.Body>
  </Hero>
  <Navbar>
    <Navbar.Menu active>
      <Navbar.Start>
        <Navbar.Dropdown hoverable up>
          <Navbar.Link>Dropup</Navbar.Link>
          <Navbar.DropdownMenu up>
            <Navbar.Item href="#">Up1</Navbar.Item>
            <Navbar.Item href="#">Up2</Navbar.Item>
          </Navbar.DropdownMenu>
        </Navbar.Dropdown>
      </Navbar.Start>
    </Navbar.Menu>
  </Navbar>
</>

Demonstrates a dropdown menu styled without the default arrow indicator. Set arrowless on Navbar.Link to remove the arrow indicator.

<Navbar>
  <Navbar.Menu active>
    <Navbar.Start>
      <Navbar.Dropdown hoverable>
        <Navbar.Link arrowless>No Arrow</Navbar.Link>
        <Navbar.DropdownMenu>
          <Navbar.Item href="#">A</Navbar.Item>
          <Navbar.Item href="#">B</Navbar.Item>
        </Navbar.DropdownMenu>
      </Navbar.Dropdown>
    </Navbar.Start>
  </Navbar.Menu>
</Navbar>

Shows a dropdown menu with an active item. The active state is typically used to indicate the currently selected or active page/section.

<Navbar>
  <Navbar.Menu active>
    <Navbar.Start>
      <Navbar.Dropdown active>
        <Navbar.Link>Active Dropdown</Navbar.Link>
        <Navbar.DropdownMenu>
          <Navbar.Item href="#">A1</Navbar.Item>
          <Navbar.Item href="#">A2</Navbar.Item>
        </Navbar.DropdownMenu>
      </Navbar.Dropdown>
    </Navbar.Start>
  </Navbar.Menu>
</Navbar>

This example shows a dropdown menu that includes a divider, which is used to separate groups of items within the menu for better organization and readability.

<Navbar>
  <Navbar.Menu active>
    <Navbar.Start>
      <Navbar.Dropdown hoverable>
        <Navbar.Link>With Divider</Navbar.Link>
        <Navbar.DropdownMenu>
          <Navbar.Item href="#">One</Navbar.Item>
          <Navbar.Item href="#">Two</Navbar.Item>
          <Navbar.Divider />
          <Navbar.Item href="#">Three</Navbar.Item>
        </Navbar.DropdownMenu>
      </Navbar.Dropdown>
    </Navbar.Start>
  </Navbar.Menu>
</Navbar>

Color Modifiers

Demonstrates the use of different color modifiers for the navbar. Each Navbar component has a different color prop to showcase the available options.

function example() {
  const colors = [
    'primary',
    'link',
    'info',
    'success',
    'warning',
    'danger',
    'black',
    'dark',
    'light',
    'white',
  ];
  return (
    <>
      {colors.map(color => (
        <Navbar key={color} color={color} mb="2">
          <Navbar.Brand>
            <Navbar.Item href="#">
              <img src="/img/logo.svg" alt="Logo" width="28" height="28" />
            </Navbar.Item>
          </Navbar.Brand>
          <Navbar.Menu active>
            <Navbar.Start>
              <Navbar.Item href="#">Home</Navbar.Item>
              <Navbar.Item href="#">Docs</Navbar.Item>
              <Navbar.Item href="#">Components</Navbar.Item>
            </Navbar.Start>
          </Navbar.Menu>
        </Navbar>
      ))}
    </>
  );
}

Forwarded ref

Navbar forwards a ref to the root <nav>, and Navbar.Burger, Navbar.Item, Navbar.Link and Navbar.Dropdown forward to their own elements — the burger <button>, the element as renders for both Navbar.Item and Navbar.Link, and the dropdown container.

function example() {
  const navRef = React.useRef(null);
  const [height, setHeight] = React.useState(null);

  return (
    <>
      <Navbar ref={navRef}>
        <Navbar.Brand>
          <Navbar.Item href="#">Home</Navbar.Item>
        </Navbar.Brand>
      </Navbar>
      <Button mt="3" onClick={() => setHeight(navRef.current?.offsetHeight)}>
        Measure the navbar
      </Button>
      <p>Height: {height == null ? '—' : `${height}px`}</p>
    </>
  );
}

Navbar.Burger is hidden above the desktop breakpoint by Bulma, so read its node through the ref rather than trying to focus it when the viewport is wide.

Compound (dot-notation) usage

NavbarBrand, NavbarMenu, NavbarItem, and the other subcomponents are also available as Navbar.Brand, Navbar.Menu, Navbar.Item, and so on, so a complete navbar can be composed from the single Navbar import.

<Navbar>
  <Navbar.Brand>
    <Navbar.Item href="#">
      <img src="/img/logo.svg" alt="Logo" width="28" height="28" />
    </Navbar.Item>
    <Navbar.Burger aria-label="menu" />
  </Navbar.Brand>
  <Navbar.Menu active>
    <Navbar.Start>
      <Navbar.Item href="#">Home</Navbar.Item>
      <Navbar.Item href="#">Docs</Navbar.Item>
    </Navbar.Start>
    <Navbar.End>
      <Navbar.Item href="#">Log in</Navbar.Item>
    </Navbar.End>
  </Navbar.Menu>
</Navbar>

Accessibility

The root Navbar renders as <nav role="navigation" aria-label="main navigation">.
Use semantic links (<a>) and buttons, and provide clear aria-label and aria-expanded for the burger toggle.
Navbar.Link inside a Navbar.Dropdown automatically gets aria-haspopup="true" and aria-expanded synced to the dropdown's open state — no manual wiring required. Enter/Space toggle the dropdown open/closed, and Escape closes it and keeps focus on the link. When the trigger isn't interactive on its own — no href, not as="button", and not a custom component — it also gets role="button" and tabIndex={0} so it's reachable and operable by keyboard, and a mouse/touch click on it toggles the dropdown too (a caller-supplied onClick still runs, and can preventDefault() to opt out).
A custom component passed to as keeps its own semantics, because a router link takes to rather than href and so can't be recognised from the props it's given. If yours renders something non-interactive instead, pass role="button" and it takes the fallback above — tabIndex and click included. The keyboard path is wired either way.
hoverable dropdowns keep working with a mouse (hover-to-open); the keyboard path above opens and closes them independently of hover.

note

There's no arrow-key roving between navbar items and no outside-click handling for Navbar.Dropdown — Bulma navbar dropdowns are hover/click surfaces, so this is intentionally kept simple.

Button: For actions in Navbar.
Icon: For icons inside Navbar items.
Helper Props: All Bulma utility helpers can be used.

Additional Resources

Pro Tip

You can use all Bulma helper props with <Navbar /> and its subcomponents for powerful utility-based styling.

Props

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes for the navbar.
`textColor`	Bulma color \| `'inherit'` \| `'current'`	—	Text color for the navbar.
`color`	`'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'` \| `'black'` \| `'dark'` \| `'light'` \| `'white'`	—	Bulma color modifier for the navbar.
`bgColor`	Bulma color \| `'inherit'` \| `'current'`	—	Background color for the navbar.
`transparent`	`boolean`	`false`	Renders the navbar with a transparent background.
`fixed`	`'top'` \| `'bottom'`	—	Fixes the navbar to the top or bottom of the viewport.
`children`	`React.ReactNode`	—	Navbar content (compose with subcomponents).
`ref`	`React.Ref<HTMLElement>`	—	Ref forwarded to the root `<nav>` element.
`...`	All standard HTML attributes and Bulma helper props	—	See Helper Props

Subcomponents:

Navbar.Brand: For logo and branding (left side)
Navbar.Item: Navigation links, buttons, or custom content
Navbar.Link: Dropdown trigger with arrow indicator (use as first child of Navbar.Dropdown)
Navbar.Burger: Responsive menu toggle (mobile)
Navbar.Menu: Collapsible content (contains Navbar.Start and Navbar.End)
Navbar.Start: Left-aligned menu area
Navbar.End: Right-aligned menu area
Navbar.Dropdown: Dropdown parent (with options for hover, up, right, active)
Navbar.DropdownMenu: Dropdown menu container
Navbar.Divider: Divider in dropdown menus.

Navbar.Brand

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes.
`textColor`	Bulma color \| `'inherit'` \| `'current'`	—	Text color for the brand.
`color`	`'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'`	—	Renders `has-text-<color>`, exactly like `textColor`. Bulma has no `.navbar-brand.is-<color>` rule, so this is not a filled variant. `textColor` takes precedence when both are set, and is the one that reaches the full color list.
`children`	`React.ReactNode`	—	Brand content.
`...`	All standard `<div>` attributes and Bulma helper props	—	See Helper Props

Navbar.Item

Prop	Type	Default	Description
`as`	`React.ElementType`	`'a'`	Render as another intrinsic element (`'span'`, `'div'`, `'button'`) or a custom component (e.g. a router link). Defaults to `'a'`. `'button'` renders `type="button"`, so an item inside a form does not submit it. Pass `type="submit"` or `type="reset"` and yours is used; any other value, or a spread carrying `type: undefined`, renders `type="button"`.
`className`	`string`	—	Additional CSS classes.
`active`	`boolean`	`false`	Whether the item is active.
`textColor`	Bulma color \| `'inherit'` \| `'current'`	—	Text color for the item.
`bgColor`	Bulma color \| `'inherit'` \| `'current'`	—	Background color for the item.
`children`	`React.ReactNode`	—	Navbar item content.
`ref`	`PolymorphicRef<React.ElementType>`	—	Ref forwarded to the element `as` renders, typed from `as`: the DOM node for an intrinsic tag, or whatever handle a custom component exposes.
`...`	Remaining props of the element or component selected by `as` (default `<a>`) and Bulma helper props	—	See Helper Props

Navbar.Link

Prop	Type	Default	Description
`as`	`React.ElementType`	`'a'`	Render as another intrinsic element (`'button'`, `'span'`) or a custom component. Defaults to `'a'`. Inside a `Navbar.Dropdown` this also decides the trigger's semantics. A custom component is taken to be interactive already — a router link, typically — so it keeps its own role and click behaviour. An intrinsic tag is judged on what it is: `'button'`, or anything carrying an `href`, is left alone, and everything else (`'span'`, a bare `'a'`, a custom element) gets `role="button"`, `tabIndex` and a click that opens the dropdown. If your custom component renders something non-interactive, pass `role="button"` and it takes that fallback too — `tabIndex` and click included. The keyboard path is attached either way. `'button'` renders `type="button"`, so a link inside a form does not submit it. Pass `type="submit"` or `type="reset"` and yours is used; any other value, or a spread carrying `type: undefined`, renders `type="button"`.
`className`	`string`	—	Additional CSS classes.
`arrowless`	`boolean`	`false`	Remove the dropdown arrow indicator.
`textColor`	Bulma color \| `'inherit'` \| `'current'`	—	Text color.
`bgColor`	Bulma color \| `'inherit'` \| `'current'`	—	Background color.
`children`	`React.ReactNode`	—	Link content.
`ref`	`PolymorphicRef<React.ElementType>`	—	Ref forwarded to the element `as` renders, typed from `as`: the DOM node for an intrinsic tag, or whatever handle a custom component exposes.
`...`	Remaining props of the element or component selected by `as` (default `<a>`) and Bulma helper props	—	See Helper Props

Navbar.Burger

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes.
`textColor`	Bulma color \| `'inherit'` \| `'current'`	—	Text color for the burger.
`color`	`'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'`	—	Renders `has-text-<color>`, exactly like `textColor`. Bulma has no `.navbar-burger.is-<color>` rule, so this is not a filled variant. `textColor` takes precedence when both are set, and is the one that reaches the full color list.
`active`	`boolean`	`false`	Whether the burger is active.
`children`	`React.ReactNode`	—	Custom content inside the burger, rendered after its four bar spans. Bulma styles every `<span>` in the burger as a bar, so an extra span here draws an extra bar.
`aria-label`	`string`	`'menu'`	Accessible name. Pass your own to replace it. An empty one, or a spread carrying `'aria-label': undefined`, keeps the default rather than leaving the button unnamed.
`aria-expanded`	`boolean`	`active`	Expanded state for assistive technology. It follows `active` unless you pass `true` or `false`; a spread carrying `'aria-expanded': undefined` still follows `active`.
`onClick`	`React.MouseEventHandler<HTMLButtonElement>`	—	Click handler.
`ref`	`React.Ref<HTMLButtonElement>`	—	Ref forwarded to the burger button element.
`type`	`'button'` \| `'submit'` \| `'reset'`	`'button'`	Button type. Defaults to `'button'`, so a burger inside a form does not submit it. Pass `'submit'` or `'reset'` and yours is used; any other value, or a spread carrying `type: undefined`, renders `'button'`.
`...`	All standard `<button>` attributes and Bulma helper props	—	See Helper Props

Navbar.Menu

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes.
`textColor`	Bulma color \| `'inherit'` \| `'current'`	—	Text color for the menu.
`color`	`'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'`	—	Renders `has-text-<color>`, exactly like `textColor`. Bulma has no `.navbar-menu.is-<color>` rule, so this is not a filled variant. `textColor` takes precedence when both are set, and is the one that reaches the full color list.
`active`	`boolean`	`false`	Whether the menu is active.
`children`	`React.ReactNode`	—	Menu content.
`...`	All standard `<div>` attributes and Bulma helper props	—	See Helper Props

Navbar.Start

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes.
`textColor`	Bulma color \| `'inherit'` \| `'current'`	—	Text color.
`color`	`'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'`	—	Renders `has-text-<color>`, exactly like `textColor`. Bulma has no `is-<color>` rule for this area, so this is not a filled variant. `textColor` takes precedence when both are set, and is the one that reaches the full color list.
`children`	`React.ReactNode`	—	Content.
`...`	All standard `<div>` attributes and Bulma helper props	—	See Helper Props

Navbar.End

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes.
`textColor`	Bulma color \| `'inherit'` \| `'current'`	—	Text color.
`color`	`'primary'` \| `'link'` \| `'info'` \| `'success'` \| `'warning'` \| `'danger'`	—	Renders `has-text-<color>`, exactly like `textColor`. Bulma has no `is-<color>` rule for this area, so this is not a filled variant. `textColor` takes precedence when both are set, and is the one that reaches the full color list.
`children`	`React.ReactNode`	—	Content.
`...`	All standard `<div>` attributes and Bulma helper props	—	See Helper Props

Navbar.Dropdown

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes.
`right`	`boolean`	`false`	Dropdown aligned right.
`up`	`boolean`	`false`	Dropdown opens upwards.
`hoverable`	`boolean`	`false`	Dropdown opens on hover.
`active`	`boolean`	`false`	Dropdown is open.
`onActiveChange`	`(active: boolean) => void`	—	Callback when dropdown active state changes.
`children`	`React.ReactNode`	—	Dropdown content.
`ref`	`React.Ref<HTMLDivElement>`	—	Ref forwarded to the dropdown container element.
`...`	All standard `<div>` attributes	—

Navbar.DropdownMenu

Prop	Type	Default	Description
`className`	`string`	—	Additional CSS classes.
`right`	`boolean`	`false`	Dropdown aligned right.
`up`	`boolean`	`false`	Dropdown opens upwards.
`children`	`React.ReactNode`	—	Dropdown menu content.
`...`	All standard `<div>` attributes	—

CSS & Sass Variables

Navbar registers these variables on its own .navbar element. Override them there (or via className) — a value set on an ancestor is only inherited, and loses to the component-level declaration. See Theme.

CSS Variable	Sass Variable	Default
`--bulma-navbar-height`	`$navbar-height`	`3.25rem`
`--bulma-navbar-h`	`$navbar-h`	`var(--bulma-scheme-h)`
`--bulma-navbar-s`	`$navbar-s`	`var(--bulma-scheme-s)`
`--bulma-navbar-l`	`$navbar-l`	`var(--bulma-scheme-main-l)`
`--bulma-navbar-background-color`	`$navbar-background-color`	`var(--bulma-scheme-main)`
`--bulma-navbar-box-shadow-size`	`$navbar-box-shadow-size`	`0 0.125em 0 0`
`--bulma-navbar-box-shadow-color`	`$navbar-box-shadow-color`	`var(--bulma-background)`
`--bulma-navbar-padding-vertical`	`$navbar-padding-vertical`	`1rem`
`--bulma-navbar-padding-horizontal`	`$navbar-padding-horizontal`	`2rem`
`--bulma-navbar-z`	`$navbar-z`	`30`
`--bulma-navbar-fixed-z`	`$navbar-fixed-z`	`30`
`--bulma-navbar-item-background-a`	`$navbar-item-background-a`	`0`
`--bulma-navbar-item-background-l`	`$navbar-item-background-l`	`var(--bulma-scheme-main-l)`
`--bulma-navbar-item-background-l-delta`	`$navbar-item-background-l-delta`	`0%`
`--bulma-navbar-item-hover-background-l-delta`	`$navbar-item-hover-background-l-delta`	`var(--bulma-hover-background-l-delta)`
`--bulma-navbar-item-active-background-l-delta`	`$navbar-item-active-background-l-delta`	`var(--bulma-active-background-l-delta)`
`--bulma-navbar-item-color-l`	`$navbar-item-color-l`	`var(--bulma-text-l)`
`--bulma-navbar-item-color`	`$navbar-item-color`	`hsl(var(--bulma-navbar-h), var(--bulma-navbar-s), var(--bulma-navbar-item-color-l))`
`--bulma-navbar-item-selected-h`	`$navbar-item-selected-h`	`var(--bulma-link-h)`
`--bulma-navbar-item-selected-s`	`$navbar-item-selected-s`	`var(--bulma-link-s)`
`--bulma-navbar-item-selected-l`	`$navbar-item-selected-l`	`var(--bulma-link-l)`
`--bulma-navbar-item-selected-background-l`	`$navbar-item-selected-background-l`	`var(--bulma-link-l)`
`--bulma-navbar-item-selected-color-l`	`$navbar-item-selected-color-l`	`var(--bulma-link-invert-l)`
`--bulma-navbar-item-img-max-height`	`$navbar-item-img-max-height`	`1.75rem`
`--bulma-navbar-burger-color`	`$navbar-burger-color`	`var(--bulma-link)`
`--bulma-navbar-tab-hover-background-color`	`$navbar-tab-hover-background-color`	`transparent`
`--bulma-navbar-tab-hover-border-bottom-color`	`$navbar-tab-hover-border-bottom-color`	`var(--bulma-link)`
`--bulma-navbar-tab-active-color`	`$navbar-tab-active-color`	`var(--bulma-link)`
`--bulma-navbar-tab-active-background-color`	`$navbar-tab-active-background-color`	`transparent`
`--bulma-navbar-tab-active-border-bottom-color`	`$navbar-tab-active-border-bottom-color`	`var(--bulma-link)`
`--bulma-navbar-tab-active-border-bottom-style`	`$navbar-tab-active-border-bottom-style`	`solid`
`--bulma-navbar-tab-active-border-bottom-width`	`$navbar-tab-active-border-bottom-width`	`0.1875em`
`--bulma-navbar-dropdown-background-color`	`$navbar-dropdown-background-color`	`var(--bulma-scheme-main)`
`--bulma-navbar-dropdown-border-l`	`$navbar-dropdown-border-l`	`var(--bulma-border-l)`
`--bulma-navbar-dropdown-border-color`	`$navbar-dropdown-border-color`	`hsl(var(--bulma-navbar-h), var(--bulma-navbar-s), var(--bulma-navbar-dropdown-border-l))`
`--bulma-navbar-dropdown-border-style`	`$navbar-dropdown-border-style`	`solid`
`--bulma-navbar-dropdown-border-width`	`$navbar-dropdown-border-width`	`0.125em`
`--bulma-navbar-dropdown-offset`	`$navbar-dropdown-offset`	`-0.25em`
`--bulma-navbar-dropdown-arrow`	`$navbar-dropdown-arrow`	`var(--bulma-link)`
`--bulma-navbar-dropdown-radius`	`$navbar-dropdown-radius`	`var(--bulma-radius-large)`
`--bulma-navbar-dropdown-z`	`$navbar-dropdown-z`	`20`
`--bulma-navbar-dropdown-boxed-radius`	`$navbar-dropdown-boxed-radius`	`var(--bulma-radius-large)`
`--bulma-navbar-dropdown-boxed-shadow`	`$navbar-dropdown-boxed-shadow`	`0 0.5em 0.5em hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l), 0.1), 0 0 0 1px hsla(var(--bulma-scheme-h), var(--bulma-scheme-s), var(--bulma-scheme-invert-l), 0.1)`
`--bulma-navbar-dropdown-item-h`	`$navbar-dropdown-item-h`	`var(--bulma-scheme-h)`
`--bulma-navbar-dropdown-item-s`	`$navbar-dropdown-item-s`	`var(--bulma-scheme-s)`
`--bulma-navbar-dropdown-item-l`	`$navbar-dropdown-item-l`	`var(--bulma-scheme-main-l)`
`--bulma-navbar-dropdown-item-background-l`	`$navbar-dropdown-item-background-l`	`var(--bulma-scheme-main-l)`
`--bulma-navbar-dropdown-item-color-l`	`$navbar-dropdown-item-color-l`	`var(--bulma-text-l)`
`--bulma-navbar-divider-background-l`	`$navbar-divider-background-l`	`var(--bulma-background-l)`
`--bulma-navbar-divider-height`	`$navbar-divider-height`	`0.125em`
`--bulma-navbar-bottom-box-shadow-size`	`$navbar-bottom-box-shadow-size`	`0 -0.125em 0 0`

Navbar

Overview

Import

Usage

Complete Navbar with Burger and Menu

Brand Only

Burger Only

Burger Active

Menu with Start and End

Navigation Links and Dropdowns

Custom Link Component

Transparent Navbar

Fixed Navbar

Dropup

Color Modifiers

Forwarded ref

Compound (dot-notation) usage

Accessibility

Additional Resources

Props

Navbar.Brand

Navbar.Item

Navbar.Link

Navbar.Burger

Navbar.Menu

Navbar.Start

Navbar.End

Navbar.Dropdown

Navbar.DropdownMenu

CSS & Sass Variables

Overview​

Import​

Usage​

Complete Navbar with Burger and Menu​

Brand Only​

Burger Only​

Burger Active​

Menu with Start and End​

Navigation Links and Dropdowns​

Custom Link Component​

Transparent Navbar​

Fixed Navbar​

Dropdown Right​

Dropup​

Dropdown without Arrow​

Active Dropdown Item​

Dropdown with Divider​

Color Modifiers​

Forwarded ref​

Compound (dot-notation) usage​

Accessibility​

Related Components​

Additional Resources​

Props​

Navbar.Brand​

Navbar.Item​

Navbar.Link​

Navbar.Burger​

Navbar.Menu​

Navbar.Start​

Navbar.End​

Navbar.Dropdown​

Navbar.DropdownMenu​

CSS & Sass Variables​

Overview

Import

Usage

Complete Navbar with Burger and Menu

Brand Only

Burger Only

Burger Active

Menu with Start and End

Navigation Links and Dropdowns

Custom Link Component

Transparent Navbar

Fixed Navbar

Dropdown Right

Dropup

Dropdown without Arrow

Active Dropdown Item

Dropdown with Divider

Color Modifiers

Forwarded ref

Compound (dot-notation) usage

Accessibility

Related Components

Additional Resources

Props

Navbar.Brand

Navbar.Item

Navbar.Link

Navbar.Burger

Navbar.Menu

Navbar.Start

Navbar.End

Navbar.Dropdown

Navbar.DropdownMenu

CSS & Sass Variables