NavTree
A tree of links to the pages of a site: its NavGroups, each with its NavLinks, and any link of its own.
Demos
For usage examples, visit the component demo page: NavTree
Import
import { NavTree } from '@soroush.tech/design-system/NavTree'Props
Also accepts every Flex prop (spacing, layout, ...).
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | NavGroups and NavLinks. |
color | keyof Theme['palette'] | 'primary' | Color of the current page's pill, a hovered link and the focus ring - the group's too. |
Theming
| Slot | Element |
|---|---|
root | The column of the tree. |
Customize via theme.components.NavTree.styleOverrides; NavGroup and NavLink have slots of their own.
Source code
If this page does not answer your question, have a look at the implementation of the component for more detail.