Breadcrumb navigation showing page hierarchy and path. Renders a semantic `<nav>` with an `<ol>` list of breadcrumb...

Breadcrumb navigation showing page hierarchy and path. Renders a semantic `<nav>` with an `<ol>` list of breadcrumb items to indicate the current page's position within a site hierarchy. Items are separated by right-arrow icons. The last item (current page) is not a link. **Typical usage**: ```html <ed-breadcrumbs> <ed-breadcrumbs-item href="/docs">Documentation</ed-breadcrumbs-item> <ed-breadcrumbs-item href="/docs/api">API Reference</ed-breadcrumbs-item> <ed-breadcrumbs-item>Current Page</ed-breadcrumbs-item> </ed-breadcrumbs> ``` **Child component (ed-breadcrumbs-item)**: - Renders as a link if `href` is provided - Renders as plain text if no `href` (for current page) - Automatically inserts right-arrow separator (except last item) - Supports `target` attribute for link behavior **Accessibility**: Semantic nav landmark with ordered list (`<ol>`) structure. Implicit breadcrumb pattern aid for screen readers.

<ed-breadcrumbs></ed-breadcrumbs>

Slots

Name Description
- `ed-breadcrumbs-item` children

Interactive Documentation

Full interactive examples, variant previews, accessibility audits, and the complete API reference are available in Storybook — generated directly from the component source code.

Source

packages/eddie-web-components/components/breadcrumbs/breadcrumbs.ts