Breadcrumb

Provides a navigational trail showing the user’s current location within the site hierarchy, improving orientation and usability.

HomeCartBillingShippingPayment

Installation

npx shadcn@latest add https://display-ui.vercel.app/r/Breadcrumb

Usage

import { Breadcrumb } from "@/components/display-ui/Breadcrumb"

<Breadcrumb.Main separator={<ChevronRight width={14} />} textSize="xs">
  <Breadcrumb.Path icon={<House width={12} />}>Home</Breadcrumb.Path>
  <Breadcrumb.Path icon={<ShoppingCart width={12} />}>Cart</Breadcrumb.Path>
  <Breadcrumb.Path icon={<Receipt width={12} />}>Billing</Breadcrumb.Path>
  <Breadcrumb.Path icon={<Truck width={12} />}>Shipping</Breadcrumb.Path>
  <Breadcrumb.Path icon={<BadgeDollarSign width={12} />}>
    Payment
  </Breadcrumb.Path>
</Breadcrumb.Main>

API

For Breadcrumb Main

Attribute	Type	Description	Default
children	`ReactNode \| ReactNode[]`	Breadcrumb items to be rendered in sequence. Typically composed of Breadcrumb.Path components.	-
textSize	`"xs" \| "sm" \| "md" \| "lg"`	Controls the text size of the breadcrumb items.	"md"
separator	`ReactNode`	Custom separator rendered between breadcrumb items.	-
className	`string`	Additional CSS classes to customize the breadcrumb container styling.	-

For Breadcrumb Path

Attribute	Type	Description	Default
children	`ReactNode`	The label text of the breadcrumb path.	-
icon	`ReactNode`	Optional icon displayed before the breadcrumb text.	-
href	`string`	URL the breadcrumb path links to.	-
className	`string`	Additional CSS classes to customize the breadcrumb path styling.	-

Examples

Default [ Without Icon ]

HomeCartBillingShippingPayment

With Icon

HomeCartBillingShippingPayment

Credits

This component is inspired by Rehman Kalawant Design Shared On Github.

On this page