Breadcrumb

A navigation component that shows the user’s current location in a hierarchical structure.

Usage

import { Breadcrumb } from "@rhinolabs/ui"

export default function BreadcrumbDemo() {
  return (
    <Breadcrumb>
      <Breadcrumb.List>
        <Breadcrumb.Item>
          <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
        </Breadcrumb.Item>
        <Breadcrumb.Separator />
        <Breadcrumb.Item>
          <Breadcrumb.Link href="/docs">Docs</Breadcrumb.Link>
        </Breadcrumb.Item>
        <Breadcrumb.Separator />
        <Breadcrumb.Item>
          <Breadcrumb.Page>Components</Breadcrumb.Page>
        </Breadcrumb.Item>
      </Breadcrumb.List>
    </Breadcrumb>
  )
}

Examples

With Ellipsis

For long navigation paths, use ellipsis to save space.

<Breadcrumb>
  <Breadcrumb.List>
    <Breadcrumb.Item>
      <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
    </Breadcrumb.Item>
    <Breadcrumb.Separator />
    <Breadcrumb.Item>
      <Breadcrumb.Ellipsis />
    </Breadcrumb.Item>
    <Breadcrumb.Separator />
    <Breadcrumb.Item>
      <Breadcrumb.Link href="/docs/components">Components</Breadcrumb.Link>
    </Breadcrumb.Item>
    <Breadcrumb.Separator />
    <Breadcrumb.Item>
      <Breadcrumb.Page>Breadcrumb</Breadcrumb.Page>
    </Breadcrumb.Item>
  </Breadcrumb.List>
</Breadcrumb>

Custom Separator

Use custom separators to match your design.

import { Breadcrumb } from "@rhinolabs/ui";
import { Slash } from "lucide-react";

export default function BreadcrumbDemo() {
  return (
    <Breadcrumb>
      <Breadcrumb.List>
        <Breadcrumb.Item>
          <Breadcrumb.Link href="/">Home</Breadcrumb.Link>
        </Breadcrumb.Item>
        <Breadcrumb.Separator>
          <Slash />
        </Breadcrumb.Separator>
        <Breadcrumb.Item>
          <Breadcrumb.Page>Settings</Breadcrumb.Page>
        </Breadcrumb.Item>
      </Breadcrumb.List>
    </Breadcrumb>
  );
}

Props

Breadcrumb Props

Prop	Type	Default	Description
separator	ReactNode	<ChevronRight />	Custom separator between items

All subcomponents accept standard HTML attributes for their respective elements.

Design Considerations

• Keep navigation paths clear and logical
• Use ellipsis for long paths on mobile
• Maintain consistent styling across pages
• Use clear and concise labels
• Consider the visual hierarchy

Accessibility

• Uses semantic navigation markup
• Provides clear current page indication
• Maintains keyboard navigation support
• Includes proper ARIA attributes
• Ensures screen reader compatibility