Skip to catalog content
Mado UI Open-code components

Source-owned · zero runtime dependencies

block · breadcrumbs

Breadcrumbs

A wrapping native breadcrumb navigation with application-owned links and current-page semantics.

Install with npx @madojs/ui@latest add breadcrumbs.

Composition

  • Use a labelled nav containing an ordered list of native links, followed by one non-link current-page item.

Public API

class mado-ui-breadcrumbs / list / item / link
Landmark, ordered-list and link presentation hooks.
attribute aria-label or aria-labelledby
Localized accessible name for the navigation landmark.
attribute aria-current="page"
Marks exactly one current destination.

Detected public classes

  • .mado-ui-breadcrumbs
  • .mado-ui-breadcrumbs-item
  • .mado-ui-breadcrumbs-link
  • .mado-ui-breadcrumbs-list

Detected public CSS properties

  • --mado-ui-breadcrumbs-color
  • --mado-ui-breadcrumbs-current-color
  • --mado-ui-breadcrumbs-font-size
  • --mado-ui-breadcrumbs-gap
  • --mado-ui-breadcrumbs-link-color
  • --mado-ui-breadcrumbs-link-hover-color
  • --mado-ui-breadcrumbs-row-gap
  • --mado-ui-breadcrumbs-separator-color
  • --mado-ui-color-action
  • --mado-ui-color-action-hover
  • --mado-ui-color-border
  • --mado-ui-color-text
  • --mado-ui-color-text-muted
  • --mado-ui-focus-ring
  • --mado-ui-radius-sm
  • --mado-ui-space-1
  • --mado-ui-space-2

Accessibility contract

  • URLs, landmark naming and the single current-page marker remain application-owned.
  • Visual separators are generated decoration and are not repeated by assistive technology.

Keyboard

  • The recipe adds no composite keyboard model; native interactive descendants keep their browser-defined keys and Tab order.

Focus

  • Focus remains on native links, buttons or controls. Presentational wrappers never become focusable.

Fallback

  • Without the copied stylesheet, the semantic source HTML remains readable and operable.

Installation graph

Direct dependencies

Resolved install order

Copied source

The CLI resolves each registry source path into the configured project target. Links below point to the exact catalog build tag.