Breadcrumb

The Breadcrumb component renders a hierarchical navigation tree. For longer lists, an optional BreadcrumbContextMenu is available as a keyboard accessible component that allows all links to be rendered in narrow screen space.

There are five components available in the hv-ui breadcrumb package:

• Breadcrumb: wrapper that sets the variant
• BreadcrumbContextMenu: renders some links in a hidden menu
• BreadcrumbItemContextMenu: wrapper for items in the context menu
• BreadcrumbItem: wrapper for a visible breadcrumb item
• BreadcrumbItemCurrentPage: wrapper for the current page item

Examples

Default Variant with Context Menu

Preview

Code

tip

If using this component in a NextJS app, replace the <a> element used in this code example with the NextJS Link component.

import {
    Breadcrumb,
    BreadcrumbContextMenu,
    BreadcrumbItem,
    BreadcrumbItemContextMenu,
    BreadcrumbItemCurrentPage,
} from '@hv/ui/breadcrumb';

<Breadcrumb
  aria-label='breadcrumb'
  className='self-center md:self-start'
>
  <BreadcrumbItem>
    <a href='/' title='go to home'>Home</a>
    </BreadcrumbItem>
    <BreadcrumbContextMenu title='More links'>
      <BreadcrumbItemContextMenu>
        <a href='/category' title='go to category'>Category</a>
      </BreadcrumbItemContextMenu>
      <BreadcrumbItemContextMenu>
        <a href='/category' title='go to category'>Category</a>
      </BreadcrumbItemContextMenu>
                <BreadcrumbItemContextMenu>
        <a href='/category' title='go to category'>Category</a>
      </BreadcrumbItemContextMenu>
    </BreadcrumbContextMenu>
    <BreadcrumbItem>
        <a href='/category' title='go to category'>Category</a>
    </BreadcrumbItem>
  <BreadcrumbItemCurrentPage>
    Current Page
  </BreadcrumbItemCurrentPage>
</Breadcrumb>

Large Variant

Preview

Code

tip

If using this component in a NextJS app, replace the <a> element used in this code example with the NextJS Link component.

import {
    Breadcrumb,
    BreadcrumbItem,
    BreadcrumbItemCurrentPage,
} from '@hv/ui/breadcrumb';

<Breadcrumb
  aria-label='breadcrumb'
  className='self-center md:self-start'
  size='lg'
>
  <BreadcrumbItem>
    <a href='/' title='go to home'>Home</a>
    </BreadcrumbItem>
    <BreadcrumbItem>
        <a href='/category' title='go to category'>Category</a>
    </BreadcrumbItem>
  <BreadcrumbItemCurrentPage>
    Current Page
  </BreadcrumbItemCurrentPage>
</Breadcrumb>

Customization

The approach for customization will vary depending on if the customization is intended to be global for all consumers of the UI component or if it is only an override for a particular instance.

• If the customization is necessary for all use cases, update the component source code in the UI library package directly.
• If the customization is needed for a new use case, consider adding a new variant to the component source code in the UI library package.
• Otherwise, you can pass className overrides on the Breadcrumb or the BreadcrumbContextMenu content.