Breadcrumbs

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 is always the active item.
The last breadcrumb item should always be annotated with the aria-current="page" attribute.

Examples

Emphasis (color)

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

Brand

<Breadcrumbs.Root aria-label="Breadcrumbs">
  <Breadcrumbs.List>
    <Breadcrumbs.Item icon={Home}>Home</Breadcrumbs.Item>
    <Breadcrumbs.Item>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}>Home</Breadcrumbs.Item>
    <Breadcrumbs.Item>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.

Brand

<Breadcrumbs.Root aria-label="Breadcrumbs" size="sm">
  <Breadcrumbs.List>
    <Breadcrumbs.Item icon={Home}>Home</Breadcrumbs.Item>
    <Breadcrumbs.Item>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}>Home</Breadcrumbs.Item>
    <Breadcrumbs.Item>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}>Home</Breadcrumbs.Item>
    <Breadcrumbs.Item>Components</Breadcrumbs.Item>
    <Breadcrumbs.Item aria-current="page">Breadcrumbs</Breadcrumbs.Item>
  </Breadcrumbs.List>
</Breadcrumbs.Root>

Links

Use the render prop on the <Breadcrumbs.Item> component to change the root element to your framework's link component. The following example uses React Router:

Brand

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

Disabled Item

Use the disabled prop to disable a breadcrumb item.

Brand

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

Shortcuts

Item

The Breadcrumbs.Item component is a convenient shorthand for rendering each part of the breadcrumb item. It's equivalent to the following:

<Breadcrumbs.ItemRoot {...props}>
  <Breadcrumbs.ItemTrigger
    aria-current={ariaCurrent}
    render={render}
    {...itemTriggerProps}
  >
    {icon ? <Breadcrumbs.ItemIcon icon={icon} {...itemIconProps} /> : null}
    {children}
  </Breadcrumbs.ItemTrigger>
  <Breadcrumbs.ItemSeparator icon={separator} {...separatorProps} />
</Breadcrumbs.ItemRoot>

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 Allows you to replace the component's HTML element with a different tag, or compose it with another component. 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

Allows you to replace the component's HTML element with a different tag, or compose it with another component. 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'

Accordion

Collapsible