Breadcrumbs

Show hierarchy and navigational context for a user's location within an application.

import type { PropsOf } from '@builder.io/qwik';
import { component$, useStyles$ } from '@builder.io/qwik';
import { Breadcrumbs } from 'qwik-primitives';
import styles from './styles.css?inline';

const CaretRightIcon = component$<PropsOf<'svg'>>((props) => {
  return (
    <svg
      aria-hidden="true"
      focusable="false"
      width="15"
      height="15"
      viewBox="0 0 15 15"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      {...props}
    >
      <path
        d="M6.18194 4.18185C6.35767 4.00611 6.6426 4.00611 6.81833 4.18185L9.81833 7.18185C9.90272 7.26624 9.95013 7.3807 9.95013 7.50005C9.95013 7.6194 9.90272 7.73386 9.81833 7.81825L6.81833 10.8182C6.6426 10.994 6.35767 10.994 6.18194 10.8182C6.0062 10.6425 6.0062 10.3576 6.18194 10.1819L8.86374 7.50005L6.18194 4.81825C6.0062 4.64251 6.0062 4.35759 6.18194 4.18185Z"
        fill="currentColor"
        fill-rule="evenodd"
        clip-rule="evenodd"
      ></path>
    </svg>
  );
});

export const BreadcrumbsDemo = component$(() => {
  useStyles$(styles);

  return (
    <Breadcrumbs.Root class="breadcrumbs-root">
      <Breadcrumbs.List class="breadcrumbs-list">
        <Breadcrumbs.Item class="breadcrumbs-item">
          <Breadcrumbs.Link href="#" class="breadcrumbs-link">
            Docs
          </Breadcrumbs.Link>
          <Breadcrumbs.Separator class="breadcrumbs-separator">
            <CaretRightIcon height={16} width={16} />
          </Breadcrumbs.Separator>
        </Breadcrumbs.Item>

        <Breadcrumbs.Item class="breadcrumbs-item">
          <Breadcrumbs.Link href="#" class="breadcrumbs-link">
            Components
          </Breadcrumbs.Link>
          <Breadcrumbs.Separator class="breadcrumbs-separator">
            <CaretRightIcon height={16} width={16} />
          </Breadcrumbs.Separator>
        </Breadcrumbs.Item>

        <Breadcrumbs.Item class="breadcrumbs-item">
          <Breadcrumbs.Page class="breadcrumbs-page">Breadcrumbs</Breadcrumbs.Page>
        </Breadcrumbs.Item>
      </Breadcrumbs.List>
    </Breadcrumbs.Root>
  );
});

.breadcrumbs-root {
  padding: 0.75rem;
  background-color: #ffffff;
  border: 1px solid #00073527;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  letter-spacing: 0em;
}

.breadcrumbs-list {
  all: unset;
  list-style: none;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.breadcrumbs-item {
  display: flex;
  align-items: center;
  column-gap: 0.25rem;
}

.breadcrumbs-link {
  all: unset;
  cursor: pointer;
  color: #0002119d;
  text-decoration-line: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: #0009321f;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.breadcrumbs-link:hover {
  text-decoration-line: underline;
}

.breadcrumbs-link:focus-visible {
  outline: 2px solid #b98bff;
  outline-offset: 1px;
  text-decoration-line: none;
  border-radius: 1px;
}

.breadcrumbs-separator {
  display: flex;
  align-items: center;
  color: #0002119d;
}

.breadcrumbs-page {
  cursor: default;
  color: #1e1f24;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

Features

Support for disabled breadcrumb links.
Adheres to the Breadcrumb WAI-ARIA design pattern.

Import

import { Breadcrumbs } from 'qwik-primitives';

Anatomy

Import the component and piece the parts together.

import { component$ } from '@builder.io/qwik';
import { Breadcrumbs } from 'qwik-primitives';

export const BreadcrumbsDemo = component$(() => {
  return (
    <Breadcrumbs.Root>
      <Breadcrumbs.List>
        <Breadcrumbs.Item>
          <Breadcrumbs.Link />
          <Breadcrumbs.Separator />
        </Breadcrumbs.Item>

        <Breadcrumbs.Item>
          <Breadcrumbs.Page />
        </Breadcrumbs.Item>
      </Breadcrumbs.List>
    </Breadcrumbs.Root>
  );
});

API Reference

Root

Contains all the parts of a breadcrumbs. This component is based on the nav element.

Props

as

Description: Change the default rendered element for the one passed as, merging their props and behavior.
Read our Composition guide for more details.
Type: FunctionComponent
Default: No default value

aria-label

Description: The label of the breadcrumbs.
Type: string
Default: "Breadcrumbs"

disabled

Description: Whether the breadcrumbs are disabled.
Type: boolean
Default: No default value

style

Description: The inline style for the element.
Type: CSSProperties
Default: No default value

Prop	Type	Default
`as` Prop as description Change the default rendered element for the one passed as, merging their props and behavior. Read our Composition guide for more details.	`FunctionComponent`	No default value
`aria-label` Prop aria-label description The label of the breadcrumbs.	`string`	`"Breadcrumbs"`
`disabled` Prop disabled description Whether the breadcrumbs are disabled.	`boolean`	No default value
`style` Prop style description The inline style for the element.	`CSSProperties`	No default value

Data attributes

[data-scope]

Values: "breadcrumbs"

[data-part]

Values: "root"

[data-disabled]

Values: Present when disabled

Data attribute	Values
`[data-scope]`	`"breadcrumbs"`
`[data-part]`	`"root"`
`[data-disabled]`	Present when disabled

List

Contains the breadcrumbs items. This component is based on the ol element.

Props

as

Description: Change the default rendered element for the one passed as, merging their props and behavior.
Read our Composition guide for more details.
Type: FunctionComponent
Default: No default value

style

Description: The inline style for the element.
Type: CSSProperties
Default: No default value

Prop	Type	Default
`as` Prop as description Change the default rendered element for the one passed as, merging their props and behavior. Read our Composition guide for more details.	`FunctionComponent`	No default value
`style` Prop style description The inline style for the element.	`CSSProperties`	No default value

Data attributes

[data-scope]

Values: "breadcrumbs"

[data-part]

Values: "list"

[data-disabled]

Values: Present when disabled

Data attribute	Values
`[data-scope]`	`"breadcrumbs"`
`[data-part]`	`"list"`
`[data-disabled]`	Present when disabled

Item

A breadcrumbs item. This component is based on the li element.

Props

as

Description: Change the default rendered element for the one passed as, merging their props and behavior.
Read our Composition guide for more details.
Type: FunctionComponent
Default: No default value

style

Description: The inline style for the element.
Type: CSSProperties
Default: No default value

Prop	Type	Default
`as` Prop as description Change the default rendered element for the one passed as, merging their props and behavior. Read our Composition guide for more details.	`FunctionComponent`	No default value
`style` Prop style description The inline style for the element.	`CSSProperties`	No default value

Data attributes

[data-scope]

Values: "breadcrumbs"

[data-part]

Values: "item"

[data-disabled]

Values: Present when disabled

Data attribute	Values
`[data-scope]`	`"breadcrumbs"`
`[data-part]`	`"item"`
`[data-disabled]`	Present when disabled

Link

A breadcrumbs link. Should be nested inside Breadcrumbs.Item. This component is based on the a element.

Props

as

Description: Change the default rendered element for the one passed as, merging their props and behavior.
Read our Composition guide for more details.
Type: FunctionComponent
Default: No default value

disabled

Description: Whether the link is disabled. Native navigation will be disabled, and the link will be exposed as disabled to assistive technology.
Type: boolean
Default: No default value

href

Description: A URL to link to.
Type: string
Default: No default value

style

Description: The inline style for the element.
Type: CSSProperties
Default: No default value

Prop	Type	Default
`as` Prop as description Change the default rendered element for the one passed as, merging their props and behavior. Read our Composition guide for more details.	`FunctionComponent`	No default value
`disabled` Prop disabled description Whether the link is disabled. Native navigation will be disabled, and the link will be exposed as disabled to assistive technology.	`boolean`	No default value
`href` Prop href description A URL to link to.	`string`	No default value
`style` Prop style description The inline style for the element.	`CSSProperties`	No default value

Data attributes

[data-scope]

Values: "breadcrumbs"

[data-part]

Values: "link"

[data-disabled]

Values: Present when disabled

Data attribute	Values
`[data-scope]`	`"breadcrumbs"`
`[data-part]`	`"link"`
`[data-disabled]`	Present when disabled

Page

A component that represents the current page. Should be nested inside Breadcrumbs.Item. This component is based on the span element.

Props

as

Description: Change the default rendered element for the one passed as, merging their props and behavior.
Read our Composition guide for more details.
Type: FunctionComponent
Default: No default value

style

Description: The inline style for the element.
Type: CSSProperties
Default: No default value

Prop	Type	Default
`as` Prop as description Change the default rendered element for the one passed as, merging their props and behavior. Read our Composition guide for more details.	`FunctionComponent`	No default value
`style` Prop style description The inline style for the element.	`CSSProperties`	No default value

Data attributes

[data-scope]

Values: "breadcrumbs"

[data-part]

Values: "page"

[data-disabled]

Values: Present when disabled

Data attribute	Values
`[data-scope]`	`"breadcrumbs"`
`[data-part]`	`"page"`
`[data-disabled]`	Present when disabled

Separator

Used to visually separate breadcrumbs items. Should be nested inside Breadcrumbs.Item. This component is based on the span element.

Props

as

Description: Change the default rendered element for the one passed as, merging their props and behavior.
Read our Composition guide for more details.
Type: FunctionComponent
Default: No default value

style

Description: The inline style for the element.
Type: CSSProperties
Default: No default value

Prop	Type	Default
`as` Prop as description Change the default rendered element for the one passed as, merging their props and behavior. Read our Composition guide for more details.	`FunctionComponent`	No default value
`style` Prop style description The inline style for the element.	`CSSProperties`	No default value

Data attributes

[data-scope]

Values: "breadcrumbs"

[data-part]

Values: "separator"

[data-disabled]

Values: Present when disabled

Data attribute	Values
`[data-scope]`	`"breadcrumbs"`
`[data-part]`	`"separator"`
`[data-disabled]`	Present when disabled

Examples

Disabled

Use the disabled prop on Breadcrumbs.Root to disable all links while keeping it accessible for screen readers.

import { component$ } from '@builder.io/qwik';
import { Breadcrumbs } from 'qwik-primitives';

export const BreadcrumbsDemo = component$(() => {
  return (
    <Breadcrumbs.Root disabled={true}>
      <Breadcrumbs.List>
        <Breadcrumbs.Item>
          <Breadcrumbs.Link href="#">Docs</Breadcrumbs.Link>
          <Breadcrumbs.Separator>{'>'}</Breadcrumbs.Separator>
        </Breadcrumbs.Item>
        <Breadcrumbs.Item>
          <Breadcrumbs.Link href="#">Components</Breadcrumbs.Link>
          <Breadcrumbs.Separator>{'>'}</Breadcrumbs.Separator>
        </Breadcrumbs.Item>
        <Breadcrumbs.Item>
          <Breadcrumbs.Page>Breadcrumbs</Breadcrumbs.Page>
        </Breadcrumbs.Item>
      </Breadcrumbs.List>
    </Breadcrumbs.Root>
  );
});

Disabled link

Use the disabled prop on Breadcrumbs.Link to disable a link while keeping it accessible for screen readers.

import { component$ } from '@builder.io/qwik';
import { Breadcrumbs } from 'qwik-primitives';

export const BreadcrumbsDemo = component$(() => {
  return (
    <Breadcrumbs.Root>
      <Breadcrumbs.List>
        <Breadcrumbs.Item>
          <Breadcrumbs.Link disabled={true} href="#">
            Docs
          </Breadcrumbs.Link>
          <Breadcrumbs.Separator>{'>'}</Breadcrumbs.Separator>
        </Breadcrumbs.Item>
        <Breadcrumbs.Item>
          <Breadcrumbs.Link href="#">Components</Breadcrumbs.Link>
          <Breadcrumbs.Separator>{'>'}</Breadcrumbs.Separator>
        </Breadcrumbs.Item>
        <Breadcrumbs.Item>
          <Breadcrumbs.Page>Breadcrumbs</Breadcrumbs.Page>
        </Breadcrumbs.Item>
      </Breadcrumbs.List>
    </Breadcrumbs.Root>
  );
});

Accessibility

Adheres to the Breadcrumb WAI-ARIA design pattern.

Keyboard Interactions

Enter

Description: Activates the link.

Key	Description
`Enter`	Activates the link.