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

Riktlinjer

Breadcrumbs ska inte användas som huvudnavigation på en sida. De är endast avsedda att användas som sekundär navigation för att visa användaren var den är i ett navigationsträd, inte för att navigera till andra delar av webbplatsen.

Beteenden

Overflow

Om det är fler än fyra breadcrumbs eller om alla breadcrumbs inte får plats på en rad ska alla brödsmulor utom första och sista kollapsas till en meny med Button som har variant='icon', size='medium' och ikonen <Ellipsis> som trigger.

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

Tillstånd

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

Implementering

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>

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.
render	DOMRenderFunction<"ol", undefined>	-	Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>). Only a single root DOM element can be rendered (no fragments). You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.

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.
render	DOMRenderFunction<"li", BreadcrumbRenderProps>	-	Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>). Only a single root DOM element can be rendered (no fragments). You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.