Breadcrumb

Shows where the current page sits in a hierarchy.

Breadcrumb.tsx

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator
} from 'alinea/components'

export function BreadcrumbExample() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#pages">Pages</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#blog">Blog</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Caring for linen</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  )
}

Props

`<Breadcrumb>`

Navigation landmark that shows the path to the current page

PropTypeDefaultDescription

children*ReactNodeDefault –

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.

`<BreadcrumbList>`

PropTypeDefaultDescription

children*ReactNodeDefault –

Also accepts className and style and data-* attributes.

`<BreadcrumbItem>`

PropTypeDefaultDescription

children*ReactNodeDefault –

Also accepts className and style and data-* attributes.

`<BreadcrumbLink>`

PropTypeDefaultDescription

hrefstringDefault –

targetstringDefault –

relstringDefault –

asChildbooleanDefault –Merge the link styling onto the single child element

onClick(event: MouseEvent<HTMLAnchorElement>) => voidDefault –

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.

`<BreadcrumbPage>`

The current page, the last item of the list

PropTypeDefaultDescription

children*ReactNodeDefault –

Also accepts className and style and data-* attributes.

`<BreadcrumbSeparator>`

PropTypeDefaultDescription

childrenReactNodeDefault –Replaces the default chevron

Also accepts className and style and data-* attributes.

`<BreadcrumbEllipsis>`

Stands in for collapsed items

Accepts className and style and data-* attributes.