Breadcrumbs @astryx-svelte/core v0.3.0 · 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. |
| 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. |
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.