Noora.Breadcrumbs (noora v0.11.0)
Renders a breadcrumbs component with.
Example
<.breadcrumbs style="slash">
<.breadcrumb id="home" label="Home" />
<.breadcrumb id="products" label="Products" />
<.breadcrumb id="category" label="Electronics" />
</.breadcrumbs>
Summary
Functions
Attributes
id
(:string
) (required) - Unique identifier for the breadcrumb component.label
(:string
) (required) - Main text displayed in the breadcrumb trigger.on_open_change
(:string
) - Event handler for when the breadcrumb opens. Defaults tonil
.on_highlight_change
(:string
) - Event handler for when the highlighted option changes. Defaults tonil
.on_select
(:string
) - Event handler for when an option is selected. Defaults tonil
.on_escape_key_down
(:string
) - Event handler for when the escape key is pressed. Defaults tonil
.on_pointer_down_outside
(:string
) - Event handler for when the pointer is pressed outside the breadcrumb. Defaults tonil
.on_focus_outside
(:string
) - Function called when the focus is moved outside the component. Defaults tonil
.on_interact_outside
(:string
) - Function called when an interaction happens outside the component. Defaults tonil
.show_avatar
(:boolean
) - Whether to show the avatar. Defaults tofalse
.avatar_color
(:string
) - Color of the avatar when avatar is shown. Defaults to"pink"
. Must be one of"gray"
,"red"
,"orange"
,"yellow"
,"azure"
,"blue"
,"purple"
, or"pink"
.- Global attributes are accepted.
Slots
icon
- Breadcrumb icon.inner_block
- Content to be rendered inside the breadcrumb menu.
Attributes
id
(:string
)label
(:string
) (required) - Text displayed as the main content of the item.value
(:string
) (required) - Value associated with the breadcrumb item.selected
(:boolean
) - Whether the item is selected. Defaults tofalse
.href
(:string
) - Standard URL for navigation. Defaults tonil
.show_avatar
(:boolean
) - Whether to show the avatar. Defaults tofalse
.avatar_color
(:string
) - Color of the avatar when avatar is shown. Defaults to"pink"
. Must be one of"gray"
,"red"
,"orange"
,"yellow"
,"azure"
,"blue"
,"purple"
, or"pink"
.
Attributes
style
(:string
) - The separator style between breadcrumbs. Defaults to"slash"
. Must be one of"slash"
, or"arrow"
.- Global attributes are accepted. Additional HTML attributes.
Slots
inner_block
- Breadcrumb items to be rendered.