SutraUI.Breadcrumb (Sutra UI v0.2.0)
View SourceDisplays the path to the current resource using a hierarchy of links.
Breadcrumbs help users understand their location within a site and navigate back to parent pages.
Examples
<.breadcrumb>
<:item navigate={~p"/"}>Home</:item>
<:item navigate={~p"/products"}>Products</:item>
<:item>Current Page</:item>
</.breadcrumb>Accessibility
- Uses
<nav>element witharia-label="Breadcrumb" - Uses ordered list for semantic structure
- Current page marked with
aria-current="page"
Summary
Functions
Renders a breadcrumb navigation component.
Functions
Renders a breadcrumb navigation component.
Attributes
class(:string) - Additional CSS classes. Defaults tonil.separator(:string) - The separator style between items. Defaults to"chevron". Must be one of"chevron", or"slash".- Global attributes are accepted. Additional HTML attributes. Supports all globals plus:
["id"].
Slots
item(required) - Breadcrumb items. Accepts attributes:navigate(:string) - The path to navigate to (makes it a link).href(:string) - External URL (makes it a link).class(:string) - Additional CSS classes for the item.