useBreadcrumbs

Provides the behavior and accessibility implementation for a breadcrumbs component. Breadcrumbs display a hierarchy of links to the current page or resource in an application.

Example

Link.css

Example

Link.css

import {Breadcrumbs, Breadcrumb} from './Breadcrumbs';

<Breadcrumbs>
  <Breadcrumb onPress={() => alert('Pressed Folder 1')}>Folder 1</Breadcrumb>
  <Breadcrumb onPress={() => alert('Pressed Folder 2')}>Folder 2</Breadcrumb>
  <Breadcrumb>Folder 3</Breadcrumb>
</Breadcrumbs>

API

<Breadcrumbs>
  <Breadcrumb>
    <Link />
  </Breadcrumb>
</Breadcrumbs>

useBreadcrumbs(props: AriaBreadcrumbsProps): BreadcrumbsAriauseBreadcrumbItem(props: AriaBreadcrumbItemProps, ref: RefObject<FocusableElement | null>): BreadcrumbItemAria

AriaBreadcrumbsProps

Name	Type

BreadcrumbsAria

Name	Type
`navProps`	`DOMAttributes`
Props for the breadcrumbs navigation element.

AriaBreadcrumbItemProps

Name	Type	Default
`elementType`	`string`	Default: `'a'`
The HTML element used to render the breadcrumb link, e.g. 'a', or 'span'.
`isCurrent`	`boolean`	Default: —
Whether the breadcrumb item represents the current page.
`isDisabled`	`boolean`	Default: —
Whether the breadcrumb item is disabled.
`children`	`ReactNode`	Default: —
The contents of the breadcrumb item.

BreadcrumbItemAria

Name	Type
`itemProps`	`DOMAttributes`
Props for the breadcrumb item link element.