Nexus DSdocs

Breadcrumb

Installation

npm install @radix-ui/react-slot@^1.2.4 @tabler/icons-react@^3.36.1 clsx@^2.1.1 tailwind-merge@^3.4.0
lib/icons.ts
lib/utils.ts
components/breadcrumb/breadcrumb.tsx
components/breadcrumb/index.ts

Code

'use client';

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@/components/breadcrumb/breadcrumb';

export default function BreadcrumbDemo() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Components</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

Props

Breadcrumb

Breadcrumb adds no props of its own; it accepts the props of the element or primitive it wraps.

BreadcrumbEllipsis

BreadcrumbEllipsis adds no props of its own; it accepts the props of the element or primitive it wraps.

BreadcrumbItem

BreadcrumbItem adds no props of its own; it accepts the props of the element or primitive it wraps.

BreadcrumbLink props
PropTypeDefaultDescription
asChildbooleanfalse

Render as the child element via Radix Slot — e.g. a router <Link> — while keeping the breadcrumb link styling.

BreadcrumbList

BreadcrumbList adds no props of its own; it accepts the props of the element or primitive it wraps.

BreadcrumbMenuTrigger

BreadcrumbMenuTrigger adds no props of its own; it accepts the props of the element or primitive it wraps.

BreadcrumbPage

BreadcrumbPage adds no props of its own; it accepts the props of the element or primitive it wraps.

BreadcrumbSeparator

BreadcrumbSeparator adds no props of its own; it accepts the props of the element or primitive it wraps.

Examples

With ellipsis

This example also needs:

npm install @radix-ui/react-dropdown-menu@^2.1.16 class-variance-authority@^0.7.1
components/overlay-layout/overlay-layout.ts
lib/motion.ts
components/dropdown-menu/dropdown-menu.tsx
components/dropdown-menu/index.ts
'use client';

import {
  Breadcrumb,
  BreadcrumbEllipsis,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@/components/breadcrumb/breadcrumb';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/dropdown-menu/dropdown-menu';

export default function BreadcrumbWithEllipsis() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <BreadcrumbEllipsis />
            </DropdownMenuTrigger>
            <DropdownMenuContent align="start">
              <DropdownMenuItem asChild>
                <a href="#projects">Projects</a>
              </DropdownMenuItem>
              <DropdownMenuItem asChild>
                <a href="#design-system">Design System</a>
              </DropdownMenuItem>
              <DropdownMenuItem asChild>
                <a href="#components">Components</a>
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Settings</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

With icons

'use client';

import { IconFolder, IconHome, IconSettings } from '@tabler/icons-react';

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@/components/breadcrumb/breadcrumb';

export default function BreadcrumbWithIcons() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">
            <IconHome aria-hidden />
            <span>Home</span>
          </BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#">
            <IconFolder aria-hidden />
            <span>Projects</span>
          </BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>
            <IconSettings aria-hidden />
            <span>Settings</span>
          </BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

With menu

This example also needs:

npm install @radix-ui/react-dropdown-menu@^2.1.16 class-variance-authority@^0.7.1
components/overlay-layout/overlay-layout.ts
lib/motion.ts
components/dropdown-menu/dropdown-menu.tsx
components/dropdown-menu/index.ts
'use client';

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbMenuTrigger,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@/components/breadcrumb/breadcrumb';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/dropdown-menu/dropdown-menu';

export default function BreadcrumbWithMenu() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Workspace</BreadcrumbLink>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <BreadcrumbMenuTrigger aria-label="Show other workspaces" />
            </DropdownMenuTrigger>
            <DropdownMenuContent align="start">
              <DropdownMenuItem asChild>
                <a href="#personal">Personal</a>
              </DropdownMenuItem>
              <DropdownMenuItem asChild>
                <a href="#team">Team</a>
              </DropdownMenuItem>
              <DropdownMenuItem asChild>
                <a href="#archived">Archived</a>
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Billing</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}