Breadcrumbs

Brödsmulor

Storybook

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 | ((values: DisclosureGroupRenderProps & { defaultChildren: ReactNode; }) => ReactNode)	-	The children of the component. A function may be provided to alter the children based on component state.
dependencies	readonly any[]	-	Values that should invalidate the item cache when using dynamic collections.
id	string	-	The element's unique identifier. See MDN.
className	string | ((values: DisclosureRenderProps & { defaultClassName: string; }) => string)	-	The CSS className for the element. A function may be provided to compute the class based on component state.
style	CSSProperties | ((values: DisclosureRenderProps & { defaultStyle: CSSProperties; }) => CSSProperties)	-	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.