NavLink

The built-in navlink tag — a navigation link with an icon, description, active state, and nested sub-links, on Mantine's NavLink. Usage, options, and live examples.

A built-in tag for a navigation link, built on Mantine’s NavLink: a label with an optional description, a left/right icon (any {% icon %} spec), an active state, a variant and color, and one level of nested sub-links via items.

Use it as {% navlink %} in Markdown, or call it from Python logic (loops, snippets) via component('aardvark', 'navlink', …).

Demonstrations

Label, description, icon, and active

The label is required; add a description for secondary text and leftSection / rightSection for an icon. Set active=true to highlight the current link, and href to render it as a real <a>.

Variants and color

variant is light (the default), filled, or subtle; color sets the accent for the active/hover state.

Disabled, no-wrap, and right section

disabled dims and disables the link; noWrap keeps the label on one line; a rightSection icon sits at the trailing edge (handy for a chevron or external-link mark).

Nested sub-links

Pass nested sub-links as a JSON array in items — children is reserved for the block body, so the nested data rides its own param. Set defaultOpened=true to start the group expanded and childrenOffset to indent it. Nesting goes one level deep through the tag.

With other components

Build a navigation column by looping over a list of pages in Python and emitting a {% navlink %} for each, marking the current page active. Wrap the run in a {% stack %} for vertical spacing.

For deeper trees or fully custom link state, build a snippet that nests component('NavLink', ...) directly.

Attributes

Omit any attribute to take its default.

CSS Selectors

Each link mounts inside an island wrapper carrying data-aardvark-island="NavLink"; Mantine’s Styles API breaks the rendered element into the root, label, description, and (for nested links) the chevron.

[data-aardvark-island="NavLink"]  /* the island wrapper */
.mantine-NavLink-root             /* the link/button */
.mantine-NavLink-label            /* the primary label */
.mantine-NavLink-description      /* the secondary line */
.mantine-NavLink-chevron          /* the expand chevron (nested links) */

Injecting Attributes

attr={…} forwards raw HTML attributes (including event handlers) onto the rendered link.