Breadcrumbs

The <Breadcrumbs> component helps users to understand their current location within a website or app. It shows a sequence of clickable items, each representing a step or level in the hierarchy, making it easier to navigate back to previous pages or sections.

Anatomy

The <Breadcrumbs> component consists of breadcrumb items and separators, such as chevrons, arranged in a horizontal trail to represent a navigation path.

Appearance

The appearance of a component can be customized using the variant and size props. These props adjust the visual style and dimensions of the component, available values are based on the active theme.

Usage

<Breadcrumbs> are typically used to display a navigational hierarchy, showing the path from the homepage to the current page. Each Breadcrumbs.Item represents a step in this path and must include an href to define its destination. All items are rendered as links, allowing users to quickly navigate back to previous levels, reducing the number of clicks needed and improving the overall user experience.

import { Breadcrumbs, BreadcrumbsProps } from '@marigold/components';export default (props: BreadcrumbsProps) => (  <Breadcrumbs {...props}>    <Breadcrumbs.Item href="#">Home</Breadcrumbs.Item>    <Breadcrumbs.Item href="#">Events</Breadcrumbs.Item>    <Breadcrumbs.Item href="#">Music</Breadcrumbs.Item>  </Breadcrumbs>);

Collapsing Breadcrumbs

When the breadcrumb list exceeds the maximum number of visible items, it can collapse to show an ellipsis ("..."). This feature is helpful when dealing with deep navigation structures that may overwhelm the user.

import { Breadcrumbs } from '@marigold/components';export default () => (  <Breadcrumbs maxVisibleItems={4}>    <Breadcrumbs.Item href="#">Home</Breadcrumbs.Item>    <Breadcrumbs.Item href="#">Events</Breadcrumbs.Item>    <Breadcrumbs.Item href="#">Music</Breadcrumbs.Item>    <Breadcrumbs.Item href="#">Pop</Breadcrumbs.Item>    <Breadcrumbs.Item href="#">Freiburg im Breisgau</Breadcrumbs.Item>  </Breadcrumbs>);

As Navigation

Here's a revised version with a more supportive tone:

Using breadcrumbs as navigation

When breadcrumbs represent the primary or secondary navigation for a page, place them in a <nav> element with an appropriate aria-label (e.g. aria-label="Breadcrumbs"). This creates a navigation landmark that helps assistive technologies identify key sections of the page. To support a clearer page structure, keep the number of landmarks minimal and avoid using them for breadcrumbs in contexts like table rows or popovers.

import { Breadcrumbs } from '@marigold/components';export default () => (  <nav aria-label="Breadcrumbs">    <Breadcrumbs>      <Breadcrumbs.Item href="#">Home</Breadcrumbs.Item>      <Breadcrumbs.Item href="#">Events</Breadcrumbs.Item>      <Breadcrumbs.Item href="#">Music</Breadcrumbs.Item>    </Breadcrumbs>  </nav>);

Props

Breadcrumbs

Breadcrumbs.Item