Navbar

Top horizontal navigation bar with brand, nav links, and optional end-slot actions.

ExamplesCodeUsageChangelog

Default

A basic navbar with brand text and navigation links.

Acme Corp

HomeProductsPricingChangelog

Tailwind v4

<Navbar brand="Acme Corp">
  <NavbarItem href="#">Home</NavbarItem>
  <NavbarItem href="#" :active="true">Products</NavbarItem>
  <NavbarItem href="#">Pricing</NavbarItem>
  <NavbarItem href="#" :disabled="true">Changelog</NavbarItem>
</Navbar>

With end slot

Use #end to add actions (buttons, avatar, etc.) aligned to the right.

Acme Corp

HomeDocsBlog

Tailwind v4

<Navbar brand="Acme Corp">
  <NavbarItem href="#">Home</NavbarItem>
  <NavbarItem href="#" :active="true">Docs</NavbarItem>
  <NavbarItem href="#">Blog</NavbarItem>
  <template #end>
    <button>Sign in</button>
  </template>
</Navbar>

Sticky

Pass :sticky="true" to pin the navbar to the top of the viewport on scroll (position: sticky; top: 0; z-index: 100).

Sticky Nav

DashboardReports

Tailwind v4

<Navbar brand="Sticky Nav" :sticky="true">
  <NavbarItem href="#" :active="true">Dashboard</NavbarItem>
  <NavbarItem href="#">Reports</NavbarItem>
</Navbar>

Custom brand slot

Override the brand area entirely with #brand.

◆ Jetpack

HomeAbout

Tailwind v4

<Navbar>
  <template #brand>
    <span>◆ Jetpack</span>
  </template>
  <NavbarItem href="#" :active="true">Home</NavbarItem>
  <NavbarItem href="#">About</NavbarItem>
</Navbar>

Navbar Props

Prop	Type	Default	Description
brand	string	—	Brand/logo text shown on the left
sticky	boolean	false	Sticks to the top of the viewport on scroll
transparent	boolean	false	Removes background and border

Navbar Slots

Slot	Description
brand	Overrides the brand prop; use for logo images or custom markup
default	Nav link items (use NavbarItem)
end	Right-aligned actions such as buttons or an avatar

NavbarItem Props

Prop	Type	Default	Description
href	string	—	Renders as <a> when provided, otherwise <button>
active	boolean	false	Highlights the item with the primary blue underline
disabled	boolean	false	Dims the item and prevents interaction

NavbarItem Slots

Slot	Description
default	Label content