Skip to Content
Hashti Design System
Components

Breadcrumbs

Hierarchical navigational aid communicating page depth and location within the site structure.

Breadcrumbs

Breadcrumbs provide a secondary, linear navigational hierarchy that shows users where they are within an application’s nested site structure, enabling parent-level traversal.

In Hashti, Breadcrumbs are constructed using semantic ordered lists wrapped in accessible <nav> landmarks, automatically marking the terminal page with aria-current="page" and handling responsive truncation.

BreadcrumbsNavigational pathway landmarks with keyboard accessibility.
  1. Docs
  2. Foundations
  3. Spatial Transition

Import

import { Breadcrumbs, BreadcrumbItem } from "@hashti/react";

Examples

Standard Breadcrumbs

Compose breadcrumbs using <Breadcrumbs> with nested <BreadcrumbItem> components. Set isCurrent on the last item to signify the active page:

import { Breadcrumbs, BreadcrumbItem } from "@hashti/react";

export function BasicBreadcrumbsExample() {
  return (
    <Breadcrumbs>
      <BreadcrumbItem href="/">Home</BreadcrumbItem>
      <BreadcrumbItem href="/architecture">Architecture</BreadcrumbItem>
      <BreadcrumbItem href="/architecture/services">Edge Services</BreadcrumbItem>
      <BreadcrumbItem isCurrent>Global Router</BreadcrumbItem>
    </Breadcrumbs>
  );
}

Dynamic Collections

Render breadcrumbs dynamically from an array of routes or navigation history items:

import { Breadcrumbs, BreadcrumbItem } from "@hashti/react";

interface Crumb {
  id: string;
  label: string;
  href?: string;
  isCurrent?: boolean;
}

export function DynamicBreadcrumbsExample() {
  const trail: Crumb[] = [
    { id: "dashboard", label: "Dashboard", href: "/dashboard" },
    { id: "projects", label: "Projects", href: "/projects" },
    { id: "hashti", label: "Hashti Design System", href: "/projects/hashti" },
    { id: "tokens", label: "Tokens", isCurrent: true },
  ];

  return (
    <Breadcrumbs>
      {trail.map((item) => (
        <BreadcrumbItem key={item.id} href={item.href} isCurrent={item.isCurrent}>
          {item.label}
        </BreadcrumbItem>
      ))}
    </Breadcrumbs>
  );
}

Action Callbacks

Breadcrumb items can fire an onAction callback instead of navigating directly via href, integrating with client routers or state machines:

import { Breadcrumbs, BreadcrumbItem } from "@hashti/react";

export function ActionBreadcrumbsExample() {
  return (
    <Breadcrumbs onAction={(key) => console.log("Navigating to step:", key)}>
      <BreadcrumbItem id="cart" href="#cart">
        Shopping Cart
      </BreadcrumbItem>
      <BreadcrumbItem id="shipping" href="#shipping">
        Shipping Address
      </BreadcrumbItem>
      <BreadcrumbItem id="payment" isCurrent>
        Payment Method
      </BreadcrumbItem>
    </Breadcrumbs>
  );
}

Deep Nesting & Truncation

When nesting exceeds four levels, long labels can be truncated with ellipses while preserving full clarity in tooltips or page titles:

import { Breadcrumbs, BreadcrumbItem } from "@hashti/react";

export function TruncatedBreadcrumbsExample() {
  return (
    <div className="max-w-md">
      <Breadcrumbs>
        <BreadcrumbItem href="/">Organizations</BreadcrumbItem>
        <BreadcrumbItem href="/org/engineering">Global Infrastructure Engineering</BreadcrumbItem>
        <BreadcrumbItem href="/org/engineering/regions">Middle East & North Africa</BreadcrumbItem>
        <BreadcrumbItem isCurrent>Isfahan-DC-Cluster-Alpha</BreadcrumbItem>
      </Breadcrumbs>
    </div>
  );
}

Props Reference

PropTypeDefaultDescription
childrenReactNodeRequiredNested <BreadcrumbItem> elements or render function.
onAction(key: Key) => void—Callback fired when a breadcrumb item is activated.
isDisabledbooleanfalseWhether the entire breadcrumb trail is disabled.
classNamestring—Additional CSS class names.
PropTypeDefaultDescription
childrenReactNodeRequiredThe text label or node rendered for this breadcrumb.
hrefstring—Hyperlink destination. When provided, renders as an interactive link.
isCurrentbooleanfalseWhether this item represents the current page. When true, automatically assigns aria-current="page" and disables link navigation.
idKey—Unique identifier for action callbacks.

Accessibility (a11y)

  • Landmark Region: Breadcrumbs render inside a <nav> landmark automatically labeled with aria-label="Breadcrumbs".
  • Ordered List Structure: Rendered internally as an ordered list (<ol>) where each crumb is an <li>, signaling the sequential depth of navigation to screen readers.
  • Current Page Identification: The active page item receives aria-current="page". Assistive technologies vocalize that the item is the active page rather than an active link.
  • Separators are Decorative: Visual slash or chevron separators are marked with aria-hidden="true" (or generated via CSS pseudo-elements), preventing screen readers from vocalizing unnecessary punctuation characters like “slash, slash”.
  • Keyboard Tab Order: Only navigable ancestor items are interactive tab stops; the terminal current page is non-interactive prose.

Tabs

Navigation component organizing content across layered panel views.

Table

High-density data grid displaying structured tabular records with sorting, selection, and resizing.

On this page

BreadcrumbsImportExamplesStandard BreadcrumbsDynamic CollectionsAction CallbacksDeep Nesting & TruncationProps ReferenceBreadcrumbs PropsBreadcrumbItem PropsAccessibility (a11y)