Navbar

A navigation bar with brand and start, center, and end regions. These classes belong to the opt-in Official preset. Add @presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight used alongside these structural shortcuts.

Classes

• navbar, navbar-brand, navbar-start, navbar-center, navbar-end

Example

The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.

<nav class="navbar" aria-label="Primary">
  <a class="navbar-brand" href="/">Teasim</a>
  <div class="navbar-center"><a href="/products">Products</a></div>
  <div class="navbar-end"><a href="/docs">Docs</a></div>
</nav>

Variants and composition

navbar-brand identifies the site. navbar-start and navbar-end each reserve half the available width around a nonshrinking navbar-center. The root is a flex row; it does not automatically become a stacked or collapsed mobile navigation. The application chooses its responsive layout.

Behavior and accessibility

Name the navigation and use actual links. Bound long brand and action text, and decide which content may wrap or truncate at narrow widths. Route-current state and any mobile disclosure remain application behavior.

Reference

See the interactive Storybook specimen ↗. Continue to One-time code or return to the Official preset overview.