Breadcrumbs

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 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

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

Sizes

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

Brand

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

Links

Apply the routerLink directive to a breadcrumb item's trigger to make it a link.

Brand

<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>
      <a routerLink="/components">Components</a>
    </li>
    <li q-breadcrumb-item>
      <a
        aria-current="page"
        q-breadcrumb-item-trigger
        routerLink="/components/breadcrumbs"
      >
        Breadcrumbs
      </a>
    </li>
  </ol>
</nav>

Disabled Item

Use the disabled prop to disable a breadcrumb item.

Brand

<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 q-breadcrumb-item>
      <a
        aria-current="page"
        q-breadcrumb-item-trigger
        routerLink="/components/breadcrumbs"
      >
        Breadcrumbs
      </a>
    </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
`className`	'qui-breadcrumbs__root'
`data-size`	\| 'sm' \| 'md' \| 'lg'

q-breadcrumbs-list

Attribute / Property	Value
`className`	'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
`className`	'qui-breadcrumbs__item'
`data-disabled`

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'

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'

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

Accordion

Collapsible