Breadcrumbs

Hierarchy navigation assembled from Anta Buttons. Breadcrumb entries can be links, actions, or copy controls. Set maxItems to fold one middle range into a More menu without measuring the available width.

Breadcrumbs do not scroll horizontally by default. Use maxItems to limit visible entries, or enable scrolling with the scrolling recipe.

Items

Pass ordered BreadcrumbItem objects through items. Each item is a link, action, or copy control. size, priority, and underline treatment belong to the whole trail.

BreadcrumbItem reference

Use href for a link, omit navigation and copy props for an action, or choose exactly one of copy, copyNode, and copyUrl for a copy item. Copy items cannot use href, target, or iconTrailing. copyWithUrl and onCopyRequest apply only to literal copy text.

<Breadcrumbs
  aria-label="Project location"
  items={[
    { label: 'Home', href: '/', icon: 'home' },
    { label: 'Projects', href: '/projects', icon: 'folder-open', tone: 'brand' },
    { label: 'Refresh', icon: 'refresh', onClick: reload },
  ]}
/>

Priority, size, underline, and padding

Breadcrumbs use either tertiary or quaternary Button priority. size drives every visible crumb and the More control: small is 24px, medium is 28px, and large is 32px. underline and underlineOnHover forward to each visible Button. With priority="quaternary" (the default), paddingless removes their horizontal padding without changing their height, and uses a 0.75ch gap around separators.

<Breadcrumbs priority="tertiary" size="small" items={items} />
<Breadcrumbs priority="quaternary" underline="solid" underlineOnHover items={items} />
<Breadcrumbs paddingless items={items} />
<Breadcrumbs priority="tertiary" size="large" items={items} />

Separators

Pass any of →, /, •, or ▸ for a text separator. Pass an Anta icon shape for an icon separator. Separators are decorative and hidden from assistive technology.

<Breadcrumbs separator="→" items={items} />
<Breadcrumbs separator="/" items={items} />
<Breadcrumbs separator="•" items={items} />
<Breadcrumbs separator="▸" items={items} />
<Breadcrumbs separator="chevron-right" items={items} />

Folding into More

maxItems limits the number of original breadcrumb entries that remain visible; the More control does not count. When folding, itemsBeforeCollapse controls where More appears. Its default is 0, so More comes first and the most recent items remain visible. The final original item is always kept visible.

// More / Projects / Anta / Button.tsx
<Breadcrumbs maxItems={3} items={items} />

// Home / Workspace / More / src / Button.tsx
<Breadcrumbs maxItems={4} itemsBeforeCollapse={2} items={items} />

Copying the current item

An item with copy, copyNode, or copyUrl uses ButtonCopy while visible and MenuItemCopy if it is folded. Copy entries cannot combine with href. Mark a copying final item current when it represents the current page.

<Breadcrumbs
  items={[
    { label: 'Home', href: '/' },
    {
      label: 'Button.tsx',
      current: true,
      copy: 'src/components/Button.tsx',
      iconPlacement: 'trailing',
      copiedLabel: 'Path copied',
    },
  ]}
/>

import '@antadesign/anta/components/Breadcrumbs.css'
import '@antadesign/anta/elements'

<a-breadcrumbs role="navigation" aria-label="Project location" data-paddingless>
  <a href="/" data-anta role="button" priority="quaternary" paddingless>
    <a-button-label>Home</a-button-label>
  </a>
  <a-breadcrumb-separator aria-hidden="true">•</a-breadcrumb-separator>

  <a-button role="button" tabindex="0" priority="quaternary" paddingless
    aria-label="Show more breadcrumbs" aria-haspopup="menu">
    <a-icon shape="more" aria-hidden="true"></a-icon>
  </a-button>
  <a-menu autowidth>
    <a href="/workspace" data-anta-menu-item role="menuitem"><a-menu-item-label>Workspace</a-menu-item-label></a>
    <a href="/workspace/projects" data-anta-menu-item role="menuitem"><a-menu-item-label>Projects</a-menu-item-label></a>
  </a-menu>

  <a-breadcrumb-separator aria-hidden="true">•</a-breadcrumb-separator>
  <a href="/workspace/projects/anta" data-anta role="button" priority="quaternary"
    paddingless aria-current="page"><a-button-label>Anta</a-button-label></a>
</a-breadcrumbs>

<Breadcrumbs className="project-breadcrumbs" separator="chevron-right" items={items} />

.project-breadcrumbs a-breadcrumb-separator {
  width: 8px;
  color: var(--text-2);
}

<Box style={{ width: 280, maxWidth: '100%' }}>
  <Breadcrumbs className="scrolling-breadcrumbs" maxItems={3} items={[
    { label: 'Anta', href: '/' },
    { label: 'Documentation', href: '/box/' },
    { label: 'Layout components', href: '/panel/' },
    { label: 'Breadcrumbs', current: true },
  ]} />
</Box>

.scrolling-breadcrumbs { overflow-x: auto; }
.scrolling-breadcrumbs > :focus-visible { outline-offset: -1px; }