Breadcrumbs

Breadcrumbs help users understand their current location within a website or application hierarchy and provide a quick way to navigate back to parent pages.

import {Breadcrumbs} from "@qualcomm-ui/react/breadcrumbs"

Overview

The root component should be labeled with aria-label="Breadcrumbs" to indicate that it's a breadcrumb navigation.
The first breadcrumb item is always the root item, and is typically reserved for the home page or base route of your application.
The last breadcrumb item represents the current page. Mark it with aria-current="page".
By default, Breadcrumbs.Item renders a <span> (non-link content). Pass the render prop when an item should navigate.

Breadcrumbs.Item renders a non-link <span> by default, which is appropriate for the current page item. Use the render prop to make an item navigable. In most cases this will be your router's link component. Fall back to a plain <a href> if you don't use a router. The following example uses React Router:

<Breadcrumbs.Root aria-label="Breadcrumbs">
  <Breadcrumbs.List>
    <Breadcrumbs.Item icon={Home} render={<Link to="/" />}>
      Home
    </Breadcrumbs.Item>
    <Breadcrumbs.Item render={<Link to="/components/overview" />}>
      Components
    </Breadcrumbs.Item>
    <Breadcrumbs.Item
      aria-current="page"
      render={<Link to="/components/breadcrumbs" />}
    >
      Breadcrumbs
    </Breadcrumbs.Item>
  </Breadcrumbs.List>
</Breadcrumbs.Root>

Emphasis (color)

Use the emphasis prop to change the color of the breadcrumbs.

<Breadcrumbs.Root aria-label="Breadcrumbs">
  <Breadcrumbs.List>
    <Breadcrumbs.Item icon={Home} render={<Link to="/" />}>
      Home
    </Breadcrumbs.Item>
    <Breadcrumbs.Item render={<Link to="/components/overview" />}>
      Components
    </Breadcrumbs.Item>
    <Breadcrumbs.Item aria-current="page">Breadcrumbs</Breadcrumbs.Item>
  </Breadcrumbs.List>
</Breadcrumbs.Root>

<Breadcrumbs.Root aria-label="Breadcrumbs" emphasis="neutral">
  <Breadcrumbs.List>
    <Breadcrumbs.Item icon={Home} render={<Link to="/" />}>
      Home
    </Breadcrumbs.Item>
    <Breadcrumbs.Item render={<Link to="/components/overview" />}>
      Components
    </Breadcrumbs.Item>
    <Breadcrumbs.Item aria-current="page">Breadcrumbs</Breadcrumbs.Item>
  </Breadcrumbs.List>
</Breadcrumbs.Root>

Sizes

Three sizes are available via the size prop: sm, md, and lg. The default size is md.

<Breadcrumbs.Root aria-label="Breadcrumbs" size="sm">
  <Breadcrumbs.List>
    <Breadcrumbs.Item icon={Home} render={<Link to="/" />}>
      Home
    </Breadcrumbs.Item>
    <Breadcrumbs.Item render={<Link to="/components/overview" />}>
      Components
    </Breadcrumbs.Item>
    <Breadcrumbs.Item aria-current="page">Breadcrumbs</Breadcrumbs.Item>
  </Breadcrumbs.List>
</Breadcrumbs.Root>

<Breadcrumbs.Root aria-label="Breadcrumbs" size="md">
  <Breadcrumbs.List>
    <Breadcrumbs.Item icon={Home} render={<Link to="/" />}>
      Home
    </Breadcrumbs.Item>
    <Breadcrumbs.Item render={<Link to="/components/overview" />}>
      Components
    </Breadcrumbs.Item>
    <Breadcrumbs.Item aria-current="page">Breadcrumbs</Breadcrumbs.Item>
  </Breadcrumbs.List>
</Breadcrumbs.Root>

<Breadcrumbs.Root aria-label="Breadcrumbs" size="lg">
  <Breadcrumbs.List>
    <Breadcrumbs.Item icon={Home} render={<Link to="/" />}>
      Home
    </Breadcrumbs.Item>
    <Breadcrumbs.Item render={<Link to="/components/overview" />}>
      Components
    </Breadcrumbs.Item>
    <Breadcrumbs.Item aria-current="page">Breadcrumbs</Breadcrumbs.Item>
  </Breadcrumbs.List>
</Breadcrumbs.Root>

Disabled Item

Use the disabled prop to disable a breadcrumb item.

<Breadcrumbs.Item disabled>Components</Breadcrumbs.Item>

Overflow

Use the Breadcrumbs.OverflowItem component to collapse intermediate breadcrumb items into a menu. The overflow trigger displays an ellipsis by default. Use the icon prop to add an icon, or provide your own trigger via Breadcrumbs.OverflowTrigger.

<Breadcrumbs.OverflowItem>
  <Menu.Item render={<Link to="/settings" />} value="settings">
    Settings
  </Menu.Item>
  <Menu.Item render={<Link to="/settings/account" />} value="account">
    Account
  </Menu.Item>
</Breadcrumbs.OverflowItem>

