Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA documentation sidebar tree with a filter field that opens matching sections, keeps the current page, and focuses on the slash key. Use this when a docs or help site has more pages than fit in a glance.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use it for documentation, help centres and settings with more than twenty pages.
Do not use it for short menus, or as site-wide search (it filters titles only; use a command palette for content).
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
nodes | TreeNode[] | - | Pages have an href; sections do not. |
currentHref | string | - | The page being shown. |
onNavigate | (node, event) => void | - | A link was activated. |
aria-label | string | "Documentation" | Names the navigation. |
aria-keyshortcuts="/"; the slash key is ignored while typing in any field.aria-current="page" on the current page, also while filtered.The pattern ships with a Testing Library test (docs-sidebar-search.test.tsx) that covers filtering, the slash shortcut, Escape and ArrowDown and the empty result.