Breadcrumbs

Brödsmulor

Storybook

React Aria

Komponent som används för att visa användaren var den är i ett djupt navigationsträd.

import { Breadcrumbs } from '@midas-ds/components'

<Breadcrumbs
  items={[
    { href: '/', title: 'Start' },
    { href: '/du-vill-forlanga', title: 'Du vill förlänga' },
    { href: '/du-vill-forlanga/studera', title: 'Studera' },
  ]}
/>

1. Start
2. Du vill förlänga
3. Studera

Varianter

Förbjudna val

Använd prop isDisabled om du vill förbjuda vissa val

<Breadcrumbs
  items={[
    { href: '/', title: 'Start' },
    { href: '/du-vill-forlanga', title: 'Du vill förlänga', isDisabled: true },
    { href: '/du-vill-forlanga/studera', title: 'Studera' },
  ]}
/>

1. Start
2. Du vill förlänga
3. Studera

API

Name	Type	Default	Description
items *	T[]	-	Item objects in the collection.
isDisabled	boolean	-	Whether the breadcrumbs are disabled.
children	ReactNode | ((item: T) => ReactNode)	-	The contents of the collection.
dependencies	readonly any[]	-	Values that should invalidate the item cache when using dynamic collections.
className	ClassNameOrFunction<DisclosureRenderProps>	-	The CSS className for the element. A function may be provided to compute the class based on component state.
style	StyleOrFunction<DisclosureRenderProps>	-	The inline style for the element. A function may be provided to compute the style based on component state.
slot	string	-	A slot name for the component. Slots allow the component to receive props from a parent component. An explicit null value indicates that the local props completely override all props received from a parent.