saturation/ui
DocsComponentsBlocksPages

Sections

IntroductionComponentsInstallationTheming

Components

ComponentsAccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBorder TrailBreadcrumbButtonButton GroupCalendar PickerCardChartCheckboxCollapsibleComboboxCommandContext MenuCredit CardData TableDate PickerDialogDropdown MenuEmptyFieldFiltersFull CalendarGlow EffectInputInput GroupInput OTPItemKanbanKbdMenubarNovel EditorPaginationProgressProgressive BlurRadio GroupSelectSeparatorSheetSkeletonSliderSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Docs/Components/Breadcrumb

Breadcrumb

Displays the path to the current page location and allows navigation back.

Loading...

Installation

pnpm dlx shadcn@latest add @saturation/breadcrumb

Usage

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from "@/components/ui/breadcrumb"
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Current</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Examples

With Dropdown

Loading...
Breadcrumb with dropdown for collapsed items.

With Icons

Loading...
Breadcrumb with icons.

Icons Only

Loading...
Icons without text labels.

API Reference

PropTypeDefaultDescription
separatorReact.ReactNode—Custom separator element.

On This Page

  • Installation
  • Usage
  • Examples
  • With Dropdown
  • With Icons
  • Icons Only
  • API Reference
  1. Home
  2. Components
  3. Breadcrumb
  1. Home
  2. Components
  3. Breadcrumb
  1. Home
  2. Documents
  3. Add Document
  1. Home
  2. Documents
  3. Add Document