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 {BreadcrumbsModule} from "@qualcomm-ui/angular/breadcrumbs"

Overview

The root element 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.
If the current page item is a link, apply aria-current="page" to the <a q-breadcrumb-item-trigger>.
If the current page item should not navigate, omit the link trigger and apply aria-current="page" to the breadcrumb item.

Each item renders non-link content by default. For navigable items, provide an explicit <a q-breadcrumb-item-trigger> with href or routerLink. Leaving the trigger non-link is appropriate for the current page item.

<nav aria-label="Breadcrumbs" q-breadcrumbs-root>
  <ol q-breadcrumbs-list>
    <li q-breadcrumb-item>
      <a q-breadcrumb-item-trigger routerLink="/">
        <svg q-breadcrumb-item-icon qIcon="Home"></svg>
        Home
      </a>
    </li>
    <li q-breadcrumb-item>
      <a q-breadcrumb-item-trigger routerLink="/components/overview">
        Components
      </a>
    </li>
    <li q-breadcrumb-item>
      <a
        aria-current="page"
        q-breadcrumb-item-trigger
        routerLink="/components/breadcrumbs"
      >
        Breadcrumbs
      </a>
    </li>
  </ol>
</nav>

Emphasis (color)

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

<nav aria-label="Breadcrumbs" emphasis="primary" q-breadcrumbs-root>
  <ol q-breadcrumbs-list>
    <li q-breadcrumb-item>
      <a q-breadcrumb-item-trigger routerLink="/">
        <svg q-breadcrumb-item-icon qIcon="Home"></svg>
        Home
      </a>
    </li>
    <li q-breadcrumb-item>
      <a q-breadcrumb-item-trigger routerLink="/components/overview">
        Components
      </a>
    </li>
    <li aria-current="page" q-breadcrumb-item>Breadcrumbs</li>
  </ol>
</nav>

Sizes

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

<nav aria-label="Breadcrumbs" q-breadcrumbs-root size="lg">
  <ol q-breadcrumbs-list>
    <li q-breadcrumb-item>
      <a href="/" q-breadcrumb-item-trigger>
        <svg q-breadcrumb-item-icon qIcon="Home"></svg>
        Home
      </a>
    </li>
    <li q-breadcrumb-item>
      <a href="/components/overview" q-breadcrumb-item-trigger>
        Components
      </a>
    </li>
    <li aria-current="page" q-breadcrumb-item>Breadcrumbs</li>
  </ol>
</nav>

Disabled Item

Use the disabled input to disable a breadcrumb item.

<nav aria-label="Breadcrumbs" q-breadcrumbs-root>
  <ol q-breadcrumbs-list>
    <li q-breadcrumb-item>
      <a q-breadcrumb-item-trigger routerLink="/">
        <svg q-breadcrumb-item-icon qIcon="Home"></svg>
        Home
      </a>
    </li>
    <li disabled q-breadcrumb-item>Components</li>
    <li aria-current="page" q-breadcrumb-item>Breadcrumbs</li>
  </ol>
</nav>

Overflow

Use the q-breadcrumb-overflow-item component to collapse intermediate breadcrumb items into a menu. The overflow trigger displays an ellipsis by default. Use the icon input to add an icon, or provide your own trigger via q-breadcrumb-overflow-trigger.

<li q-breadcrumb-overflow-item>
  <a q-menu-item routerLink="/settings" value="settings">Settings</a>
  <a q-menu-item routerLink="/settings/account" value="account">
    Account
  </a>
</li>

To provide additional context on hover, add a tooltip to a breadcrumb item by wrapping its trigger with a Tooltip and apply q-tooltip-trigger to it.

