Breadcrumb

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

Import & use

import { Nav31 } from "@/components/beste/piece/nav31";

<Nav31
  items={[
    {
      "label": "Projects"
    },
    {
      "label": "Beste Co."
    },
    {
      "label": "Settings",
      "active": true
    }
  ]}
/>

More Nav pieces

View all Nav

Breadcrumb

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

Icon Breadcrumb

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

Path Breadcrumb

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

Collapsed Breadcrumb

Breadcrumb that hides middle crumbs behind a dropdown chip so the trail stays on a single row.

app

page.tsx

layout.tsx

components

tailwind.config.ts

File Tree

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

Actions

Dropdown Menu

Shadow-lifted menu with icon rows, shortcut hints on the right, and a tinted destructive Delete action.