To provide additional context on hover, make Breadcrumbs.ItemTrigger a Tooltip trigger using the composite API.

<Breadcrumbs.Root aria-label="Breadcrumbs">
  <Breadcrumbs.List>
    <Breadcrumbs.ItemRoot>
      <Tooltip
        trigger={
          <Breadcrumbs.ItemTrigger render={<Link to="/" />}>
            <Breadcrumbs.ItemIcon icon={Home} />
            Home
          </Breadcrumbs.ItemTrigger>
        }
      >
        Navigate to home page
      </Tooltip>
      <Breadcrumbs.ItemSeparator />
    </Breadcrumbs.ItemRoot>

    <Breadcrumbs.ItemRoot>
      <Tooltip
        trigger={
          <Breadcrumbs.ItemTrigger
            render={<Link to="/components/overview" />}
          >
            Components
          </Breadcrumbs.ItemTrigger>
        }
      >
        Browse all components
      </Tooltip>
      <Breadcrumbs.ItemSeparator />
    </Breadcrumbs.ItemRoot>

    <Breadcrumbs.Item aria-current="page">Breadcrumbs</Breadcrumbs.Item>
  </Breadcrumbs.List>
</Breadcrumbs.Root>

Shortcuts

Item

The Breadcrumbs.Item component is a convenient shorthand for rendering each part of the breadcrumb item. The trigger renders a <span> by default; pass the render prop to swap it for an anchor or a router link component.

<Breadcrumbs.ItemRoot>
  <Breadcrumbs.ItemTrigger aria-current={ariaCurrent} render={render}>
    <Breadcrumbs.ItemIcon icon={icon} />
    {children}
  </Breadcrumbs.ItemTrigger>
  <Breadcrumbs.ItemSeparator />
</Breadcrumbs.ItemRoot>

OverflowItem

The Breadcrumbs.OverflowItem component is a convenient shorthand that composes a menu trigger with the overflow ellipsis. It's equivalent to the following:

<Breadcrumbs.OverflowItemRoot {...props}>
  <Menu.Root size={menuSize}>
    <Menu.Trigger>
      <Breadcrumbs.OverflowTrigger
        aria-label={ariaLabel}
        icon={icon}
        {...overflowTriggerProps}
      />
    </Menu.Trigger>
    <Portal>
      <Menu.Positioner>
        <Menu.Content>{children}</Menu.Content>
      </Menu.Positioner>
    </Portal>
  </Menu.Root>
  <Breadcrumbs.ItemSeparator icon={separator} {...separatorProps} />
</Breadcrumbs.OverflowItemRoot>

API

<Breadcrumbs.Root>

The root element of the breadcrumbs component. Renders a <nav> element by default.

Prop	Type	Default
emphasis Governs the color of the breadcrumb item text and icon.	\| 'primary' \| 'neutral'	'primary'
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)
size Governs the size of the breadcrumb item text and icon.	\| 'sm' \| 'md' \| 'lg'	'md'

emphasis

Type

| 'primary'
| 'neutral'

Description

Governs the color of the breadcrumb item text and icon.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

size

Type

| 'sm'
| 'md'
| 'lg'

Description

Governs the size of the breadcrumb item text and icon.

Attribute / Property	Value
`className`	'qui-breadcrumbs__root'
`data-size`	\| 'sm' \| 'md' \| 'lg'

<Breadcrumbs.List>

The list of breadcrumbs. Renders an <ol> element by default.

Prop	Type
children React children prop.	ReactNode
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

children

Type

ReactNode

Description

React children prop.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

Attribute / Property	Value
`className`	'qui-breadcrumbs__list'

<Breadcrumbs.Item>

Prop	Type	Default
aria-current The `aria-current` attribute, should be set to `page` when the item is the current page.	'page'
children React children prop.	ReactNode
disabled Controls the component's interactivity. If `true`, the component becomes unresponsive to input and is visually dimmed to indicate its disabled state.	boolean
icon The icon to display next to the item trigger.	\| LucideIcon \| ReactNode
itemIconProps Props applied to the item icon element.	BreadcrumbsItemIconProps
itemTriggerProps Props applied to the item trigger element.	BreadcrumbsItemTriggerProps
render Replaces the trigger element with an anchor, a router Link, or any other component. Omitting it renders a plain `<span>` (e.g. the current page). Learn more	\| Element \| (( props: object, ) => Element)
separator The separator element to render between items.	\| LucideIcon \| ReactNode	ChevronRight
separatorProps Props applied to the separator element.	BreadcrumbsItemSeparatorProps

aria-current

Type

'page'

Description

The aria-current attribute, should be set to page when the item is the current page.

children

Type

ReactNode

Description

React children prop.

disabled

Type

boolean

Description

Controls the component's interactivity. If true, the component becomes unresponsive to input and is visually dimmed to indicate its disabled state.

icon

Type

| LucideIcon
| ReactNode

Description

The icon to display next to the item trigger.

itemIconProps

Type

BreadcrumbsItemIconProps

Description

Props applied to the item icon element.

itemTriggerProps

Type

BreadcrumbsItemTriggerProps

Description

