Tree Navigation

Neutral

Preview

index.tsx

Accent

Preview

index.tsx

Design Tokens for TreeNavigation

Token	Color for	State/Meaning
--par-color-bg-tree-navigation-item	Tree item background	Default/Enabled
--par-color-bg-tree-navigation-item-neutral-selected	Tree item background	Selected (neutral)
--par-color-bg-tree-navigation-item-accent-selected	Tree item background	Selected (accent)
--par-color-bg-tree-navigation-button-neutral-hovered	Tree item button background	Hovered (neutral)
--par-color-bg-tree-navigation-button-accent-hovered	Tree item button background	Hovered (accent)
--par-color-border-tree-navigation	Tree border	Any
--par-color-text-tree-navigation-content-item-enabled	Tree item text	Default/Enabled
--par-color-text-tree-navigation-content-item-neutral-selected	Tree item text	Selected (neutral)
--par-color-text-tree-navigation-content-item-accent-selected	Tree item text	Selected (accent)
--par-color-text-tree-navigation-content-item-disabled	Tree item text	Disabled
--par-color-text-tree-navigation-content-item-hovered	Tree item text	Hovered
--par-color-text-tree-navigation-content-item-pressed	Tree item text	Pressed
--par-color-bg-tree-navigation-item-icon-button	Tree item icon button background	Any
--par-color-text-tree-navigation-content-item-icon-button	Tree item icon button text	Any

TreeNavigation API Reference

`<TreeNavigation />`

Prop	Type	Default	Description
items	array		Tree data structure (array of navigation items)
...divProps	HTMLDivElement props		All native div props (className, style, ...)

Note: TreeNavigation inherits all native props from HTMLDivElement.

`TreeNavigationItem`

Represents a single navigation item in the tree.

Type:

interface TreeNavigationItem {
  id: string;
  title: string;
  href?: string;
  children?: TreeNavigationItem[];
  defaultExpanded?: boolean;
  defaultActive?: true;
}

Fields:

id (string): Unique identifier for the item.
title (string): Display text for the item.
href (string, optional): Link for the item.
children (TreeNavigationItem[], optional): Nested child items.
defaultExpanded (boolean, optional): If true, expands this item by default.
defaultActive (true, optional): If true, sets this item as active by default.