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.

Overview

Usage

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

//...

return (
  <Breadcrumb.Root>
    <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>
  <Breadcrumb.List>
    <Breadcrumb.Item>
      <Breadcrumb.RootInteractive />  {/* Interactive root with avatar */}
    </Breadcrumb.Item>
    <Breadcrumb.Separator />
    <Breadcrumb.Item>
      <Breadcrumb.Link />        {/* Clickable link */}
    </Breadcrumb.Item>
    <Breadcrumb.Separator />
    <Breadcrumb.Ellipsis />      {/* Truncation indicator with dropdown */}
    <Breadcrumb.Separator />
    <Breadcrumb.Page />          {/* Current page (non-clickable) */}
  </Breadcrumb.List>
  <Breadcrumb.Copy />            {/* Copy path button (outside List) */}
</Breadcrumb.Root>

Components

Item

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

Link

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

Page

The Page component displays the current page (non-clickable, bold text).

Ellipsis

The Ellipsis component displays a truncation indicator. Click to show a dropdown with hidden items.

Copy

The Copy component displays a copy button to copy the breadcrumb path.

RootInteractive

The RootInteractive component displays an interactive root element with an avatar and dropdown chevron. Useful for header navigation.

API Reference

Prop	Required	Default	Type
Root.size	false	sm
Item.prefixIcon	false
Link.href	false
Link.prefixIcon	false
Link.asChild	false	false
Page.prefixIcon	false
Separator.children	false	/
Ellipsis.items	true
Ellipsis.onItemSelect	false
Copy.name	true
RootInteractive.size	false	sm
RootInteractive.isRootOnly	false	false
RootInteractive.avatar	false