Navigation@knitui/components

NavLink

NavLink renders a pressable navigation item with optional label, description, left/right sections, and nestable children. The variant prop controls how the active theme ramp is applied. Nesting is handled by composing <NavLink> elements as children — the parent automatically shows a chevron and manages open/closed state.

WebiOSAndroid9 style slots13 own props12 examples

Stories Source Tests Open in Storybook

import { NavLink } from "@knitui/components";

Playground

Loading playground…

variantVisual style — controls hover and active background colours.

activeApplies active styles to the item.

false

disabledDisables pointer events and reduces opacity.

false

noWrapTruncates label and description to one line.

false

label

description

Playground

<NavLink
  label="NavLink"
  variant="light"
  active={false}
  disabled={false}
  noWrap={false}
  disableRightSectionRotation={false}
/>

Examples

Variants

Every visual variant side by side at default size.

Loading example…

VariantsSource Storybook

Active

Active state applied to each variant — shows how the active theme ramp is used per variant.

Loading example…

ActiveSource Storybook

Shadows

Each elevation of the inherited shadow prop applied to the NavLink row.

Loading example…

ShadowsSource Storybook

Disabled

Disabled state — reduced opacity and no pointer events.

Loading example…

DisabledSource Storybook

With Description

Label plus a secondary description line below it.

Loading example…

With DescriptionSource Storybook

With Sections

Left and right sections hold icons or badges.

Loading example…

With SectionsSource Storybook

Nested

Nested NavLink children — the parent shows a chevron that rotates on expand.

Loading example…

NestedSource Storybook

Controlled

Controlled open state — the parent component drives opened and onChange.

Loading example…

ControlledSource Storybook

Styles

Per-slot styles targets individual parts — here the root row, the label, and the description.

Loading example…

StylesSource Storybook

A realistic navigation sidebar built from NavLink items.

Loading example…

SidebarSource Storybook

Compound API

Compound sub-components (NavLink.Root, NavLink.Body, NavLink.Label, etc.) used directly for custom layouts.

Loading example…

Compound APISource Storybook

Props

Prop	Type	Default	Description
`active`	`boolean \| undefined`	`false`	Applies active styles to the item.
`children`	`ReactNode`	—	Nested `NavLink` children.
`childrenOffset`	`number \| SpaceTokens \| Animated.AnimatedNode \| "safe" \| null \| undefined`	`'$lg'`	Left indentation applied to nested children.
`defaultOpened`	`boolean \| undefined`	`false`	Uncontrolled initial open state.
`description`	`ReactNode`	—	Description displayed below the label.
`disabled` system	`boolean \| undefined`	`false`	Disables pointer events and reduces opacity.
`disableRightSectionRotation`	`boolean \| undefined`	`false`	Disables chevron rotation when expanded.
`keepMounted`	`boolean \| undefined`	`true`	Keep nested children mounted when collapsed.
`label`	`ReactNode`	`NavLink`	Main link label.
`leftSection`	`ReactNode`	—	Section on the left of the label.
`noWrap`	`boolean \| undefined`	`false`	Truncates label and description to one line.
`onChange`	`((opened: boolean) => void) \| undefined`	—	Called when open state changes.
`opened`	`boolean \| undefined`	—	Controlled open state.
`rightSection`	`ReactNode`	—	Section on the right of the label (defaults to chevron when children exist).
`shadow` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined`	—
`styles` system	`SlotStyles<NavLinkStyles> \| undefined`	—	Per-slot style sugar — props spread onto the matching styled part.
`theme` system	`ThemeName \| null \| undefined`	—	Applies a theme to this element
`variant` system	`NavLinkVariant \| undefined` filled · light · subtle	`'light'`	Visual style — controls hover and active background colours.

Style slots

Every part of NavLink can be styled through the styles prop. Explicit props on the component always win over slot styles.

Slot	Usage
`body`	`styles={{ body: { … } }}`
`chevron`	`styles={{ chevron: { … } }}`
`children`	`styles={{ children: { … } }}`
`description`	`styles={{ description: { … } }}`
`label`	`styles={{ label: { … } }}`
`leftSection`	`styles={{ leftSection: { … } }}`
`rightSection`	`styles={{ rightSection: { … } }}`
`root`	`styles={{ root: { … } }}`
`wrapper`	`styles={{ wrapper: { … } }}`

Accessibility & DOM props (2)

Prop	Type
`key`	`Key \| null \| undefined`
`ref`	`Ref<TamaguiElement> \| undefined`

Plus 496 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.