Sidebar sub-nav with file-explorer L-branch connectors.
A two-piece nav (TreeNav container + TreeNavItem rows) that draws the L-shaped branch and triangle tip familiar from file explorers. Router-agnostic via asChild, active state driven by aria-current, and every visual surface — branch color, thickness, indent, hover lift — wired to CSS variables.
Two components ship together — a TreeNav container and TreeNavItem rows. CSS is auto-imported.
pnpm add @roy-ui/uiimport { TreeNav, TreeNavItem } from '@roy-ui/ui';Drop TreeNav inside a parent group label. Items are <a> by default — pass asChild to plug in your router's Link.
L-corner connector + triangle tip. Active item is marked with the active prop, which sets aria-current and pulls the branch into its active color.
<TreeNav>
<TreeNavItem href="/pricing/pay-per-use" active>
Pay per use
</TreeNavItem>
<TreeNavItem href="/pricing/packages">Packages</TreeNavItem>
</TreeNav>Icon slot accepts any ReactNode — Lucide, Heroicons, or your own SVG. Renders before the label, inside the same row.
<TreeNav>
<TreeNavItem href="/pricing/pay-per-use" icon={<DollarIcon />}>
Pay per use
</TreeNavItem>
<TreeNavItem href="/pricing/packages" icon={<PackageIcon />}>
Packages
</TreeNavItem>
</TreeNav>Pass hideTip on individual items if you want only the L-corner without the file-explorer arrow.
<TreeNav>
<TreeNavItem href="/pricing/pay-per-use" hideTip active>
Pay per use
</TreeNavItem>
<TreeNavItem href="/pricing/packages" hideTip>
Packages
</TreeNavItem>
</TreeNav>Indent and gap are tokens. Drop indent for a compact sub-nav; bump gap when items need breathing room.
A real sub-nav layout: each parent label sits on its own row, with a TreeNav of children indented below. One active leaf colors only its own branch.
<aside>
<div className="parent">Library</div>
<TreeNav>
<TreeNavItem href="/library/articles">Articles</TreeNavItem>
<TreeNavItem href="/library/guides" active>Guides</TreeNavItem>
<TreeNavItem href="/library/changelog">Changelog</TreeNavItem>
</TreeNav>
<div className="parent">Workspace</div>
<TreeNav>
<TreeNavItem href="/workspace/boards">Boards</TreeNavItem>
<TreeNavItem href="/workspace/members">Members</TreeNavItem>
<TreeNavItem href="/workspace/activity">Activity</TreeNavItem>
</TreeNav>
<div className="parent">Account</div>
<TreeNav>
<TreeNavItem href="/account/profile">Profile</TreeNavItem>
<TreeNavItem href="/account/sessions">Sessions</TreeNavItem>
</TreeNav>
</aside>TreeNavItem renders an <a> by default. Pass asChild to render the consumer's element instead — works with next/link, react-router, TanStack Router, anything that sets aria-current on the active link.
import Link from 'next/link';
import { TreeNav, TreeNavItem } from '@roy-ui/ui';
<TreeNav>
<TreeNavItem asChild active={pathname === '/pricing/pay-per-use'}>
<Link href="/pricing/pay-per-use">Pay per use</Link>
</TreeNavItem>
<TreeNavItem asChild active={pathname === '/pricing/packages'}>
<Link href="/pricing/packages">Packages</Link>
</TreeNavItem>
</TreeNav>import { Link } from '@tanstack/react-router';
import { TreeNav, TreeNavItem } from '@roy-ui/ui';
<TreeNav>
<TreeNavItem asChild>
<Link to="/pricing/pay-per-use" activeProps={{ 'aria-current': 'page' }}>
Pay per use
</Link>
</TreeNavItem>
</TreeNav>Branches react to aria-current="page" on the inner link via :has(), so any router that follows the standard works without configuration.
Every visual surface is wired to a CSS variable scoped to .royui-treenav. Override on the element with style, on a parent class, or globally on :root.
.royui-treenav {
--royui-treenav-branch: rgba(0, 0, 0, 0.28);
--royui-treenav-branch-active: rgba(0, 0, 0, 0.65);
--royui-treenav-label: rgba(0, 0, 0, 0.6);
--royui-treenav-label-hover: rgba(0, 0, 0, 0.92);
--royui-treenav-label-active: rgba(0, 0, 0, 1);
--royui-treenav-hover-bg: rgba(0, 0, 0, 0.04);
--royui-treenav-active-bg: rgba(0, 0, 0, 0.06);
--royui-treenav-font-size: 13px;
--royui-treenav-font-weight: 500;
--royui-treenav-font-weight-active: 600;
}A dark-scheme override ships under @media (prefers-color-scheme: dark). To force a specific palette, set the tokens on the component directly via style or a wrapper class.
Both components forward every native HTML attribute and accept ref.
| Prop | Type | Default | Description |
|---|---|---|---|
indent | number | 24 | Left margin of the branched group, in pixels. |
gap | number | 2 | Vertical gap between items, in pixels. |
...rest | HTMLAttributes<HTMLUListElement> | — | All native <ul> props (className, style, role, aria-*, ref). |
| Prop | Type | Default | Description |
|---|---|---|---|
href | string | — | Link target. Used when asChild is false. |
active | boolean | false | Marks this item active. Adds aria-current="page" to the inner link, which colors the branch. |
asChild | boolean | false | Render the single React element child as the link (next/link, TanStack Link, etc.) instead of <a>. |
hideTip | boolean | false | Hide the triangle tip at the elbow of the L-branch. |
icon | ReactNode | — | Leading icon slot. Ignored when asChild is true (consumer handles their link contents). |
linkProps | AnchorHTMLAttributes<HTMLAnchorElement> | — | Forwarded to the rendered <a> (onClick, target, rel, aria-*). Default-link mode only. |
...rest | LiHTMLAttributes<HTMLLIElement> | — | All native <li> props (className, style, role, aria-*, ref). |