Breadcrumb navigation component for showing page hierarchy.
Features
- Semantic navigation structure
- Responsive design
- Customizable separators
- Home link support
- Collapsed mobile view
Examples
<%!-- Basic breadcrumb --%>
<.breadcrumb>
<:item href="/dashboard">Dashboard</:item>
<:item href="/projects">Projects</:item>
<:item active>Project Details</:item>
</.breadcrumb>
<%!-- With custom separator --%>
<.breadcrumb separator="→">
<:item href="/">Home</:item>
<:item href="/products">Products</:item>
<:item active>Product Details</:item>
</.breadcrumb>
<%!-- Icon breadcrumb --%>
<.breadcrumb>
<:item href="/"><.icon name="home" /></:item>
<:item href="/settings">Settings</:item>
<:item active>Profile</:item>
</.breadcrumb>
Summary
Functions
Attributes
separator(:string) - Separator between items. Defaults to"/".class(:string) - Defaults tonil.- Global attributes are accepted.
Slots
item(required) - Accepts attributes:href(:string)active(:boolean)icon(:boolean)
Breadcrumb item with icon support.
Attributes
href(:string)active(:boolean) - Defaults tofalse.icon(:string) - Defaults tonil.
Slots
inner_block