NavLink
NavLink is the link that fills a Navbar or another compact route list. Choose it for a destination; choose Button when the control performs work instead of taking someone somewhere.
Examples
Current destination
Set active only for the route currently shown. It gives the link its selected treatment and
keeps aria-current="page" aligned with what a person sees.
A composed framework link
Use asChild when your router needs to own the anchor. NavLink then supplies its classes and
active-page semantics without replacing routing, prefetching or modifier-click behavior.
When to use
Use NavLink for a short, persistent set of page destinations, especially inside Navbar.
Reach for something else when:
- The route chooser needs brand, actions and page-level structure — use Navbar; NavLink fills its navigation slot.
- The destinations are peer views in the current page — use Tabs.
- The control starts or confirms work — use Button.
Accessibility
- By default, NavLink renders a native
<a>. Give it a realhrefand a label that identifies the destination. activeaddsaria-current="page". Set it on one link for the current page, not on a future or pending destination.- Its focus indicator appears on
:focus-visible; do not remove it. - With
asChild, provide exactly one valid link element. That child keeps responsibility for itshref, keyboard behavior and accessible name.
API and code
| Name | Type | Required | Description |
|---|---|---|---|
active | boolean | — | Marks the destination as the current page. |
asChild | boolean | — | Render the single child element instead of an `<a>`, preserving its routing behavior. |
children | ReactNode | — | Link content. Must be exactly one element when `asChild` is enabled. |
Use an anchor for each destination and declare the current page directly:
<a class="lyra-navlink lyra-navlink--active" href="/overview" aria-current="page">Overview</a>
<a class="lyra-navlink" href="/projects">Projects</a><lyra:nav-link> Generated from lyra-ds/blade v0.10.0.
| Prop | Default | Required | Example values |
|---|---|---|---|
active | false | — | — |
<lyra:nav-link href="/projects" active>Projects</lyra:nav-link>