Breadcrumbs

Shows the path of links to the current page.

breadcrumbs-demo.tsx

import { Breadcrumb, Breadcrumbs } from "@/components/vip-ui/breadcrumbs";export function BreadcrumbsDemo() {  return (    <nav aria-label="Breadcrumbs">      <Breadcrumbs>        <Breadcrumb href="/">Home</Breadcrumb>        <Breadcrumb href="/components">Components</Breadcrumb>        <Breadcrumb>Breadcrumbs</Breadcrumb>      </Breadcrumbs>    </nav>  );}

Installation

CLI

Manual

The CLI adds the files, packages, theme variables, and Tailwind plugin that this component uses. Before you run it, set up your project.

npm

yarn

pnpm

bun

pnpm dlx shadcn@latest add https://vip-ui.dev/r/vip-breadcrumbs.json

Composition

navOptional
Use it when the path is the main navigation of the page.
- Breadcrumbs
  - BreadcrumbRepeats
    The last one is the current page. It shows as text.
  - BreadcrumbItemOptional
    Holds content that is not a link, such as a menu trigger.

Folder path

Pass items for a path that changes. onAction gets the id of the pressed breadcrumb. Also install Button.

My drive

breadcrumbs-folders-demo.tsx

"use client";import { FolderIcon } from "@phosphor-icons/react";import { useState } from "react";import { Breadcrumb, Breadcrumbs } from "@/components/vip-ui/breadcrumbs";import { Button } from "@/components/vip-ui/button";interface Folder {  id: string;  name: string;  children?: Folder[];}const root: Folder = {  id: "drive",  name: "My drive",  children: [    {      id: "work",      name: "Work",      children: [        {          id: "clients",          name: "Clients",          children: [            { id: "acme", name: "Acme" },            { id: "globex", name: "Globex" },          ],        },        { id: "invoices", name: "Invoices" },      ],    },    {      id: "personal",      name: "Personal",      children: [{ id: "travel", name: "Travel" }],    },  ],};export function BreadcrumbsFoldersDemo() {  const [path, setPath] = useState<Folder[]>([root]);  const current = path[path.length - 1];  return (    <div className="grid w-full max-w-md gap-3">      <Breadcrumbs        items={path}        onAction={(key) =>          setPath((items) =>            items.slice(0, items.findIndex((item) => item.id === key) + 1),          )        }      >        {(folder) => <Breadcrumb id={folder.id}>{folder.name}</Breadcrumb>}      </Breadcrumbs>      <div className="flex min-h-11 flex-wrap gap-2">        {current.children?.map((folder) => (          <Button            key={folder.id}            variant="outline"            size="sm"            onPress={() => setPath((items) => [...items, folder])}          >            <FolderIcon aria-hidden="true" />            {folder.name}          </Button>        )) ?? (          <p className="self-center text-sm text-muted-foreground">            This folder is empty.          </p>        )}      </div>    </div>  );}

Collapsed path

Use BreadcrumbItem for a breadcrumb that is not a link, such as a menu of hidden pages. Also install Menu and Button.

breadcrumbs-collapsed-demo.tsx

"use client";import { DotsThreeIcon } from "@phosphor-icons/react";import {  Breadcrumb,  BreadcrumbItem,  Breadcrumbs,} from "@/components/vip-ui/breadcrumbs";import { Button } from "@/components/vip-ui/button";import { Menu, MenuItem, MenuTrigger } from "@/components/vip-ui/menu";const hidden = [  { id: "docs", name: "Docs", href: "/docs" },  { id: "components", name: "Components", href: "/components" },  { id: "navigation", name: "Navigation", href: "/components" },];export function BreadcrumbsCollapsedDemo() {  return (    <nav aria-label="Breadcrumbs">      <Breadcrumbs>        <Breadcrumb href="/">Home</Breadcrumb>        <BreadcrumbItem id="more">          <MenuTrigger>            <Button              variant="minimal"              size="xs"              iconOnly              aria-label="More pages"            >              <DotsThreeIcon weight="bold" aria-hidden="true" />            </Button>            <Menu aria-label="More pages" items={hidden}>              {(item) => <MenuItem href={item.href}>{item.name}</MenuItem>}            </Menu>          </MenuTrigger>        </BreadcrumbItem>        <Breadcrumb href="/components/breadcrumbs">Breadcrumbs</Breadcrumb>        <Breadcrumb>Examples</Breadcrumb>      </Breadcrumbs>    </nav>  );}

API reference

Breadcrumbs takes the props of React Aria Breadcrumbs (opens in a new tab).