Reference generated from the custom elements manifest — 5 properties, 1 slots, 0 events.
PLAYGROUND1 CONTROL
PREVIEW / al-breadcrumbs / SOUTHLEFT
Loading preview
Components
Forms
Input
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
FIGMA AHEADSouthleft Design SystemFIGMA SET · Breadcrumbs
The Figma set changed since the last confirmed sync — the code is behind.
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--DefaultPASS
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';
import { ALBreadcrumbs } from '@southleft/al-react';
API — 5 PROPS5 DOCUMENTED
PROPTYPEDEFAULT
labelstringLabel attribute
- Provides an accessible name for the breadcrumbs element'Breadcrumb'
isTruncatedbooleanTruncated attribute
- **true** Collapse items under a ALPanel based on the itemsBefore/AfterCollpase properties
- **false** Do not collapse any breacrumb items—
itemsAfterCollapsenumberNumber of items to display after the Panel in the Truncated treatment
- Default is 11
itemsBeforeCollapsenumberNumber of items to display before the Panel in the Truncated treatment
- Default is 11
menuIdstringMenu id
- Unique id that associates the menu and popover components used in truncated breadcrumbs, so that the popover closes when a menu item is selected—
SLOTS1
SLOTDESCRIPTION
(default)The breadcrumbs content, a set of breadcrumb items
EVENTS0
THIS COMPONENT DECLARES NO EVENTS IN THE MANIFEST.
PUBLIC METHODS2
METHODDESCRIPTION
setHasSeparators()Set separators to slotted breadcrumb items 1. Loop through the items in the breadcrumbsItems array 2. If the item is the last in the array, mark it as the current item and do not apply a separator 3. Otherwise, apply a separator to the item indicating it's not the last item in the sequence
renderTruncatedItems()Render truncated breadcrumbs if isTruncated is true 1. Create a copy of the breadcrumbsItems array 2. Generate breadcrumb items dynamically with necessary properties and inner HTML 3. Identify the items to be collapsed based on the itemsBefore/AfterCollapsed properties 4. Replace the collapsed items with a Panel and add the items as list-items to the menu 5. Return the HTML string for the generated components