Breadcrumb

A breadcrumbs is a list of links that help visualize the location of a page within the hierarchical structure of a site, it allows navigation up to any of the ancestors.

Usage

import { Breadcrumb } from '@harnessio/ui/components'

//...

return (
  <Breadcrumb.Root className="select-none">
    <Breadcrumb.List>
      <Breadcrumb.Item>
        <Breadcrumb.Link href="#">Lorem</Breadcrumb.Link>
      </Breadcrumb.Item>
      <Breadcrumb.Separator />
      <Breadcrumb.Ellipsis />
      <Breadcrumb.Separator />
      <Breadcrumb.Item>
        <Breadcrumb.Link href="#">Ipsum</Breadcrumb.Link>
      </Breadcrumb.Item>
      <Breadcrumb.Separator />
      <Breadcrumb.Page>Dolor</Breadcrumb.Page>
    </Breadcrumb.List>
  </Breadcrumb.Root>
)

Anatomy

All parts of the breadcrumb can be imported and composed as required.

<Breadcrumb.Root className="select-none">
  <Breadcrumb.List>
    <Breadcrumb.Item>
      <Breadcrumb.Link href="#">Lorem</Breadcrumb.Link>
    </Breadcrumb.Item>
    <Breadcrumb.Separator />
    <Breadcrumb.Ellipsis />
    <Breadcrumb.Separator />
    <Breadcrumb.Item>
      <Breadcrumb.Link href="#">Ipsum</Breadcrumb.Link>
    </Breadcrumb.Item>
    <Breadcrumb.Separator />
    <Breadcrumb.Page>Dolor</Breadcrumb.Page>
  </Breadcrumb.List>
</Breadcrumb.Root>

API Reference

Root

The Root component wraps the breadcrumb with a nav tag for use as page navigation.

Prop	Required	Default	Type
children	true
className	false

List

The List component adds styling to ensure the breadcrumb is displayed inline as a list.

<Breadcrumb.List>
  {/* Pass Breadcrumb.Item, Breadcrumb.Separator and Breadcrumb.Page elements as children */}
</Breadcrumb.List>

Prop	Required	Default	Type
children	true
className	false

Item

The Item component displays its contents as a node within the breadcrumb.

<Breadcrumb.Item>
  {/* Pass text, JSX elements or Breadcrumb.Link elements as children */}
</Breadcrumb.Item>

Prop	Required	Default	Type
children	true
className	false

Link

The Link component can be passed as a child to an Item component to display a clickable breadcrumb item.

<Breadcrumb.Item>
  <Breadcrumb.Link href="#">
    Lorem
  </Breadcrumb.Link>
</Breadcrumb.Item>

<Breadcrumb.Item>
  <Breadcrumb.Link asChild>
    <button onClick={handleLinkClick}>Click me</button>
  </Breadcrumb.Link>
</Breadcrumb.Item>

Prop	Required	Default	Type
href	false
children	true
asChild	false	false
className	false

Page

The Page component displays its contents as a node within the breadcrumb with styling to denote that it is the current page.

<Breadcrumb.Page>Lorem ipsum</Breadcrumb.Page>

Prop	Required	Default	Type
children	true
className	false

Separator

The Separator component displays a separator between the items of the breadcrumb.

<Breadcrumb.Separator />

<Breadcrumb.Item>
  Lorem ipsum
</Breadcrumb.Item>

<Breadcrumb.Separator>
  &gt;
</Breadcrumb.Separator>

Prop	Required	Default	Type
children	false	/
className	false

Ellipsis

The Ellipsis component displays an ellipsis for use when there are too many items to display.

<Breadcrumb.Ellipsis />

Prop	Required	Default	Type
className	false