AXIS Design System Lab
← All patterns

candidate · greenhouse-ui-platform

efeonce.breadcrumbs

Version 0.1.1. A published contract for products built by agents and humans.

HTML + CSS reference0.1.1

Reference implementation

Breadcrumbs

✓ AXIS Figma 205:234905

Navegación jerárquica para ubicar una página dentro de una estructura y permitir volver a sus ancestros sin duplicar CTAs de retorno.

AXIS
AXIS port

Default with optional icons

Prompt port

Chevrons with icon-only root

Prompt port

Animated comfortable trail

Prompt port

Ellipsis overflow menu

Variants

Functional density modes

Defaultdefault

Standard hierarchy with optional icons.

Compactcompact

Workbench hierarchy without icons.

Kinds

Semantic mappings

Page hierarchy
kind=pageHierarchyseparator=slash
Workbench hierarchy
kind=workbenchHierarchyseparator=slash
Design System specimen
kind=designSystemSpecimenseparator=slash
Legacy wrapper
kind=legacyseparator=chevron
Usage rules

Contract

Usa GreenhouseBreadcrumbs para jerarquía real de navegación. El último item es estado actual con aria-current="page"; los ancestros son links. No lo combines con botones “volver” en la misma zona.

El port shadcn se expresa con separator="chevrons", iconos y labelVisuallyHidden. El motion es opt-in, con targets cómodos de 40px y fallback de reduced-motion.

El overflow usa un trigger accesible y un action menu para los ancestros colapsados. La referencia es framework-agnostic; los adapters consumidores se revisan contra ella.

Framework-agnostic reference. Consumer adapters are reviewed against it.

Promotion evidence

Before stable

  • fixture:breadcrumbs-hierarchy
  • fixture:breadcrumbs-variants-kinds
  • fixture:breadcrumbs-overflow
  • fixture:breadcrumbs-motion
  • desktop-mobile-keyboard
  • reduced-motion
  • Keyboard and focus
  • 390 px responsive
  • Reduced motion