Breadcrumbs

The Breadcrumbs component creates a horizontal list of links, truncating the list to fit on a single line.

Needs Improvement

There is more work to be done on this component–it needs to allow the collapsed breadcrumbs to be displaed when the ... is clicked or tapped.

Polymorphic Component

By default, content is rendered inside a <nav>, but this can be overriden by passing any valid tag name or component with the as prop.

Examples

Basic Breadcrumbs

Any Breadcrumb without an href will display as plain text and not a link.

(Resize the box to see the breadcrumbs collapse.)

import { Breadcrumbs, Breadcrumb } from '@curology/ui-components-web/react/Breadcrumbs';

<Breadcrumbs>
  <Breadcrumb href="./">Home</Breadcrumb>
  <Breadcrumb href="./category">Category</Breadcrumb>
  <Breadcrumb href="./category/child">Child Page</Breadcrumb>
  <Breadcrumb>
    Another Child Page
  </Breadcrumb>
</Breadcrumbs>

Props

BreadcrumbsProps

Name	Type	Default Value	Required	Description
All attributes of a <nav />

BreadcrumbProps

Name	Type	Default Value	Required	Description
All attributes of <button />, or <a />