Breadcrumbs

"use client";

import { Breadcrumbs } from "@vortexlabs/vortex";

export const BreadcrumbsExample = () => {
  return (
    <Breadcrumbs ariaLabel="Breadcrumb">
      <Breadcrumbs.Item href="/docs/web/introduction">Docs</Breadcrumbs.Item>
      <Breadcrumbs.Item href="/docs/web/all-components">Components</Breadcrumbs.Item>
      <Breadcrumbs.Item current>Breadcrumbs</Breadcrumbs.Item>
    </Breadcrumbs>
  );
};

Features

Renders a labeled navigation landmark.
Marks the current page with aria-current.
Supports chevron or slash separators and optional item icons.
Can collapse long paths and expand hidden items.
Controls how many leading and trailing items remain visible.

Reference Links

WAI-ARIA breadcrumb pattern

Anatomy

<Breadcrumbs ariaLabel="Breadcrumb">
  <Breadcrumbs.Item href="/docs">Docs</Breadcrumbs.Item>
  <Breadcrumbs.Item current>Breadcrumbs</Breadcrumbs.Item>
</Breadcrumbs>

Component Part

Description

Breadcrumbs

Labels the navigation landmark and collapses long paths.

.Item

Links to one level of the path, or marks the current page.

Pass onClick instead of href to navigate in code, like with a client-side router; the item renders as a button. In Next.js App Router, render these items in a Client Component, since functions can't be passed from Server Components.

<Breadcrumbs.Item onClick={() => router.push("/docs")}>Docs</Breadcrumbs.Item>

Separators

The default separator is chevron. Set dividerType="slash" to use slashes between items.

"use client";

import { Breadcrumbs } from "@vortexlabs/vortex";

export const BreadcrumbsSeparators = () => {
  return (
    <Breadcrumbs ariaLabel="Breadcrumb with slashes" dividerType="slash">
      <Breadcrumbs.Item href="/docs/web/introduction">Docs</Breadcrumbs.Item>
      <Breadcrumbs.Item href="/docs/web/all-components">Components</Breadcrumbs.Item>
      <Breadcrumbs.Item current>Breadcrumbs</Breadcrumbs.Item>
    </Breadcrumbs>
  );
};

Icons

Use icon on an item to add an icon before its label. Keep the text label so each destination remains clear.

"use client";

import { Breadcrumbs } from "@vortexlabs/vortex";
import { Folder } from "@vortexlabs/vortex-icons";

export const BreadcrumbsIcons = () => {
  return (
    <Breadcrumbs ariaLabel="Breadcrumb with an icon">
      <Breadcrumbs.Item href="/docs/web/introduction" icon={<Folder />}>
        Docs
      </Breadcrumbs.Item>
      <Breadcrumbs.Item href="/docs/web/all-components">Components</Breadcrumbs.Item>
      <Breadcrumbs.Item current>Breadcrumbs</Breadcrumbs.Item>
    </Breadcrumbs>
  );
};

Long Labels

String and number labels truncate to 19 characters at xs and 35 at sm and above, including .... Keep labels short and distinct; screen readers receive the shortened text too.

"use client";

import { Breadcrumbs } from "@vortexlabs/vortex";

export const BreadcrumbsLongLabels = () => {
  return (
    <Breadcrumbs ariaLabel="Breadcrumb with a long label">
      <Breadcrumbs.Item href="/docs/web/introduction">Docs</Breadcrumbs.Item>
      <Breadcrumbs.Item current>Configuring navigation for a large workspace</Breadcrumbs.Item>
    </Breadcrumbs>
  );
};

Collapsed Paths

Set maxItems to 2 or more to collapse long paths. Provide maxItemsAriaLabel to label the button that reveals hidden items.

"use client";

import { Breadcrumbs } from "@vortexlabs/vortex";

export const BreadcrumbsCollapsed = () => {
  return (
    <Breadcrumbs
      ariaLabel="Collapsed breadcrumb"
      maxItems={3}
      maxItemsAriaLabel="Show full breadcrumb"
    >
      <Breadcrumbs.Item href="/docs/web/introduction">Vortex</Breadcrumbs.Item>
      <Breadcrumbs.Item href="/docs/web/quick-start">Docs</Breadcrumbs.Item>
      <Breadcrumbs.Item href="/docs/web/all-components">Components</Breadcrumbs.Item>
      <Breadcrumbs.Item href="/docs/web/components/link">Navigation</Breadcrumbs.Item>
      <Breadcrumbs.Item current>Breadcrumbs</Breadcrumbs.Item>
    </Breadcrumbs>
  );
};

Leading and Trailing Items

Use itemsBeforeCollapse and itemsAfterCollapse to set how many items stay visible on each side of the ellipsis. These replace maxItems; an omitted count defaults to 1.

"use client";

import { Breadcrumbs } from "@vortexlabs/vortex";

export const BreadcrumbsEdges = () => {
  return (
    <Breadcrumbs
      ariaLabel="Breadcrumb with custom collapse"
      itemsBeforeCollapse={2}
      itemsAfterCollapse={1}
      maxItemsAriaLabel="Show hidden parent pages"
    >
      <Breadcrumbs.Item href="/docs/web/introduction">Vortex</Breadcrumbs.Item>
      <Breadcrumbs.Item href="/docs/web/quick-start">Docs</Breadcrumbs.Item>
      <Breadcrumbs.Item href="/docs/web/all-components">Components</Breadcrumbs.Item>
      <Breadcrumbs.Item href="/docs/web/components/link">Navigation</Breadcrumbs.Item>
      <Breadcrumbs.Item current>Breadcrumbs</Breadcrumbs.Item>
    </Breadcrumbs>
  );
};

Static Collapse

Set expandDisabled to display a non-interactive ellipsis. Hidden items cannot be revealed in this mode.

"use client";

import { Breadcrumbs } from "@vortexlabs/vortex";

export const BreadcrumbsStatic = () => {
  return (
    <Breadcrumbs
      ariaLabel="Compact breadcrumb"
      maxItems={2}
      maxItemsAriaLabel="Hidden parent pages"
      expandDisabled
    >
      <Breadcrumbs.Item href="/docs/web/introduction">Vortex</Breadcrumbs.Item>
      <Breadcrumbs.Item href="/docs/web/quick-start">Docs</Breadcrumbs.Item>
      <Breadcrumbs.Item href="/docs/web/all-components">Components</Breadcrumbs.Item>
      <Breadcrumbs.Item href="/docs/web/components/link">Navigation</Breadcrumbs.Item>
      <Breadcrumbs.Item current>Breadcrumbs</Breadcrumbs.Item>
    </Breadcrumbs>
  );
};

Accessibility

Key

Description

Enter

Follow a focused breadcrumb link.

EnterSpace

Reveal hidden path items when the expand button is focused. Its accessible name comes from maxItemsAriaLabel.

Provide ariaLabel for the navigation landmark. The path is rendered as an ordered list.

Set current on the current page. It receives aria-current="page", with or without a link.