PlumUI

Breadcrumb

Shows where the current page sits in the hierarchy, with links that underline from the left on hover.

Navigation

Playground

Tweak the props, the preview and the code follow.

Props
4
<Breadcrumb>
  <BreadcrumbList>
    <BreadcrumbItem>
      <BreadcrumbLink href="#">Acme</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="#">Projects</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbLink href="#">web</BreadcrumbLink>
    </BreadcrumbItem>
    <BreadcrumbSeparator />
    <BreadcrumbItem>
      <BreadcrumbPage>Deployments</BreadcrumbPage>
    </BreadcrumbItem>
  </BreadcrumbList>
</Breadcrumb>

Installation

npx @plumsydev/plum-ui add breadcrumb

Usage

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

Examples

Custom separator

Pass any icon as children of BreadcrumbSeparator.

Collapsed with a menu

Hide middle levels behind an ellipsis that opens a dropdown. Click a level to go up.

API Reference

BreadcrumbLink

PropTypeDefault
asChild

Render your router's Link component instead of an anchor.

booleanfalse

BreadcrumbSeparator

PropTypeDefault
children

Custom separator content.

ReactNode<ChevronRight />
PreviousBorder BeamNextButton