Breadcrumb

Component preview

The live preview for UI components is handled by components/atoms/codedocs/ComponentPreview.tsx. Use it directly inside MDX whenever you want a playground-style embed. Provide componentProps to set default values and propOptions to surface toggle-able props next to the preview.

Preview

Prop reference

Auto-generated from the component source

Breadcrumb

All props are forwarded to the underlying primitive.

React.ComponentProps<"nav">

BreadcrumbEllipsis

className

React.ComponentProps<"span">

BreadcrumbItem

className

React.ComponentProps<"li">

BreadcrumbLink

asChild
className

React.ComponentProps<"a"> & { asChild?: boolean; }

BreadcrumbList

className

React.ComponentProps<"ol">

BreadcrumbPage

className

React.ComponentProps<"span">

BreadcrumbSeparator

children
className

React.ComponentProps<"li">

Code

// owner: Sona
"use client";

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

export default function BreadcrumbExample() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Projects</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbEllipsis />
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#">AICU</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Overview</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

Breadcrumb

Component preview

On this page

Command Palette