<nav aria-label="Breadcrumbs" q-breadcrumbs-root>
  <ol q-breadcrumbs-list>
    <li q-breadcrumb-item>
      <div q-tooltip>
        <a q-breadcrumb-item-trigger q-tooltip-trigger routerLink="/">
          <svg q-breadcrumb-item-icon qIcon="Home"></svg>
          Home
        </a>
        Navigate to home page
      </div>
    </li>
    <li q-breadcrumb-item>
      <div q-tooltip>
        <a
          q-breadcrumb-item-trigger
          q-tooltip-trigger
          routerLink="/components/overview"
        >
          Components
        </a>
        Browse all components
      </div>
    </li>
    <li aria-current="page" q-breadcrumb-item>Breadcrumbs</li>
  </ol>
</nav>

API

q-breadcrumbs-root

Prop	Type	Default
emphasis Governs the color of the breadcrumb item text and icon.	\| 'primary' \| 'neutral'	'primary'
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.

size

Type

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

Description

Governs the size of the breadcrumb item text and icon.

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

q-breadcrumbs-list

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

Prop	Type	Default
disabled Controls the component's interactivity. If `true`, the component becomes unresponsive to input and is visually dimmed to indicate its disabled state.	boolean
separator The separator element to render between items.	\| LucideIconData \| string	ChevronRight

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.

separator

Type

| LucideIconData
| string

Description

The separator element to render between items.

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

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

class

Value

'qui-breadcrumbs__item-icon'

data-emphasis

Value

| 'primary'
| 'neutral'

data-size

Value

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

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

class

Value

'qui-breadcrumbs__item-trigger'

data-emphasis

Value

| 'primary'
| 'neutral'

data-size

Value

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

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

Prop	Type	Default
anchorPoint The positioning point for the menu. Can be set by the context menu trigger or the button trigger.	{ x: number y: number }
ariaLabel Accessible label for the overflow trigger button.	string	'Show more'
closeOnSelect Whether to close the menu when an option is selected	boolean	true
composite Whether the menu is composed with other composite widgets like a combobox or tabs	boolean	true
defaultHighlightedValue The initial highlighted value of the menu item when rendered. Use when you don't need to control the highlighted value of the menu item.	string
defaultOpen The initial open state of the menu when rendered. Use when you don't need to control the open state of the menu.	boolean
dir The document's text/writing direction.	'ltr' \| 'rtl'	"ltr"
disabled Controls the component's interactivity. If `true`, the component becomes unresponsive to input and is visually dimmed to indicate its disabled state.	boolean
getRootNode A root node to correctly resolve the Document in custom environments. i.e., Iframes, Electron.	() => \| Node \| ShadowRoot \| Document
highlightedValue The controlled highlighted value of the menu item.	string
icon The icon to display next to the ellipsis.	\| LucideIconData \| string
id id attribute. If omitted, a unique identifier will be generated for accessibility.)	string
immediate Whether to synchronize the present change immediately or defer it to the next frame.	boolean	false
lazyMount When true, the component will not be rendered in the DOM until it becomes visible or active.	boolean	false
loopFocus Whether to loop the keyboard navigation.	boolean	false
open The controlled open state of the menu	boolean
positioning The options used to dynamically position the menu	PositioningOptions
present The controlled presence of the node.	boolean
separator The separator element to render between items.	\| LucideIconData \| string	ChevronRight
skipAnimationOnMount Whether to allow the initial presence animation.	boolean	false
typeahead Whether the pressing printable characters should trigger typeahead navigation	boolean	true
unmountOnExit When true, the component will be completely removed from the DOM when it becomes inactive or hidden, rather than just being hidden with CSS.	boolean	false
(escapeKeyDown) Function called when the escape key is pressed	KeyboardEvent
(exitCompleted) Function called when the animation ends in the closed state	void
(focusOutside) Function called when the focus is moved outside the component	CustomEvent<{ event?: E }>
(highlightChanged) Function called when the highlighted menu item changes.	string
(interactOutside) Function called when an interaction happens outside the component	\| CustomEvent<{event?: E}> \| CustomEvent<{event?: E}>
(navigate) Function to navigate to the selected item if it's an anchor element	{ href: string node: HTMLAnchorElement value: string }
(openChanged) Function called when the open state changes	boolean
(pointerDownOutside) Function called when the pointer is pressed down outside the component	CustomEvent<{ event?: E }>
(requestDismissed) Function called when this layer is closed due to a parent layer being closed	CustomEvent<{ originalIndex: number originalLayer: HTMLElement targetIndex: number targetLayer: HTMLElement }>
(selected) Function called when a menu item is selected.	string

