Astro components
Breadcrumbs
Displays a path of links to the current resource.
A navigation component that displays the current location within the site hierarchy.
Usage
---
import Breadcrumbs from '@/components/Breadcrumbs.astro';
---
const items = [
{ name: 'Home', url: '/' },
{ name: 'Docs', url: '/docs' },
{ name: 'Button', url: '/docs/button' },
];
<Breadcrumbs items={items} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | BreadcrumbItem[] | [] | Array of breadcrumb items. Each item has a name and url. |
separator | string | '/' | The visual separator between items. |
class | string | - | Class for the nav wrapper. |
olClass | string | - | Class for the ordered list (<ol>). |
liClass | string | - | Class for the list items (<li>). |
BreadcrumbItem Interface
interface BreadcrumbItem {
name: string;
url: string;
}