File Tree

Nested file explorer with amber folder icons, chevrons, and a primary fill under the active file.

app

page.tsx

layout.tsx

components

tailwind.config.ts

Import & use

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"
    }
  ]}
/>

More Nav pieces

View all Nav

Enclosed Tabs

Classic folder-style tabs that sit on a rail, with the active tab bordered and notched into the panel.

Breadcrumb

Breadcrumb trail with a home icon, chevron separators, and a bold final crumb.

Icon Tabs

Segmented icon tabs inside a bordered tray, where the active tab flips to the foreground color.

Icon Breadcrumb

Breadcrumb where each crumb wears a home or folder icon chip and the final crumb has a muted fill.

Breadcrumb

Compact breadcrumb trail with chevron separators and the trailing crumb rendered in bold.

Path Breadcrumb

URL-like path breadcrumb using mono segments with forward-slash dividers and a trailing chevron.