Breadcrumbs @astryx-svelte/core v0.5.2 · Breadcrumbs
Usage
Breadcrumbs show a trail of links from the root to the current page. Use them at the top of detail pages, settings panels, or anywhere the user needs to see where they are and navigate back up.ts
Best practices
| Guidance | Practices |
|---|---|
| Do | Place breadcrumbs above the page heading so the user sees their location before reading the content. |
| Do | Keep labels short and match the page titles they link to: "Settings" not "Application Settings Page". |
| Do | Use the supporting variant in dense UIs like admin panels or sidebars where the breadcrumb should be subtle. |
| Do | Make the last item plain text, not a link; it represents the current page. The component does this automatically when you set isCurrent. |
| Do | The component implements the WAI-ARIA APG Breadcrumb pattern: a labelled nav landmark wrapping an ordered list, with aria-current="page" on the current item. A crumb with a menu additionally implements the APG Menu Button pattern, opening on Enter, Space or ArrowDown and closing on Escape. |
| Do | Give each trail its own label when a page renders more than one, so the nav landmarks stay distinguishable in a screen reader landmark list. |
| Don't | Use breadcrumbs as the primary navigation. They supplement a sidebar or top nav, not replace it. |
| Don't | Show breadcrumbs on top-level pages that have no parent; they add clutter without helping the user. |
| Don't | Let the trail grow beyond 5 levels. If you need more, consider simplifying the page hierarchy instead. |
| Don't | Mirror a separator the bidi algorithm already mirrors. An angle-quote glyph such as › is Bidi_Mirrored, so it flips under RTL on its own and rtlStyles.mirror would flip it back. An arrow glyph such as → and any Icon separator are not, so those do need rtlStyles.mirror through xstyle. |
Examples
Common configurations, variations, and states.Breadcrumbs — Separators
Swap the default "/" for a different character like chevrons, arrows, or dots. Use when the visual style of the page calls for a different separator.
Breadcrumbs — Deep Path
A 5-level breadcrumb trail for deeply nested content. Use in e-commerce, file browsers, or any UI with several levels of hierarchy.
Breadcrumbs — Menu item
Give a mid-trail crumb a
menu prop to turn it into a menu trigger for switching between sibling destinations. It reuses the same item API as DropdownMenu, so an existing option array (or composed item children) drops in verbatim. Breadcrumbs — Variants
Compare the default and supporting variants side by side. Use the supporting variant in dense UIs like admin panels where the breadcrumb should be subtle.
Breadcrumbs — Icons
Add icons before breadcrumb labels for quick recognition. Use a home icon on the root item and contextual icons on key sections.