Binhlaig UI Component

Breadcrumb

A navigation trail that shows the current page location and its hierarchy.

Installation

Initialize Binhlaig UI once, then install Breadcrumb using the saved installer.

Initialize first

npx binhlaig-ui@latest init

Terminal

npx binhlaig-ui@latest add breadcrumb

Import

Import Breadcrumb primitives from your UI directory.

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

Usage

Use BreadcrumbPage for the current page and links for parent pages.

With Icon

Use an icon-only home link with an accessible label.

Collapsed

Collapse long middle sections with BreadcrumbEllipsis.

Custom Separator

Pass any icon or text to BreadcrumbSeparator.

Responsive Breadcrumb

Hide less important items on smaller screens using utility classes.

Update or Overwrite

Replace an older Breadcrumb source with the latest registry version.

npx binhlaig-ui@latest add breadcrumb --overwrite

API Reference

Main primitives available in Binhlaig UI Breadcrumb.

Component	Purpose
`Breadcrumb`	Navigation landmark container.
`BreadcrumbList`	Ordered breadcrumb list.
`BreadcrumbItem`	A single path item.
`BreadcrumbLink`	Link to a parent location.
`BreadcrumbPage`	Current page label.
`BreadcrumbSeparator`	Visual separator between items.
`BreadcrumbEllipsis`	Collapsed path indicator.

Previous component

Avatar

All components