Saturation UIsaturation UI
DocsComponentsBlocks
⌘K

Getting Started

IntroductionInstallationTheming

Components

AccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBorder TrailBreadcrumbButtonButton GroupCalendarCardChartCheckboxCollapsibleComboboxCommandContext MenuData TableDate PickerDialogDropdown MenuEmptyFieldGlow EffectInputInput GroupItemKbdMenubarNovel EditorPaginationProgressive BlurProgressSelectSheetSkeletonSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Components
/
Breadcrumb

Breadcrumb

Displays the path to the current resource using a hierarchy of links.

  1. Home
  5. Components
  7. Breadcrumb

Installation

npx shadcn@latest add https://ui.saturation.io/r/breadcrumb.json

Usage

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

<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="/">Home</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      Current Page
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Examples

Default

  1. Home
  3. Components
  5. Breadcrumb

With Dropdown

  1. Home
  5. Breadcrumb

With Icons

  1. Home
  3. Documents
  5. Add Document

Icons Only

  1. Home
  5. Add Document

API Reference

Breadcrumb

PropTypeDefaultDescription
separatorReactNode/Custom separator between items

BreadcrumbLink

PropTypeDefaultDescription
asChildbooleanfalseRender as child component (e.g., Next.js Link)

On This Page

  • Installation
  • Usage
  • Examples
  • Default
  • With Dropdown
  • With Icons
  • Icons Only
  • API Reference

Deploy your Saturation UI app

Build beautiful, saturated interfaces with our component library.

Deploy to Vercel for the best performance and developer experience.