In Review

Breadcrumbs

Variants

Default

 <nav aria-label="Breadcrumbs" class="gi-breadcrumbs">
    <ol role="list">
      <li role="listitem">
        <a href="/home" class="gi-link gi-link-inherit" aria-label="Home page">Home</a>
      </li>
          <li role="listitem">
            <div aria-hidden="true">
                <span class="material-symbols-outlined gi-gray-700">more_horiz</span>
            </div>
          </li>
      <li role="listitem">
        <a href="/docs" class="gi-link gi-link-inherit" aria-label="Documentation page">Documentation</a>
      </li>
      <li role="listitem">
        <a href="/travel" class="gi-link gi-link-inherit" aria-label="Travel page" aria-current="page">Travel abroad</a>
      </li>
    </ol>
  </nav>
  {{govieBreadcrumbs({
    navItems: [
      { "label": "Home", "href": "/home" },
      { "ellipsis": true },
      { "label": "Documentation", "href": "/docs" },
      { "label": "Travel abroad", "href": "/travel", "currentPage": true }
    ]})
  }}
  import { Breadcrumbs, BreadcrumbLink, BreadcrumbEllipsis, BreadcrumbCurrentLink } from '@govie-ds/react';

  <Breadcrumbs>
    <BreadcrumbLink href="/home">Home</BreadcrumbLink>
    <BreadcrumbEllipsis />
    <BreadcrumbLink href="/docs">Documentation</BreadcrumbLink>
    <BreadcrumbCurrentLink href="/travel">Travel abroad</BreadcrumbCurrentLink>
  </Breadcrumbs>

Usage

Best Practices

When to use this component

Use breadcrumbs to help users understand their location within a website or application hierarchy and navigate back to higher levels easily.

When not to use this component

Avoid breadcrumbs on websites or applications with a flat structure, where there is no clear hierarchy or depth (e.g., single-page applications or sites with only top-level pages)

Figma Library
Considering
Local HTML
Stable
Global HTML
Beta
Global React
Beta