Breadcrumb Component

Create clear navigation paths that help users understand their location within your site’s hierarchy. The Breadcrumb component automatically transforms URLs into readable navigation trails and handles long paths elegantly.

Key Features

• Automatic Path Generation: Converts URLs into readable navigation trails

• Smart Truncation: Handles long paths with dropdown menus

• Customizable Labels: Support for custom navigation text

• Responsive Design: Adapts to different screen sizes

Quick Start

1
<Breadcrumb href="/docs/components/breadcrumb" />

Features

Custom Navigation Labels

1
<Breadcrumb
2
    items={[
3
        { label: 'Documentation', href: '/docs/' },
4
        { label: 'Components', href: '/docs/components/' },
5
        { label: 'Navigation', href: '/docs/components/breadcrumb/' },
6
    ]}
7
/>

Path Length Control

1
<Breadcrumb
2
    href="/docs/components/carousel/card/"
3
    maxItems={4}
4
/>

Text Truncation

1
<Breadcrumb
2
    items={[
3
        { label: 'Very Long Category Name', href: '/category' },
4
        { label: 'Product Details', href: '/category/product' },
5
    ]}
6
    maxTextLength={10}
7
/>

Breadcrumb Component Props API

Breadcrumb Functions API

The breadcrumb component exposes several methods for programmatic control, allowing what would otherwise be a static component to be dynamic:

1
type BreadcrumbItem = {
2
  label: string;
3
  href: string;
4
};

Best Practices

• URL Structure

  • Use clear, hierarchical URLs
  • Keep URL segments concise
  • Use consistent naming conventions

• Label Usage

  • Keep labels short and descriptive
  • Use consistent terminology
  • Consider mobile screen constraints

Common Applications