<al-breadcrumbs-item><ALBreadcrumbsItem> REACTbetaOPEN IN FIGMA ↗
Reference generated from the custom elements manifest — 5 properties, 1 slots, 0 events.
PLAYGROUND4 CONTROLS
PREVIEW / al-breadcrumbs-item / SOUTHLEFT
Loading preview
Page Name
target
FLAGS
CODE — HTML / REACT
Guidance
NOT YET AUTHORED · 20 COMPONENTS COVERED
NO USAGE GUIDANCE HAS BEEN WRITTEN FOR THIS COMPONENT YET. THE API BELOW IS GENERATED FROM THE MANIFEST AND IS COMPLETE; WHAT IS MISSING IS WHEN TO REACH FOR IT AND WHEN NOT TO.
FIGMA PARITYSOUTHLEFT DESIGN SYSTEM
BOTH CHANGEDSouthleft Design SystemFIGMA SET · Breadcrumbs Item
Code and Figma each changed since the last confirmed sync. Neither side should be overwritten blindly.
DECIDED BY
SOURCE HASH
FIGMA SIDE
OBSERVED
LAST CONFIRMED SYNC
2026-08-28
PUBLIC SURFACE
5 ATTR · 1 SLOT · 0 EVENT · 0 PART
A sha1 of every .ts/.scss byte in the component directory, compared against the hash stored at the last sync. It cannot say what changed, and a comment edit moves it. Re-stamping this component records a contract digest instead.
ACCESSIBILITYAXE 4.12.1
CHECKEVIDENCEDETAILRESULT
Default stateAXEbreadcrumbs-item--CurrentPASS
Advanced statesAXE3 further storiesPASS
Screen readerMANUALNo screen-reader pass has been recorded for this component.NOT RECORDED
Keyboard navigationINTERACTION TESTSNo interaction tests and no manual keyboard pass.NOT RECORDED
The CI gate disables color-contrast globally (libs/al-web-components/story-fixture/src/main.ts), so its result never reaches a test run. It is enabled for this measurement, and reported here whichever way it comes out.
NO CONTRAST VIOLATIONS ACROSS THIS COMPONENT’S 4 STORIES.
import '@southleft/al-web-components/components/breadcrumbs-item';
import { ALBreadcrumbsItem } from '@southleft/al-react';
API — 5 PROPS5 DOCUMENTED
PROPTYPEDEFAULT
hrefstringLink URL—
target'_blank' | '_self' | '_parent' | '_top'Target attribute for a link (i.e. set to _blank to open in new tab)—
isCurrentbooleanIndicates if this the is the currently active breadcrumb item
- **true** This is the current breadcrumb
- **false** This is not the current breadcrumb—
isTruncatedbooleanTruncated attribute
- Dynamically set by the ALBreadcrumbs
- **true** The slotted content does not display in an <a></a> or <button></button>
- **false** The slotted content does displays in an <a></a> or <button></button>—
hasSeparatorbooleanIndicates whether or not to add a separator icon after the breadcrumb item—
SLOTS1
SLOTDESCRIPTION
(default)The breadcrumb item's content, typically text
EVENTS0
THIS COMPONENT DECLARES NO EVENTS IN THE MANIFEST.