Components / Breadcrumb

Breadcrumb

A compositional path with native list and current-page semantics.

example.component.html

html

<aevko-breadcrumb label="Project path">
  <aevko-breadcrumb-item>
    <a href="/projects">
      Projects
    </a>
  </aevko-breadcrumb-item>
  <aevko-breadcrumb-item [current]="true">
    Aevko UI
  </aevko-breadcrumb-item>
</aevko-breadcrumb>

Installation

npx aevko-ui@latest add breadcrumb --yes

Source ownership

Customization

Compose links and the current label from native elements, then replace the separator slot with any icon system when the text fallback does not fit.

Edit locallyThe installed template and stylesheet are application code, not a black box.

Theme semanticallyOverride --aevko-* tokens or ordinary classes without !important.

Compose freelySlots accept native elements, SVG, images or Angular components.

API reference

Property or slot	Type	Default	Description
`label`	`string`	`'Breadcrumb'`	Accessible name for the navigation landmark.
`current`	`boolean`	`false`	Marks an item as the current page.
`separator`	`string`	`'/'`	Fallback separator between non-current items.
`aevkoBreadcrumbSeparator`	`projected slot`	`fallback string`	Replaces the fallback with an SVG, text or custom component.

Accessibility contract

Accessibility

Included behavior

The root is a named navigation landmark, items form a list and the current item exposes aria-current page.

Your responsibility

Keep the path concise, use real links for navigable ancestors and mark only the final location as current.

Back to all components