eds-breadcrumb

Explore the Interactive Component

Use the playground below to experiment with the component. Click the button to view the full Storybook deployment for additional examples and configurations.

See It in Use with Code

Check out the practical implementations of component.

Passing Items as a JSON String (Plain HTML)

When you’re using the component directly in HTML (or in frameworks that don’t support property binding), you must pass the items as a JSON string:

Here the items attribute is a string. The getter will parse it into an array of objects.

Passing Items as an Object (Using Property Binding)

In frameworks like React or Angular, you can take advantage of property binding to pass the items directly as an object:

In React

In Vue 3

Overview

EdsBreadcrumb is a navigational component that displays the user’s current location within a hierarchy of pages. This component is especially useful for providing context and enhancing user navigation experiences.

Key features include:

Customizable breadcrumb items passed as a JSON string or array, each with a label and url.
Configurable visual intent for breadcrumb links to match various design themes.
Automatic parsing of breadcrumb items with graceful handling of invalid JSON formats.
Emits custom events for context tracking on each breadcrumb link after the component loads.

The component renders as a series of links, with the last item disabled and marked as the current page.

Properties

Property	Attribute	Description	Type	Default
`intent`	`intent`	The visual style or intent of the breadcrumb links. Options include: ‘ghost’, ‘strong’, ‘weak’, ‘inverse’, ‘underline’. Default is ‘ghost’.	`"ghost" \| "inverse" \| "strong" \| "underline" \| "weak"`	`'ghost'`
`items`	`items`	An array of breadcrumb items. It can be passed as a JSON string or an array of objects. Each object should contain the properties: `label` (string) and `url` (string). Example: ‘[{“label”: “Home”, “url”: “/”}, {“label”: “Products”, “url”: “/products”}]’	`Link[] \| string`	`[]`

Dependencies

Depends on

Graph

graph TD;
  eds-breadcrumb --> eds-link
  eds-breadcrumb --> eds-icon-wrapper
  eds-link --> eds-icon-wrapper
  style eds-breadcrumb fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS