Breadcrumb

Breadcrumb shows where the current page sits in your app's hierarchy. Use it on pages two or more levels deep. For top-level navigation, use NavigationMenu or Sidebar.

'use client';

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@/components/nxds/components/breadcrumb/breadcrumb';

export default function BreadcrumbDefault() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Components</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

Installation

npx nxds-cli@latest add breadcrumb

Run npx nxds-cli@latest init first if nxds isn’t set up in your app yet. See Install.

Usage

import {
  Breadcrumb,
  BreadcrumbEllipsis,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbMenuTrigger,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@/components/nxds/components/breadcrumb/breadcrumb';

Composition

Breadcrumb
└── BreadcrumbList
    ├── BreadcrumbItem
    │   ├── BreadcrumbLink
    │   ├── BreadcrumbPage
    │   ├── BreadcrumbEllipsis
    │   └── BreadcrumbMenuTrigger
    └── BreadcrumbSeparator

Examples

With ellipsis

Collapse the middle of a long trail into an ellipsis menu.

'use client';

import {
  Breadcrumb,
  BreadcrumbEllipsis,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@/components/nxds/components/breadcrumb/breadcrumb';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/nxds/components/dropdown-menu/dropdown-menu';

export default function BreadcrumbWithEllipsis() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">Home</BreadcrumbLink>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <BreadcrumbEllipsis />
            </DropdownMenuTrigger>
            <DropdownMenuContent align="start">
              <DropdownMenuItem asChild>
                <a href="/projects">Projects</a>
              </DropdownMenuItem>
              <DropdownMenuItem asChild>
                <a href="/projects/design-system">Design System</a>
              </DropdownMenuItem>
              <DropdownMenuItem asChild>
                <a href="/projects/design-system/components">Components</a>
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>Settings</BreadcrumbPage>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

This example also needs: DropdownMenu.

With icons

Add icons to segments and a menu trigger for alternate paths.

'use client';

import { FolderIcon } from '@phosphor-icons/react/ssr';

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbMenuTrigger,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@/components/nxds/components/breadcrumb/breadcrumb';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/nxds/components/dropdown-menu/dropdown-menu';

export default function BreadcrumbWithIcons() {
  return (
    <Breadcrumb>
      <BreadcrumbList>
        <BreadcrumbItem>
          <BreadcrumbLink href="#">
            <FolderIcon aria-hidden />
            <span>Workspace</span>
          </BreadcrumbLink>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <BreadcrumbMenuTrigger aria-label="Show alternate paths for Workspace" />
            </DropdownMenuTrigger>
            <DropdownMenuContent align="start">
              <DropdownMenuItem asChild>
                <a href="/workspaces/personal">Personal</a>
              </DropdownMenuItem>
              <DropdownMenuItem asChild>
                <a href="/workspaces/team">Team</a>
              </DropdownMenuItem>
              <DropdownMenuItem asChild>
                <a href="/workspaces/archived">Archived</a>
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbLink href="#">
            <FolderIcon aria-hidden />
            <span>Projects</span>
          </BreadcrumbLink>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <BreadcrumbMenuTrigger aria-label="Show alternate paths for Projects" />
            </DropdownMenuTrigger>
            <DropdownMenuContent align="start">
              <DropdownMenuItem asChild>
                <a href="/projects/components">Components</a>
              </DropdownMenuItem>
              <DropdownMenuItem asChild>
                <a href="/projects/patterns">Patterns</a>
              </DropdownMenuItem>
              <DropdownMenuItem asChild>
                <a href="/projects/tokens">Tokens</a>
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </BreadcrumbItem>
        <BreadcrumbSeparator />
        <BreadcrumbItem>
          <BreadcrumbPage>
            <FolderIcon aria-hidden />
            <span>Breadcrumb</span>
          </BreadcrumbPage>
          <DropdownMenu>
            <DropdownMenuTrigger asChild>
              <BreadcrumbMenuTrigger aria-label="Show related pages for Breadcrumb" />
            </DropdownMenuTrigger>
            <DropdownMenuContent align="start">
              <DropdownMenuItem asChild>
                <a href="/components/breadcrumb/api">Breadcrumb API</a>
              </DropdownMenuItem>
              <DropdownMenuItem asChild>
                <a href="/components/breadcrumb/stories">Breadcrumb Stories</a>
              </DropdownMenuItem>
            </DropdownMenuContent>
          </DropdownMenu>
        </BreadcrumbItem>
      </BreadcrumbList>
    </Breadcrumb>
  );
}

This example also needs: DropdownMenu.

Props

Breadcrumb adds no props of its own; it accepts the props of the element or primitive it wraps.

BreadcrumbEllipsis adds no props of its own; it accepts the props of the element or primitive it wraps.

BreadcrumbItem adds no props of its own; it accepts the props of the element or primitive it wraps.

BreadcrumbLink props
Prop	Type	Default	Description
`asChild`	`boolean`	No default documented	Renders the child element instead, such as a router `<Link>`.

BreadcrumbList adds no props of its own; it accepts the props of the element or primitive it wraps.

BreadcrumbMenuTrigger adds no props of its own; it accepts the props of the element or primitive it wraps.

BreadcrumbPage adds no props of its own; it accepts the props of the element or primitive it wraps.

BreadcrumbSeparator adds no props of its own; it accepts the props of the element or primitive it wraps.

Breadcrumb shows where the current page sits in your app's hierarchy. Use it on pages two or more levels deep. For top-level navigation, use NavigationMenu or Sidebar.

<script setup lang="ts">
import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@/components/breadcrumb';
</script>

<template>
  <Breadcrumb>
    <BreadcrumbList>
      <BreadcrumbItem>
        <BreadcrumbLink href="#">Home</BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem>
        <BreadcrumbLink href="#">Components</BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem>
        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
      </BreadcrumbItem>
    </BreadcrumbList>
  </Breadcrumb>
</template>

Installation

1
Install the following dependencies:
npm install @phosphor-icons/vue@^2.2.1 reka-ui@^2.11.0

Copy and paste the following code into your project.

components/breadcrumb/Breadcrumb.vue

<script setup lang="ts">
import type { HTMLAttributes } from 'vue';

export interface BreadcrumbProps {
  class?: HTMLAttributes['class'];
}

const props = defineProps<BreadcrumbProps>();
</script>

<template>
  <nav aria-label="breadcrumb" data-slot="breadcrumb" :class="props.class">
    <slot />
  </nav>
</template>

components/breadcrumb/BreadcrumbEllipsis.vue

<script setup lang="ts">
import type { HTMLAttributes } from 'vue';

import { cn } from '../../lib/utils';

export interface BreadcrumbEllipsisProps {
  class?: HTMLAttributes['class'];
}

const props = defineProps<BreadcrumbEllipsisProps>();

// The template sets the dots with v-text. Prettier would wrap literal text onto
// its own line, and Vue renders that whitespace as spaces around the dots.
</script>

<template>
  <button
    data-slot="breadcrumb-ellipsis"
    type="button"
    aria-label="Show hidden breadcrumbs"
    :class="
      cn(
        'nx:inline-flex nx:shrink-0 nx:items-center nx:justify-center nx:rounded-md nx:border-0 nx:bg-transparent nx:px-1.5 nx:py-0 nx:text-inherit nx:typography-body-default nx:transition-control nx:hover:bg-background-hover nx:active:bg-background-active nx:data-[state=open]:bg-background-active nx:focus-visible:outline-2 nx:focus-visible:outline-focus-default',
        props.class
      )
    "
    v-text="'...'"
  />
</template>

components/breadcrumb/BreadcrumbItem.vue

<script setup lang="ts">
import type { HTMLAttributes } from 'vue';

import { cn } from '../../lib/utils';

export interface BreadcrumbItemProps {
  class?: HTMLAttributes['class'];
}

const props = defineProps<BreadcrumbItemProps>();
</script>

<template>
  <li
    data-slot="breadcrumb-item"
    :class="
      cn('nx:inline-flex nx:min-w-0 nx:items-center nx:gap-0', props.class)
    "
  >
    <slot />
  </li>
</template>

components/breadcrumb/BreadcrumbLink.vue

<script setup lang="ts">
import { Primitive, type PrimitiveProps } from 'reka-ui';
import type { HTMLAttributes } from 'vue';

import { cn } from '../../lib/utils';

export interface BreadcrumbLinkProps extends PrimitiveProps {
  class?: HTMLAttributes['class'];
}

const props = withDefaults(defineProps<BreadcrumbLinkProps>(), { as: 'a' });
</script>

<template>
  <Primitive
    data-slot="breadcrumb-link"
    :as="as"
    :as-child="asChild"
    :class="
      cn(
        'nx:inline-flex nx:min-w-0 nx:max-w-[150px] nx:items-center nx:gap-1 nx:rounded-md nx:px-1.5 nx:text-inherit nx:no-underline nx:typography-label-default nx:transition-control nx:hover:bg-background-hover nx:active:bg-background-active nx:focus-visible:outline-2 nx:focus-visible:outline-focus-default nx:[&>span]:min-w-0 nx:[&>span]:truncate nx:[&_svg]:size-4 nx:[&_svg]:shrink-0',
        props.class
      )
    "
  >
    <slot />
  </Primitive>
</template>

components/breadcrumb/BreadcrumbList.vue

<script setup lang="ts">
import type { HTMLAttributes } from 'vue';

import { cn } from '../../lib/utils';

export interface BreadcrumbListProps {
  class?: HTMLAttributes['class'];
}

const props = defineProps<BreadcrumbListProps>();
</script>

<template>
  <ol
    data-slot="breadcrumb-list"
    tabindex="0"
    :class="
      cn(
        'nx:m-0 nx:flex nx:min-w-0 nx:max-w-full nx:list-none nx:flex-nowrap nx:items-center nx:gap-0.5 nx:overflow-x-auto nx:py-1.5 nx:pr-1.5 nx:pl-0 nx:typography-body-default nx:text-muted-foreground nx:focus-visible:outline-2 nx:focus-visible:outline-focus-default',
        props.class
      )
    "
  >
    <!-- The current page is a non-focusable <span>, so the list itself takes tabindex="0" to scroll an overflowing trail into view (WCAG 2.1.1). -->
    <slot />
  </ol>
</template>

components/breadcrumb/BreadcrumbMenuTrigger.vue

<script setup lang="ts">
import type { HTMLAttributes } from 'vue';

import { IconChevronDown } from '../../lib/icons';
import { cn } from '../../lib/utils';

export interface BreadcrumbMenuTriggerProps {
  class?: HTMLAttributes['class'];
}

const props = defineProps<BreadcrumbMenuTriggerProps>();
</script>

<template>
  <button
    data-slot="breadcrumb-menu-trigger"
    type="button"
    aria-label="Show alternate paths"
    :class="
      cn(
        'nx:inline-flex nx:size-5 nx:shrink-0 nx:items-center nx:justify-center nx:rounded-md nx:border-0 nx:bg-transparent nx:p-0 nx:text-inherit nx:transition-control nx:hover:bg-background-hover nx:active:bg-background-active nx:data-[state=open]:bg-background-active nx:focus-visible:outline-2 nx:focus-visible:outline-focus-default nx:[&_svg]:size-4 nx:[&_svg]:shrink-0',
        props.class
      )
    "
  >
    <slot><IconChevronDown aria-hidden="true" /></slot>
  </button>
</template>

components/breadcrumb/BreadcrumbPage.vue

<script setup lang="ts">
import type { HTMLAttributes } from 'vue';

import { cn } from '../../lib/utils';

export interface BreadcrumbPageProps {
  class?: HTMLAttributes['class'];
}

const props = defineProps<BreadcrumbPageProps>();
</script>

<template>
  <span
    data-slot="breadcrumb-page"
    aria-current="page"
    :class="
      cn(
        'nx:inline-flex nx:min-w-0 nx:max-w-[150px] nx:items-center nx:gap-1 nx:rounded-md nx:px-1.5 nx:typography-label-default nx:text-foreground nx:[&>span]:min-w-0 nx:[&>span]:truncate nx:[&_svg]:size-4 nx:[&_svg]:shrink-0',
        props.class
      )
    "
  >
    <slot />
  </span>
</template>

components/breadcrumb/BreadcrumbSeparator.vue

<script setup lang="ts">
import type { HTMLAttributes } from 'vue';

import { cn } from '../../lib/utils';

export interface BreadcrumbSeparatorProps {
  class?: HTMLAttributes['class'];
}

const props = defineProps<BreadcrumbSeparatorProps>();
</script>

<template>
  <li
    data-slot="breadcrumb-separator"
    role="presentation"
    aria-hidden="true"
    :class="
      cn(
        'nx:inline-flex nx:shrink-0 nx:items-center nx:typography-body-default nx:text-muted-foreground nx:[&>svg]:size-3.5',
        props.class
      )
    "
  >
    <slot>/</slot>
  </li>
</template>

components/breadcrumb/index.ts

export { default as Breadcrumb, type BreadcrumbProps } from './Breadcrumb.vue';
export {
  default as BreadcrumbEllipsis,
  type BreadcrumbEllipsisProps,
} from './BreadcrumbEllipsis.vue';
export {
  default as BreadcrumbItem,
  type BreadcrumbItemProps,
} from './BreadcrumbItem.vue';
export {
  default as BreadcrumbLink,
  type BreadcrumbLinkProps,
} from './BreadcrumbLink.vue';
export {
  default as BreadcrumbList,
  type BreadcrumbListProps,
} from './BreadcrumbList.vue';
export {
  default as BreadcrumbMenuTrigger,
  type BreadcrumbMenuTriggerProps,
} from './BreadcrumbMenuTrigger.vue';
export {
  default as BreadcrumbPage,
  type BreadcrumbPageProps,
} from './BreadcrumbPage.vue';
export {
  default as BreadcrumbSeparator,
  type BreadcrumbSeparatorProps,
} from './BreadcrumbSeparator.vue';

lib/icons.ts

/**
 * Internal Icons
 *
 * This barrel file re-exports icons used internally by the design system.
 * These are hardcoded icons for component states (loading, validation, navigation).
 *
 * User-facing icons should be passed via props by consumers.
 *
 * This set draws Phosphor. `nxds init --icons` installs the same names drawn
 * by another library.
 */
import { PhCircle } from '@phosphor-icons/vue';
import { type FunctionalComponent, h } from 'vue';

// Loading states
export { PhCircleNotch as IconLoader2 } from '@phosphor-icons/vue';

// Navigation
export {
  PhArrowDown as IconArrowDown,
  PhArrowLeft as IconArrowLeft,
  PhArrowRight as IconArrowRight,
  PhArrowUp as IconArrowUp,
  PhCaretDown as IconChevronDown,
  PhCaretLeft as IconChevronLeft,
  PhCaretRight as IconChevronRight,
  PhCaretUp as IconChevronUp,
  PhDotsThree as IconDots,
  PhSidebarSimple as IconLayoutSidebar,
  PhCaretUpDown as IconSelector,
} from '@phosphor-icons/vue';

// Actions
export {
  PhCheck as IconCheck,
  PhCopy as IconCopy,
  PhMinus as IconMinus,
  PhPencilSimple as IconPencil,
  PhPlus as IconPlus,
  PhX as IconX,
} from '@phosphor-icons/vue';

export const IconCircleFilled: FunctionalComponent = (_props, { attrs }) =>
  h(PhCircle, { weight: 'fill', ...attrs });

// Filter field types
export {
  PhCalendarBlank as IconCalendar,
  PhHash as IconHash,
  PhTextAa as IconLetterCase,
  PhListBullets as IconList,
} from '@phosphor-icons/vue';

// Search / input
export { PhMagnifyingGlass as IconSearch } from '@phosphor-icons/vue';

// Alerts/Status
export {
  PhWarningCircle as IconAlertCircle,
  PhWarning as IconAlertTriangle,
  PhCheckCircle as IconCircleCheck,
  PhInfo as IconInfoCircle,
} from '@phosphor-icons/vue';

// Layout
export {
  PhDotsSixVertical as IconGripVertical,
  PhPalette as IconPalette,
} from '@phosphor-icons/vue';

Keep each file at the path shown above it.
Paths are relative to packages/vue/src/. Keep the same folders under your @/ root, and the imports between files work without edits.

Usage

import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbMenuTrigger, BreadcrumbPage, BreadcrumbSeparator } from '@/components/breadcrumb';

Examples

With ellipsis

Collapse the middle of a long trail into an ellipsis menu.

<script setup lang="ts">
import {
  Breadcrumb,
  BreadcrumbEllipsis,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@/components/breadcrumb';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/dropdown-menu';
</script>

<template>
  <Breadcrumb>
    <BreadcrumbList>
      <BreadcrumbItem>
        <BreadcrumbLink href="#">Home</BreadcrumbLink>
      </BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem>
        <DropdownMenu>
          <DropdownMenuTrigger as-child>
            <BreadcrumbEllipsis />
          </DropdownMenuTrigger>
          <DropdownMenuContent align="start">
            <DropdownMenuItem as-child>
              <a href="/projects">Projects</a>
            </DropdownMenuItem>
            <DropdownMenuItem as-child>
              <a href="/projects/design-system">Design System</a>
            </DropdownMenuItem>
            <DropdownMenuItem as-child>
              <a href="/projects/design-system/components">Components</a>
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem>
        <BreadcrumbPage>Settings</BreadcrumbPage>
      </BreadcrumbItem>
    </BreadcrumbList>
  </Breadcrumb>
</template>

This example also needs: DropdownMenu.

With icons

Add icons to segments and a menu trigger for alternate paths.

<script setup lang="ts">
import { PhFolder } from '@phosphor-icons/vue';

import {
  Breadcrumb,
  BreadcrumbItem,
  BreadcrumbLink,
  BreadcrumbList,
  BreadcrumbMenuTrigger,
  BreadcrumbPage,
  BreadcrumbSeparator,
} from '@/components/breadcrumb';
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from '@/components/dropdown-menu';
</script>

<template>
  <Breadcrumb>
    <BreadcrumbList>
      <BreadcrumbItem>
        <BreadcrumbLink href="#">
          <PhFolder aria-hidden="true" />
          <span>Workspace</span>
        </BreadcrumbLink>
        <DropdownMenu>
          <DropdownMenuTrigger as-child>
            <BreadcrumbMenuTrigger
              aria-label="Show alternate paths for Workspace"
            />
          </DropdownMenuTrigger>
          <DropdownMenuContent align="start">
            <DropdownMenuItem as-child>
              <a href="/workspaces/personal">Personal</a>
            </DropdownMenuItem>
            <DropdownMenuItem as-child>
              <a href="/workspaces/team">Team</a>
            </DropdownMenuItem>
            <DropdownMenuItem as-child>
              <a href="/workspaces/archived">Archived</a>
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem>
        <BreadcrumbLink href="#">
          <PhFolder aria-hidden="true" />
          <span>Projects</span>
        </BreadcrumbLink>
        <DropdownMenu>
          <DropdownMenuTrigger as-child>
            <BreadcrumbMenuTrigger
              aria-label="Show alternate paths for Projects"
            />
          </DropdownMenuTrigger>
          <DropdownMenuContent align="start">
            <DropdownMenuItem as-child>
              <a href="/projects/components">Components</a>
            </DropdownMenuItem>
            <DropdownMenuItem as-child>
              <a href="/projects/patterns">Patterns</a>
            </DropdownMenuItem>
            <DropdownMenuItem as-child>
              <a href="/projects/tokens">Tokens</a>
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </BreadcrumbItem>
      <BreadcrumbSeparator />
      <BreadcrumbItem>
        <BreadcrumbPage>
          <PhFolder aria-hidden="true" />
          <span>Breadcrumb</span>
        </BreadcrumbPage>
        <DropdownMenu>
          <DropdownMenuTrigger as-child>
            <BreadcrumbMenuTrigger
              aria-label="Show related pages for Breadcrumb"
            />
          </DropdownMenuTrigger>
          <DropdownMenuContent align="start">
            <DropdownMenuItem as-child>
              <a href="/components/breadcrumb/api">Breadcrumb API</a>
            </DropdownMenuItem>
            <DropdownMenuItem as-child>
              <a href="/components/breadcrumb/stories">Breadcrumb Stories</a>
            </DropdownMenuItem>
          </DropdownMenuContent>
        </DropdownMenu>
      </BreadcrumbItem>
    </BreadcrumbList>
  </Breadcrumb>
</template>

This example also needs: DropdownMenu.

Props

Breadcrumb adds no props of its own; it accepts the props of the element or primitive it wraps.

BreadcrumbEllipsis adds no props of its own; it accepts the props of the element or primitive it wraps.

BreadcrumbItem adds no props of its own; it accepts the props of the element or primitive it wraps.

BreadcrumbLink adds no props of its own; it accepts the props of the element or primitive it wraps.

BreadcrumbList adds no props of its own; it accepts the props of the element or primitive it wraps.

BreadcrumbMenuTrigger adds no props of its own; it accepts the props of the element or primitive it wraps.

BreadcrumbPage adds no props of its own; it accepts the props of the element or primitive it wraps.

BreadcrumbSeparator adds no props of its own; it accepts the props of the element or primitive it wraps.