Nested file explorer with amber folder icons, chevrons, and a primary fill under the active file.
Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.
import { Nav26 } from "@/components/beste/piece/nav26";
<Nav26
items={[
{
"label": "app",
"type": "folder",
"open": true,
"children": [
{
"label": "page.tsx",
"type": "file"
},
{
"label": "layout.tsx",
"type": "file",
"active": true
}
]
},
{
"label": "components",
"type": "folder",
"open": false
},
{
"label": "tailwind.config.ts",
"type": "file"
}
]}
/>Classic folder-style tabs that sit on a rail, with the active tab bordered and notched into the panel.
Breadcrumb trail with a home icon, chevron separators, and a bold final crumb.
Compact breadcrumb trail with chevron separators and the trailing crumb rendered in bold.
Breadcrumb where each crumb wears a home or folder icon chip and the final crumb has a muted fill.
Segmented icon tabs inside a bordered tray, where the active tab flips to the foreground color.
URL-like path breadcrumb using mono segments with forward-slash dividers and a trailing chevron.