Components / Navigation

NavLink

A link for navigation bars: aria-current="page" and an active style when current; a plain anchor, so client routers handle it. The inline variant drops the padding for compact link groups such as a footer.

@ruckc/truss-ui Navigation

Import

import { NavLink } from '@ruckc/truss-ui';

Playground

API

Also accepts every attribute of HTMLAnchorAttributes, applied to the underlying element.

Prop	Type	Default	Description
href required	string	—	Renders the element as a link to this URL.
current	boolean	false	Marks the link for the page being viewed: sets `aria-current="page"` and the active style.
variant	'default' | 'inline'	'default'	`inline` drops the padding and minimum height (hover shows an underline), for compact link groups such as a footer's `links`.
children required snippet	Snippet	—	Content, as a Svelte snippet.
class	string	—