Props applied to the item trigger element.

render

Type

| Element
| ((
    props: object,
  ) => Element)

Description

Replaces the trigger element with an anchor, a router Link, or any other component. Omitting it renders a plain <span> (e.g. the current page). Learn more

separator

Type

| LucideIcon
| ReactNode

Description

The separator element to render between items.

separatorProps

Type

BreadcrumbsItemSeparatorProps

Description

Props applied to the separator element.

Attribute / Property	Value
`className`	'qui-breadcrumbs__item'
`data-disabled`

<Breadcrumbs.ItemIcon>

Prop	Type
icon ^* The icon or element to render before the item.	\| LucideIcon \| ReactNode
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

icon

Type

| LucideIcon
| ReactNode

Description

The icon or element to render before the item.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

Attribute / Property	Value
`className`	'qui-breadcrumbs__item-icon'
`data-emphasis`	\| 'primary' \| 'neutral'
`data-size`	\| 'sm' \| 'md' \| 'lg'

className

Value

'qui-breadcrumbs__item-icon'

data-emphasis

Value

| 'primary'
| 'neutral'

data-size

Value

| 'sm'
| 'md'
| 'lg'

<Breadcrumbs.ItemTrigger>

Prop	Type
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

Attribute / Property	Value
`className`	'qui-breadcrumbs__item-trigger'
`data-emphasis`	\| 'primary' \| 'neutral'
`data-size`	\| 'sm' \| 'md' \| 'lg'

className

Value

'qui-breadcrumbs__item-trigger'

data-emphasis

Value

| 'primary'
| 'neutral'

data-size

Value

| 'sm'
| 'md'
| 'lg'

<Breadcrumbs.ItemSeparator>

Prop	Type	Default
icon The separator element to render between items.	\| LucideIcon \| ReactNode	ChevronRight
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

icon

Type

| LucideIcon
| ReactNode

Description

The separator element to render between items.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

Attribute / Property	Value
`className`	'qui-breadcrumbs__separator'
`data-size`	\| 'sm' \| 'md' \| 'lg'

<Breadcrumbs.OverflowItem>

Prop	Type	Default
aria-label Accessible label for the overflow trigger button.	string	"Show more"
children Menu items to display in the overflow dropdown.	ReactNode
disabled Controls the component's interactivity. If `true`, the component becomes unresponsive to input and is visually dimmed to indicate its disabled state.	boolean
icon The icon to display next to the ellipsis.	\| LucideIcon \| ReactNode
overflowTriggerProps Props applied to the overflow trigger element.	BreadcrumbsOverflowTriggerProps
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)
separator The separator element to render after the overflow item.	\| LucideIcon \| ReactNode	ChevronRight
separatorProps Props applied to the separator element.	BreadcrumbsItemSeparatorProps

aria-label

Type

string

Description

Accessible label for the overflow trigger button.

children

Type

ReactNode

Description

Menu items to display in the overflow dropdown.

disabled

Type

boolean

Description

Controls the component's interactivity. If true, the component becomes unresponsive to input and is visually dimmed to indicate its disabled state.

icon

Type

| LucideIcon
| ReactNode

Description

The icon to display next to the ellipsis.

overflowTriggerProps

Type

BreadcrumbsOverflowTriggerProps

Description

Props applied to the overflow trigger element.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

separator

Type

| LucideIcon
| ReactNode

Description

The separator element to render after the overflow item.

separatorProps

Type

BreadcrumbsItemSeparatorProps

Description

Props applied to the separator element.

<Breadcrumbs.OverflowTrigger>

Prop	Type	Default
children React children prop.	ReactNode	"…"
icon The icon to display next to the ellipsis.	\| LucideIcon \| ReactNode
itemIconProps Props applied to the item icon element.	BreadcrumbsItemIconProps
render Allows you to replace the component's HTML element with a different tag or component. Learn more	\| ReactElement \| (( props: object, ) => ReactElement)

children

Type

ReactNode

Description

React children prop.

icon

Type

| LucideIcon
| ReactNode

Description

The icon to display next to the ellipsis.

itemIconProps

Type

BreadcrumbsItemIconProps

Description

Props applied to the item icon element.

render

Type

| ReactElement
| ((
    props: object,
  ) => ReactElement)

Description

Allows you to replace the component's HTML element with a different tag or component. Learn more

Attribute / Property	Value
`className`	'qui-breadcrumbs__item-trigger qui-breadcrumbs__overflow-trigger'
`data-emphasis`	\| 'primary' \| 'neutral'
`data-size`	\| 'sm' \| 'md' \| 'lg'

className

Value

'qui-breadcrumbs__item-trigger qui-breadcrumbs__overflow-trigger'

data-emphasis

Value

| 'primary'
| 'neutral'

data-size

Value

| 'sm'
| 'md'
| 'lg'

Last updated on Apr 30, 2026 by Ryan Bower

Text Badge

Button

Breadcrumbs

Overview

Examples

Links

Emphasis (color)

Sizes

Disabled Item

Overflow

Tooltip

Shortcuts

Item

OverflowItem

API