Breadcrumbs

Brödsmulor

Storybook

React Aria

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

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

<Breadcrumbs>
  <Breadcrumb>
    <Link href='/'>Start</Link>
  </Breadcrumb>
  <Breadcrumb>
    <Link href='/du-vill-forlanga'>Du vill förlänga</Link>
  </Breadcrumb>
  <Breadcrumb>
    <Link href='/du-vill-forlanga/studera'>Studera</Link>
  </Breadcrumb>
</Breadcrumbs>

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

Varianter

Inaktiverad länk

Sätt isDisabled på Link för att inaktivera en enskild brödsmula.

<Breadcrumbs>
  <Breadcrumb>
    <Link href='/'>Start</Link>
  </Breadcrumb>
  <Breadcrumb>
    <Link
      href='/du-vill-forlanga'
      isDisabled
    >
      Du vill förlänga
    </Link>
  </Breadcrumb>
  <Breadcrumb>
    <Link href='/du-vill-forlanga/studera'>Studera</Link>
  </Breadcrumb>
</Breadcrumbs>

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

Dynamiskt innehåll

Använd items tillsammans med en render-funktion för att rendera brödsmulor från dynamisk data.

const items = [
  { id: 1, label: 'Start' },
  { id: 2, label: 'Du vill förlänga' },
  { id: 3, label: 'Studera' },
]

<Breadcrumbs items={items}>
  {(item) => (
    <Breadcrumb id={item.id}>
      <Link href="#">{item.label}</Link>
    </Breadcrumb>
  )}
</Breadcrumbs>

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

onAction

Använd onAction på Breadcrumbs för att själv hantera interaktionen. Callbacken tar emot id för den klickade brödsmulan.

<Breadcrumbs onAction={id => console.log(id)}>
  <Breadcrumb id='start'>Start</Breadcrumb>
  <Breadcrumb id='forlanga'>Du vill förlänga</Breadcrumb>
  <Breadcrumb id='studera'>Studera</Breadcrumb>
</Breadcrumbs>

Kollapsade brödsmulor

Vid djupa navigationsträd kan det vara lämpligt att dölja mellanliggande brödsmulor bakom en ellipsis-meny. Här är ett exempel på hur detta kan implementeras:

import { Ellipsis } from 'lucide-react'
import type { Key } from 'react-aria-components'
import { Breadcrumbs, Breadcrumb, Link, Button, Menu, MenuItem, MenuPopover, MenuTrigger } from '@midas-ds/components'

export const CollapsedBreadcrumbs = () => {
  const handleAction = (id: Key) => console.log('Navigera till:', id)

  return (
    <Breadcrumbs onAction={handleAction}>
      <Breadcrumb id='start'>
        <Link>Start</Link>
      </Breadcrumb>
      <Breadcrumb>
        <MenuTrigger>
          <Button
            aria-label='Fler brödsmulor'
            variant='icon'
            size='medium'
          >
            <Ellipsis />
          </Button>
          <MenuPopover>
            <Menu onAction={handleAction}>
              <MenuItem id='produkter'>Produkter</MenuItem>
              <MenuItem id='kategori'>Kategori</MenuItem>
              <MenuItem id='underkategori'>Underkategori</MenuItem>
            </Menu>
          </MenuPopover>
        </MenuTrigger>
      </Breadcrumb>
      <Breadcrumb id='artikel'>
        <Link>Artikel</Link>
      </Breadcrumb>
    </Breadcrumbs>
  )
}

1. Start/
2. /
3. Artikel

Tillgänglighet

Navigationslandmärke

När brödsmulor används som huvudnavigation på en sida bör de placeras i ett <nav>-element med ett beskrivande aria-label. Detta skapar ett navigationslandmärke som hjälper användare med hjälpmedel att snabbt hitta till rätt del av sidan.

<nav aria-label='Brödsmulor'>
  <Breadcrumbs>
    <Breadcrumb>
      <Link href='/'>Start</Link>
    </Breadcrumb>
    <Breadcrumb>
      <Link href='/om'>Om oss</Link>
    </Breadcrumb>
  </Breadcrumbs>
</nav>

API

Breadcrumbs

Name	Type	Default	Description
className	string	'react-aria-Breadcrumbs'	The CSS className for the element.
isDisabled	boolean	-	Whether the breadcrumbs are disabled.
children	ReactNode | ((item: T) => ReactNode)	-	The contents of the collection.
items	Iterable<T>	-	Item objects in the collection.
dependencies	readonly any[]	-	Values that should invalidate the item cache when using dynamic collections.
style	CSSProperties	-	The inline style for the element.
slot	string | null	-	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.

Breadcrumb

Name	Type	Default	Description
className	ClassNameOrFunction<BreadcrumbRenderProps>	'react-aria-Breadcrumb'	The CSS className for the element. A function may be provided to compute the class based on component state.
id	Key	-	A unique id for the breadcrumb, which will be passed to onAction when the breadcrumb is pressed.
children	ChildrenOrFunction<BreadcrumbRenderProps>	-	The children of the component. A function may be provided to alter the children based on component state.
style	StyleOrFunction<BreadcrumbRenderProps>	-	The inline style for the element. A function may be provided to compute the style based on component state.