Navigation · astro-ui · NavbarNew

Navbar

Top app bar with brand, nav links, actions, and a zero-JS mobile menu.

Navbar is the top-level app bar: a <header> with a brand slot, a <nav> landmark for the desktop links, an actions slot for the right edge, and a <details> disclosure that replaces the links under 48rem. Because the mobile menu is a native disclosure, it works with zero JavaScript, before hydration, and through back/forward cache restores.

← All components

Features

3 surfaces: bordered, elevated, transparent
Optional sticky placement
Brand, actions, and mobile slots
Native `<details>` mobile menu — zero JS, no focus trap
Links get hover/current styling automatically (`aria-current`)
Full-width bar with a centered 80rem content rail

Usage

---
import { Navbar, Button } from "astro-ui";
---

<Navbar sticky ariaLabel="Main">
  <a slot="brand" href="/">Acme</a>
  <a href="/docs" aria-current="page">Docs</a>
  <a href="/pricing">Pricing</a>
  <Button slot="actions" size="sm">Sign in</Button>
  <Fragment slot="mobile">
    <a href="/docs">Docs</a>
    <a href="/pricing">Pricing</a>
  </Fragment>
</Navbar>

Demos

App bar with actions

<Navbar ariaLabel="Main">
  <a slot="brand" href="/">Acme</a>
  <a href="/docs" aria-current="page">Docs</a>
  <a href="/pricing">Pricing</a>
  <a href="/changelog">Changelog</a>
  <Button slot="actions" size="sm">Sign in</Button>
  <Fragment slot="mobile">
    <a href="/docs">Docs</a>
    <a href="/pricing">Pricing</a>
    <a href="/changelog">Changelog</a>
  </Fragment>
</Navbar>

Below 48rem the links collapse into the mobile disclosure — resize the window to try it.

Sticky, elevated

<Navbar variant="elevated" sticky ariaLabel="Workspace">
  <a slot="brand" href="/">Astro UI</a>
  <a href="/components" aria-current="page">Components</a>
  <a href="/blocks">Blocks</a>
  <Badge slot="actions" variant="success" size="sm">All systems normal</Badge>
</Navbar>

Transparent over a hero

<div class="hero">
  <Navbar variant="transparent" ariaLabel="Marketing">
    <a slot="brand" href="/">Astro UI</a>
    <a href="/docs">Docs</a>
    <a href="/blocks">Blocks</a>
    <Button slot="actions" size="sm" variant="secondary">Get started</Button>
  </Navbar>
</div>

API

Props

Prop	Type	Default	Description
`variant`	`"bordered" \| "elevated" \| "transparent"`	`"bordered"`	Surface treatment.
`sticky`	`boolean`	`false`	Stick to the top of the scroll container.
`ariaLabel`	`string`	`"Main"`	Accessible name for the navigation landmark.
`mobileLabel`	`string`	`"Menu"`	Accessible name for the mobile disclosure.
`class`	`string`	`—`	Merged via cn(); Tailwind classes welcome.
`id`	`string`	`—`	Element id.
`ariaLabel`	`string`	`—`	Accessible name.

Slots

Slot	Description
`brand`	Logo or product name on the leading edge.
`(default)`	Desktop navigation links.
`actions`	Trailing buttons or status.
`mobile`	Links shown inside the mobile disclosure.

Accessibility

Implemented accessibility features — semantics, ARIA wiring, and keyboard behavior that ship with the component.

FAQ

Why do I author links twice (default and mobile)?

The mobile menu is a native `<details>` that hides the desktop nav below 48rem. Duplicating the links keeps that zero-JS; if you would rather render once, use the Sidebar + Sheet recipe for a drawer instead.

How do I add a mega menu?

Put a `<details>` inside a nav item, or compose Menu (JS) for hover-intent behavior. Navbar deliberately ships no mega-menu logic — it only owns the bar.

How do I mark the current page?

Add `aria-current="page"` to that link. Navbar styles it and screen readers announce it; no extra prop needed.

Changelog

Version history mentioning Navbar.

v0.1.0 — 2026-11-11

added

Navigation (7): Tabs, Breadcrumb, Pagination, Stepper, Tree, Navbar, Sidebar.