anchorPoint

Type

{
  x: number
  y: number
}

Description

The positioning point for the menu. Can be set by the context menu trigger or the button trigger.

ariaLabel

Type

string

Description

Accessible label for the overflow trigger button.

closeOnSelect

Type

boolean

Description

Whether to close the menu when an option is selected

composite

Type

boolean

Description

Whether the menu is composed with other composite widgets like a combobox or tabs

defaultHighlightedValue

Type

string

Description

The initial highlighted value of the menu item when rendered. Use when you don't need to control the highlighted value of the menu item.

defaultOpen

Type

boolean

Description

The initial open state of the menu when rendered. Use when you don't need to control the open state of the menu.

dir

Type

'ltr' | 'rtl'

Description

The document's text/writing direction.

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.

getRootNode

Type

() =>
| Node
| ShadowRoot
| Document

Description

A root node to correctly resolve the Document in custom environments. i.e., Iframes, Electron.

highlightedValue

Type

string

Description

The controlled highlighted value of the menu item.

icon

Type

| LucideIconData
| string

Description

The icon to display next to the ellipsis.

Type

string

Description

id attribute. If omitted, a unique identifier will be generated for accessibility.)

immediate

Type

boolean

Description

Whether to synchronize the present change immediately or defer it to the next frame.

lazyMount

Type

boolean

Description

When true, the component will not be rendered in the DOM until it becomes visible or active.

loopFocus

Type

boolean

Description

Whether to loop the keyboard navigation.

open

Type

boolean

Description

The controlled open state of the menu

positioning

Type

PositioningOptions

Description

The options used to dynamically position the menu

present

Type

boolean

Description

The controlled presence of the node.

separator

Type

| LucideIconData
| string

Description

The separator element to render between items.

skipAnimationOnMount

Type

boolean

Description

Whether to allow the initial presence animation.

typeahead

Type

boolean

Description

Whether the pressing printable characters should trigger typeahead navigation

unmountOnExit

Type

boolean

Description

When true, the component will be completely removed from the DOM when it becomes inactive or hidden, rather than just being hidden with CSS.

(escapeKeyDown)

Type

KeyboardEvent

Description

Function called when the escape key is pressed

(exitCompleted)

Type

void

Description

Function called when the animation ends in the closed state

(focusOutside)

Type

CustomEvent<{
  event?: E
}>

Description

Function called when the focus is moved outside the component

(highlightChanged)

Type

string

Description

Function called when the highlighted menu item changes.

(interactOutside)

Type

| CustomEvent<{event?: E}>
| CustomEvent<{event?: E}>

Description

Function called when an interaction happens outside the component

(navigate)

Type

{
  href: string
  node: HTMLAnchorElement
  value: string
}

Description

Function to navigate to the selected item if it's an anchor element

(openChanged)

Type

boolean

Description

Function called when the open state changes

(pointerDownOutside)

Type

CustomEvent<{
  event?: E
}>

Description

Function called when the pointer is pressed down outside the component

(requestDismissed)

Type

CustomEvent<{
  originalIndex: number
  originalLayer: HTMLElement
  targetIndex: number
  targetLayer: HTMLElement
}>

Description

Function called when this layer is closed due to a parent layer being closed

(selected)

Type

string

Description

Function called when a menu item is selected.

Prop	Type
id id attribute. If omitted, a unique identifier will be generated for accessibility.	string

Type

string

Description

id attribute. If omitted, a unique identifier will be generated for accessibility.

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

class

Value

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

data-emphasis

Value

| 'primary'
| 'neutral'

data-size

Value

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

Last updated on May 2, 2026 by Ryan Bower

Text Badge

Button

Breadcrumbs

Overview

Examples

Links

Emphasis (color)

Sizes

Disabled Item

Overflow

Tooltip

API