# `Noora.Breadcrumbs`

Renders a breadcrumbs component with.

## Example

```elixir
<.breadcrumbs style="slash">
  <.breadcrumb id="home" label="Home" />
  <.breadcrumb id="products" label="Products" />
  <.breadcrumb id="category" label="Electronics" />
</.breadcrumbs>
```

# `breadcrumb`

## Attributes

* `id` (`:string`) (required) - Unique identifier for the breadcrumb component.
* `label` (`:string`) (required) - Main text displayed in the breadcrumb trigger.
* `href` (`:string`) - Navigation URL for the breadcrumb label. Defaults to `nil`.
* `on_open_change` (`:string`) - Event handler for when the breadcrumb opens. Defaults to `nil`.
* `on_highlight_change` (`:string`) - Event handler for when the highlighted option changes. Defaults to `nil`.
* `on_select` (`:string`) - Event handler for when an option is selected. Defaults to `nil`.
* `on_escape_key_down` (`:string`) - Event handler for when the escape key is pressed. Defaults to `nil`.
* `on_pointer_down_outside` (`:string`) - Event handler for when the pointer is pressed outside the breadcrumb. Defaults to `nil`.
* `on_focus_outside` (`:string`) - Function called when the focus is moved outside the component. Defaults to `nil`.
* `on_interact_outside` (`:string`) - Function called when an interaction happens outside the component. Defaults to `nil`.
* `show_avatar` (`:boolean`) - Whether to show the avatar. Defaults to `false`.
* `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"`.
* `badge_label` (`:string`) - Label for the badge displayed next to the breadcrumb label. Defaults to `nil`.
* `badge_color` (`:string`) - Color of the badge. Defaults to `"neutral"`. Must be one of `"neutral"`, `"destructive"`, `"warning"`, `"attention"`, `"success"`, `"information"`, `"focus"`, `"primary"`, or `"secondary"`.
* Global attributes are accepted.
## Slots

* `icon` - Breadcrumb icon.
* `inner_block` - Content to be rendered inside the breadcrumb menu.
* `footer` - Content rendered as a sticky footer below the scrollable items area.

# `breadcrumb_item`

## 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 to `false`.
* `href` (`:string`) - Standard URL for navigation. Defaults to `nil`.
* `show_avatar` (`:boolean`) - Whether to show the avatar. Defaults to `false`.
* `icon` (`:string`) - Icon to display. Overrides `show_avatar`. Defaults to `nil`.
* `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"`.
* `badge_label` (`:string`) - Label for the badge displayed next to the item label. Defaults to `nil`.
* `badge_color` (`:string`) - Color of the badge. Defaults to `"neutral"`. Must be one of `"neutral"`, `"destructive"`, `"warning"`, `"attention"`, `"success"`, `"information"`, `"focus"`, `"primary"`, or `"secondary"`.

# `breadcrumbs`

## 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.

---

*Consult [api-reference.md](api-reference.md) for complete listing*