Breadcrumb

Navigation trail showing the user’s location in a hierarchy. and-breadcrumb renders a <nav aria-label> wrapping an <ol>; group and-breadcrumb-item children inside it and mark the last one current.

Example

HomeDocsBreadcrumb

<and-breadcrumb>
  <and-breadcrumb-item href="/" hide-separator>Home</and-breadcrumb-item>
  <and-breadcrumb-item href="/docs">Docs</and-breadcrumb-item>
  <and-breadcrumb-item current>Current page</and-breadcrumb-item>
</and-breadcrumb>

Properties

and-breadcrumb (root)

Property	Attribute	Description	Type	Default
size	size	Size variant for the breadcrumb trail.	"lg" | "md" | "sm"	'md'
navLabel	aria-label	Accessible label for the navigation.	string	'Breadcrumb'

and-breadcrumb-item

Property	Attribute	Description	Type	Default
current	current	Marks this item as the current page (adds aria-current).	boolean	false
hideSeparator	hide-separator	Hide the leading separator (typically for the first item).	boolean	false
href	href	Optional URL. When set, the item renders as a link.	string	undefined
size	size	Size variant — should match the parent breadcrumb size.	"lg" | "md" | "sm"	'md'

Events

Event	Description	Type
andBreadcrumbNavigate	Emitted when a breadcrumb link is activated.	CustomEvent<string>

This is a compound component — several @Component tags share the packages/web-components/src/components/and-breadcrumb/ directory, and Stencil's docs-readme output writes all of them to the same readme.md, so only the last-processed one survives. The tables above are hand-written from the source instead; keep them in sync manually.