Breadcrumbs

Hierarchy navigation with separators and a current-page marker.

Overview

  • Use an ordered path to show the current page within a hierarchy.

Aliases

breadcrumb trail

When to use

  • Use Breadcrumbs when the current page belongs to a clear hierarchy and users may need to move upward.
  • Keep the labels meaningful even when the full path wraps.

When not to use

  • Do not use Breadcrumbs when the user journey is not hierarchical.
  • Do not substitute Breadcrumbs for main navigation or step-by-step progress.

Structural parts

path item

item

Each path segment in order.

path divider

separator

Fixed chevron separator between items.

current page marker

current

Identifies the active path item.

Public interface

Props
NameTypeDefaultDescription
itemsArray<{ label: string; href?: string; current?: boolean }>—Ordered breadcrumb items.
size'sm' | 'md''md'Chooses the breadcrumb size recipe.
themeThemeContract—Sets the theme used to resolve component styles.
Slots
NameDescription
defaultBreadcrumbs is data-driven and does not expose item slots.

Variants, sizes, and states

Variants

  • default: Breadcrumbs uses one structural path recipe and varies mainly by size.

Sizes

  • sm: Compact breadcrumb trail
  • md: Default breadcrumb trail

States

  • link: Navigable breadcrumb item
  • current: Current page item

Accessibility

Semantics

  • Uses ordered path semantics with clear current-item treatment.

Keyboard

  • Only linked items participate in keyboard navigation.

Screen readers

  • The current breadcrumb is distinguishable from linked ancestors.

Checklist

  • Verify that the control has an accessible name.
  • Verify that keyboard focus is visible in every state and size.
  • Identify disabled, selected, and error states with text or symbols as well as color.

Tokens and CSS variables

root

--dk-breadcrumbs-gap
0.5rem

item

--dk-breadcrumbs-item-fg
#16181c
--dk-breadcrumbs-item-size
0.875rem
--dk-breadcrumbs-item-block-size
44px
--dk-breadcrumbs-item-inline-padding
0.5rem
--dk-breadcrumbs-item-radius
999px

separator

--dk-breadcrumbs-separator-fg
#95989d
--dk-breadcrumbs-separator-size
0.75rem

current

--dk-breadcrumbs-current-bg
#d7e9ff
--dk-breadcrumbs-current-fg
#000f4d
--dk-breadcrumbs-current-size
0.875rem
--dk-breadcrumbs-current-inline-padding
0.625rem
--dk-breadcrumbs-current-radius
999px

Implementation notes

  • Breadcrumbs uses a fixed chevron separator.

Examples

Starter

Short hierarchy

A compact path back to higher-level surfaces.

<Breadcrumbs items={[{ label: 'Workspace', href: '/components' }, { label: 'Release', href: '/components/card' }, { label: 'Production', current: true }]} />

Common patterns

Longer editorial path

Wrap-safe spacing matters when path labels are longer.

<Breadcrumbs size="sm" items={longPathItems} />

Edge cases

Shallow hierarchy

Current emphasis still matters even when the path is short.

<Breadcrumbs items={[{ label: 'Settings', current: true }]} />

Mathematical fixtures

Calculated fixtures; browser evidence is not collected. Layout estimates use declared text behavior and maximum token values.

breadcrumbs-md

pass

size=md

  • Evidence: mathematical
  • Coverage: complete (3 / 3 declared kinds evaluated)
  • Declared: contrast, target, layout
  • Evaluated: contrast, target, layout
  • Contrast: 89.9 Lc
  • Target: 44 px
  • Layout: root · wrap 299 px single-line estimate; 126 px minimum width
    220 px: pass 2 lines; 44 px estimated height320 px: pass 1 line; 44 px estimated height