Breadcrumb

Breadcrumbs are the trail of digital breadcrumbs that help users understand where they are in your application's hierarchy. They're like the GPS for your website.

Preview

Code

Installation

First, make sure you have the required dependencies:

npx @rajdevxd/aura-ui add breadcrumb

yarn @rajdevxd/aura-ui add breadcrumb

pnpm dlx @rajdevxd/aura-ui add breadcrumb

bunx --bun @rajdevxd/aura-ui add breadcrumb

Usage

Here's how to implement breadcrumb navigation:

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

const MyBreadcrumb = () => {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="/">Dashboard</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="/settings">Settings</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Profile</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}

Components

The root container for breadcrumb navigation.

BreadcrumbList

Contains all breadcrumb items in an ordered list.

BreadcrumbItem

Individual breadcrumb item wrapper.

BreadcrumbLink

Clickable breadcrumb link for navigation.

BreadcrumbPage

The current page (not clickable).

BreadcrumbSeparator

Visual separator between breadcrumb items.

Features

Semantic HTML: Proper navigation structure for accessibility
Flexible Styling: Easy to customize appearance
Router Integration: Works with any routing library
Responsive: Adapts to different screen sizes

Common Issues

"Separators not showing!" - Make sure to include BreadcrumbSeparator between items
"Links not working!" - Use proper href attributes or onClick handlers
"Styling issues!" - Check your CSS for list-style and text-decoration overrides

Contributing

Breadcrumbs are essential for navigation! Help us improve their accessibility and styling.

Breadcrumbs - because users should never feel lost! 🧭

Aura UI