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.
• They show an h1 title of the page by default, but can be hidden by setting the variant to minimal.

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, testId: 'single-link-test-id' }> | Default: []
  An array of objects containing the label and href for each breadcrumb link.

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

• title: string | Default: Title Optional title for the component. If a title is not needed, use the variant prop to set the title to minimal.

• variant: string | Default: default Optional variant for the component. If a title is not needed, use the variant prop to set the title to minimal.

Example

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

<Breadcrumbs
  links={[
    { label: 'Foundations', href: '/foundations', testId: 'foundations-link-test-id' },
    { label: 'Components Name', href: '/components', testId: 'components-link-test-id' },
  ]}
  testId="custom-test-id"
  title="Page Title"
  variant="minimal"
/>

Types

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