Breadcrumbs
A navigation component that shows the user's current location within a website hierarchy.
<c-breadcrumbs>
<c-breadcrumb href="/" label="Home" />
<c-breadcrumb href="/docs" label="Documentation" />
<c-breadcrumb label="Components" />
</c-breadcrumbs>Component API
c-breadcrumbs
| Property | Type | Default | Description |
|---|---|---|---|
class |
string |
- |
Additional CSS classes for the breadcrumbs container |
c-breadcrumb
| Property | Type | Default | Description |
|---|---|---|---|
label |
string |
required |
Text to display for the breadcrumb |
href |
string |
- |
URL to link to (if omitted, breadcrumb is not clickable) |
icon |
string |
- |
Icon name to display before the label |
class |
string |
- |
Additional CSS classes for the breadcrumb item |
Examples
With Icons
Add icons to breadcrumb items for better visual hierarchy and context.
<c-breadcrumbs>
<c-breadcrumb href="/" label="Home" icon="home" />
<c-breadcrumb href="/docs" label="Documentation" icon="book" />
<c-breadcrumb href="/docs/components" label="Components" icon="grid" />
<c-breadcrumb label="Breadcrumbs" icon="navigation" />
</c-breadcrumbs>Different Contexts
Breadcrumbs for various sections and contexts of your application.
E-commerce Navigation
Admin Dashboard
File System
Blog Navigation
<!-- E-commerce navigation -->
<c-breadcrumbs>
<c-breadcrumb href="/" label="Store" icon="home" />
<c-breadcrumb href="/category/electronics" label="Electronics" icon="smartphone" />
<c-breadcrumb href="/category/electronics/computers" label="Computers" icon="monitor" />
<c-breadcrumb label="Gaming Laptops" />
</c-breadcrumbs>
<!-- Admin dashboard -->
<c-breadcrumbs>
<c-breadcrumb href="/admin" label="Dashboard" icon="layout-dashboard" />
<c-breadcrumb href="/admin/users" label="User Management" icon="users" />
<c-breadcrumb href="/admin/users/123" label="User Profile" icon="user" />
<c-breadcrumb label="Edit Settings" icon="settings" />
</c-breadcrumbs>
<!-- File system navigation -->
<c-breadcrumbs>
<c-breadcrumb href="/files" label="Files" icon="folder" />
<c-breadcrumb href="/files/documents" label="Documents" icon="folder" />
<c-breadcrumb href="/files/documents/projects" label="Projects" icon="folder" />
<c-breadcrumb label="Website Redesign" icon="file" />
</c-breadcrumbs>Simple Navigation
Clean breadcrumbs without icons for minimal design contexts.
Documentation Path
Account Settings
Project Hierarchy
<!-- Documentation path -->
<c-breadcrumbs>
<c-breadcrumb href="/" label="Docs" />
<c-breadcrumb href="/getting-started" label="Getting Started" />
<c-breadcrumb href="/getting-started/installation" label="Installation" />
<c-breadcrumb label="Configuration" />
</c-breadcrumbs>
<!-- Account settings -->
<c-breadcrumbs>
<c-breadcrumb href="/account" label="Account" />
<c-breadcrumb href="/account/settings" label="Settings" />
<c-breadcrumb label="Privacy" />
</c-breadcrumbs>Long Paths
Handle long navigation paths with proper responsive design.
<c-breadcrumbs>
<c-breadcrumb href="/" label="Home" icon="home" />
<c-breadcrumb href="/organizations" label="Organizations" icon="building" />
<c-breadcrumb href="/organizations/acme-corp" label="ACME Corporation" icon="building" />
<c-breadcrumb href="/organizations/acme-corp/departments" label="Departments" icon="users" />
<c-breadcrumb href="/organizations/acme-corp/departments/engineering" label="Engineering" icon="code" />
<c-breadcrumb href="/organizations/acme-corp/departments/engineering/teams" label="Teams" icon="users" />
<c-breadcrumb href="/organizations/acme-corp/departments/engineering/teams/frontend" label="Frontend Team" icon="monitor" />
<c-breadcrumb label="Project Dashboard" />
</c-breadcrumbs>Appendix
Best Practices
Current Page
The last breadcrumb should represent the current page and typically should not be clickable (omit the
href attribute).Path Length
Consider truncating very long paths or implementing responsive behavior for mobile devices.
Meaningful Labels
Use descriptive and meaningful labels that clearly represent the page or section content.
SEO Considerations
Breadcrumbs can help search engines understand your site structure. Consider implementing structured data for better SEO.