Breadcrumbs

Component

Storybook

Figma Demo

Guidelines

Breadcrumbs provide a navigational aid in user interfaces, allowing users to understand their location within the site hierarchy and navigate back to previous sections easily. They are typically used in applications and websites with complex structures and multiple levels of navigation.

Variations

• The full breadcrumb path should be shown by default and may wrap as needed.
• To prevent multiple lines of stacked breadcrumbs on smaller screen sizes, only the previous level of hierarchy is shown on mobile (699px and below).

Usage

• The Home link is included in the Breadcrumbs component and does not need to be supplied.
• The current page is identified by the page title (typically an H1) and is not represented in the breadcrumb.

Best Practices

• Consistent Positioning: Breadcrumbs should be placed at the top of the page, below the header, for easy visibility.
• Simple and Concise: Use clear, descriptive labels for each breadcrumb link. Avoid overly technical terms.
• Clickable Links: Ensure each breadcrumb link is clickable, allowing users to navigate to parent sections easily.

Accessibility

• Descriptive Links: Use meaningful text for each link, making it clear what each breadcrumb represents.

Component Specs

API

• links: Array<{ label: string; href: string }> | Default: []
  An array of objects containing the label and href for each breadcrumb link.

• testId: string | Default: undefined
  Optional test id for the component.

Example

<script>
  import { Breadcrumbs } from '@getprovi/craft-svelte';
</script>

<Breadcrumbs
  links={[
    { label: 'Home', href: '/' },
    { label: 'Products', href: '/products' },
    { label: 'Product Name', href: '/products/product-name' },
  ]}
  testId="custom-test-id"
/>

Types

interface Props {
	links: Array<{ label: string; href: string }>;
	testId?: string;
}