Navbar

A top bar with a brand mark, a row of nav links, and optional trailing content.

Above the collapse breakpoint (lg), the bar reads as one row. Below, the nav and any trailing extras fold into a column behind a toggle. Resize the preview to a narrow width to see it fold. Drop the bar inside an .app-shell__main or at the top of <body>.

Basic

Wrap a .navbar__brand, a .navbar__toggle, and a .navbar__menu with its .navbar__nav list. Mark the current page with data-state="active" on the matching .navbar__button.

<nav class="navbar w-100" data-stisla-navbar style="border: 1px solid var(--st-border); border-radius: var(--st-radius);">
  <a class="navbar__brand" href="#">Acme</a>
  <button type="button" class="navbar__toggle" data-stisla-navbar-toggle aria-controls="navbarBasic" aria-expanded="false" aria-label="Toggle navigation">
    <i data-lucide="menu"></i>
  </button>
  <div class="navbar__menu" id="navbarBasic" data-state="closed">
    <ul class="navbar__nav">
      <li><a class="navbar__button" data-state="active" aria-current="page" href="#">Home</a></li>
      <li><a class="navbar__button" href="#">Features</a></li>
      <li><a class="navbar__button" href="#">Pricing</a></li>
      <li><a class="navbar__button" href="#">About</a></li>
    </ul>
  </div>
</nav>

Active and disabled

Active links carry data-state="active" (highlight chip); unreachable links carry aria-disabled="true" (dim + no pointer events). Hover is the soft accent chip; the active treatment is the highlight chip so the current row reads steadier than a transient hover.

<nav class="navbar w-100" data-stisla-navbar style="border: 1px solid var(--st-border); border-radius: var(--st-radius);">
  <a class="navbar__brand" href="#">Acme</a>
  <button type="button" class="navbar__toggle" data-stisla-navbar-toggle aria-controls="navbarStates" aria-expanded="false" aria-label="Toggle navigation">
    <i data-lucide="menu"></i>
  </button>
  <div class="navbar__menu" id="navbarStates" data-state="closed">
    <ul class="navbar__nav">
      <li><a class="navbar__button" href="#">Overview</a></li>
      <li><a class="navbar__button" data-state="active" aria-current="page" href="#">Reports</a></li>
      <li><a class="navbar__button" href="#">Settings</a></li>
      <li><a class="navbar__button" aria-disabled="true">Billing</a></li>
    </ul>
  </div>
</nav>

With status text

Drop any element inside .navbar__menu for a trailing status pill, workspace name, or counter. Without a nav before it, push the element to the trailing edge with margin-inline-start: auto.

<nav class="navbar w-100" data-stisla-navbar style="border: 1px solid var(--st-border); border-radius: var(--st-radius);">
  <a class="navbar__brand" href="#">Acme</a>
  <button type="button" class="navbar__toggle" data-stisla-navbar-toggle aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
    <i data-lucide="menu"></i>
  </button>
  <div class="navbar__menu" id="navbarText" data-state="closed">
    <span class="d-inline-flex align-items-center gap-2 ms-auto text-muted-foreground">
      <span class="d-inline-block" style="width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--st-success);"></span>
      All systems normal
    </span>
  </div>
</nav>

Container

Drop a .container or .container-fluid as the bar's direct child to clamp inner content to the standard column widths. The bar still spans full width; the container takes over the inline padding so the inner row shares its inset with a matching container in the page body.

<nav class="navbar w-100" data-stisla-navbar style="border: 1px solid var(--st-border); border-radius: var(--st-radius);">
  <div class="container">
    <a class="navbar__brand" href="#">Acme</a>
    <button type="button" class="navbar__toggle" data-stisla-navbar-toggle aria-controls="navbarContainer" aria-expanded="false" aria-label="Toggle navigation">
      <i data-lucide="menu"></i>
    </button>
    <div class="navbar__menu" id="navbarContainer" data-state="closed">
      <ul class="navbar__nav">
        <li><a class="navbar__button" data-state="active" aria-current="page" href="#">Home</a></li>
        <li><a class="navbar__button" href="#">Features</a></li>
        <li><a class="navbar__button" href="#">Pricing</a></li>
      </ul>
    </div>
  </div>
</nav>

Dropdowns

Dropdown menus inside .navbar__nav land with the dropdown component in Step 4. Until then, link rows that anchor a menu render as plain links.

Customization

Seventeen variables retune .navbar without touching component CSS. Override on the .navbar itself, on a parent scope, or on :root.

Layout

Variable	Default	Use
`--navbar-padding-y`	calc(0.5rem * var(--st-density))	Vertical padding inside the bar
`--navbar-padding-x`	calc(1rem * var(--st-density))	Horizontal padding inside the bar; zeroed when a container child is present
`--navbar-gap`	calc(0.75rem * var(--st-density))	Space between brand, menu, and toggle
`--navbar-bg`	var(--st-background)	Bar background
`--navbar-color`	var(--st-foreground)	Bar foreground (brand + toggle inherit)

Button chip

Variable	Default	Use
`--navbar-button-height`	2.25rem	Hard height of `.navbar__brand` and `.navbar__button`; multiplied by `--st-density`
`--navbar-button-padding-x`	calc(0.75rem * var(--st-density))	Horizontal chip padding
`--navbar-brand-padding-x`	var(--navbar-button-padding-x)	Horizontal padding on `.navbar__brand`; defaults to the button chip's inset so brand text sits on the same x-grid as button text. Override to `0` for a flush brand.
`--navbar-button-gap`	calc(0.25rem * var(--st-density))	Space between adjacent chips in `.navbar__nav`
`--navbar-button-radius`	calc(var(--st-radius) - 0.25rem)	Chip corner radius
`--navbar-button-color`	var(--st-foreground)	Rest text color
`--navbar-button-hover-bg`	var(--st-accent)	Hover + focus chip fill
`--navbar-button-hover-color`	var(--st-accent-foreground)	Hover + focus text color
`--navbar-button-active-bg`	var(--st-highlight)	Current-page chip fill (`data-state="active"`)
`--navbar-button-active-color`	var(--st-highlight-foreground)	Current-page text color

Toggle + motion

Variable	Default	Use
`--navbar-toggle-size`	2.25rem	Square hamburger button size; multiplied by `--st-density`
`--navbar-transition`	150ms ease	Chip + toggle hover transition