Nav

A real <nav aria-label> wrapping a real<ul>, a list of links is exactly what a list is for.aria-label is required because a page can have more than one <nav> (primary nav, breadcrumbs, pagination), each needs its own accessible name so a screen reader user can tell them apart. Compose it with NavLink, which renders<li><a></a></li>.

The active link is marked with aria-current="page". That's the consumer's job, not the component's — in Astro, compute it at build time from Astro.url.pathname and pass it straight through. The active style is a plain [aria-current="page"] selector, nothing client-side has to run to know which link is active.

Playground

Toggle every adjustable prop and watch the component — and the code — update live.

<Nav aria-label="Docs">
  <NavLink href="/">Overview</NavLink>
  <NavLink href="/components/" aria-current="page">Components</NavLink>
  <NavLink href="/theming">Theming</NavLink>
</Nav>

<kernel-nav aria-label="Docs">
  <kernel-nav-link href="/">Overview</kernel-nav-link>
  <kernel-nav-link href="/components/" aria-current="page">Components</kernel-nav-link>
  <kernel-nav-link href="/theming">Theming</kernel-nav-link>
</kernel-nav>

Props

Accessibility

• Nav renders a native <nav>, exposed as a navigation landmark. The required aria-label gives each one on the page a distinct accessible name.
• NavLink renders a real <a> inside a real <li>, so it's keyboard-focusable and works with browser link affordances (open in new tab, copy link) for free.
• Set aria-current="page" on the link matching the current route so assistive tech and the[aria-current="page"] style both know which item is active.