Breadcrumbs

Breadcrumbs provide hierarchical navigation that helps users understand their current location within your application and easily navigate to parent sections.

Basic Usage

The basic breadcrumb pattern shows the current page and its parent pages. The current page is automatically styled differently and isn't clickable.

Basic Breadcrumbs

100%

<byte-breadcrumbs>
    <byte-breadcrumb href="/">Home</byte-breadcrumb>
    <byte-breadcrumb href="/users">Users</byte-breadcrumb>
    <byte-breadcrumb current>John Doe</byte-breadcrumb>
  </byte-breadcrumbs>

Custom Separators

Customize the separator between breadcrumb items using any icon from the Byte icon set. This allows you to match your design system's visual language.

Breadcrumb Separator Options

100%

<div class="space-y-4">
    <byte-breadcrumbs separator="chevron-right">
      <byte-breadcrumb href="/">Home</byte-breadcrumb>
      <byte-breadcrumb href="/users">Users</byte-breadcrumb>
      <byte-breadcrumb current>Settings</byte-breadcrumb>
    </byte-breadcrumbs>

    <byte-breadcrumbs separator="arrow-right">
      <byte-breadcrumb href="/">Home</byte-breadcrumb>
      <byte-breadcrumb href="/products">Products</byte-breadcrumb>
      <byte-breadcrumb current>Categories</byte-breadcrumb>
    </byte-breadcrumbs>
  </div>

With Icons

Add icons to breadcrumb items to provide additional visual context. Icons can help users quickly identify different sections of your application.

Breadcrumbs with Icons

100%

<byte-breadcrumbs>
    <byte-breadcrumb href="/" icon="home">Home</byte-breadcrumb>
    <byte-breadcrumb href="/dashboard" icon="squares-2x2">Dashboard</byte-breadcrumb>
    <byte-breadcrumb href="/settings" icon="cog-6-tooth" current>Settings</byte-breadcrumb>
  </byte-breadcrumbs>

API Reference

Breadcrumbs Container

Property

Type

Default

Description

separator

string

'slash'

Icon name to use as separator

Breadcrumb Item

Property

Type

Default

Description

href

string

Navigation URL for the breadcrumb

current

boolean

false

Indicates current page

icon

string

Icon to display with the breadcrumb

Common Patterns

Basic Navigation

Basic Navigation Pattern

100%

<byte-breadcrumbs>
    <byte-breadcrumb href="/" icon="home">Home</byte-breadcrumb>
    <byte-breadcrumb current>Page</byte-breadcrumb>
  </byte-breadcrumbs>

Section Navigation

Section Navigation Pattern

100%

<byte-breadcrumbs>
    <byte-breadcrumb href="/" icon="home">Home</byte-breadcrumb>
    <byte-breadcrumb href="/admin" icon="cog-6-tooth">Admin</byte-breadcrumb>
    <byte-breadcrumb href="/admin/users" icon="users">Users</byte-breadcrumb>
    <byte-breadcrumb current>Edit</byte-breadcrumb>
  </byte-breadcrumbs>

Best Practices

Keep breadcrumb labels short and clear
Use consistent separators throughout your application
Include the current page as the last item
Use icons sparingly and consistently
Ensure proper spacing between items

Pro tip: Use breadcrumbs in conjunction with other navigation components like sidebars or navigation menus for better user orientation.

Accessibility

Breadcrumbs are automatically configured with proper ARIA attributes and keyboard navigation support:

Uses nav element with aria-label="Breadcrumb"
Current page is marked with aria-current="page"
Separators are hidden from screen readers
Links are keyboard focusable