Packages
noora
0.41.0
0.86.0
0.85.0
0.84.1
0.84.0
0.83.2
0.83.1
0.83.0
0.82.7
0.82.6
0.82.5
0.82.4
0.82.3
0.82.2
0.82.1
0.82.0
0.81.4
0.81.3
0.81.2
0.81.1
0.81.0
0.80.1
0.80.0
0.79.1
0.79.0
0.78.1
0.78.0
0.77.4
0.77.3
0.77.2
0.77.1
0.77.0
0.76.0
0.75.0
0.74.0
0.73.0
0.72.0
0.71.0
0.70.0
0.69.1
0.69.0
0.68.0
0.67.0
0.66.0
0.65.0
0.64.2
0.64.1
0.64.0
0.63.2
0.63.1
0.63.0
0.62.0
0.61.0
0.60.0
0.59.0
0.58.0
0.57.0
0.56.1
0.56.0
0.55.0
0.54.0
0.53.1
0.53.0
0.52.1
0.52.0
0.51.0
0.50.1
0.50.0
0.49.0
0.48.0
0.47.0
0.46.0
0.45.0
0.44.3
0.44.2
0.44.1
0.44.0
0.43.0
0.42.0
0.41.0
0.40.6
0.40.5
0.40.4
0.40.3
0.40.2
0.40.1
0.40.0
0.39.1
0.39.0
0.38.0
0.37.0
0.36.0
0.35.0
0.34.0
0.33.0
0.32.1
0.32.0
0.31.0
0.30.0
0.29.2
0.29.1
0.29.0
0.28.5
0.28.4
0.28.3
0.28.2
0.28.1
0.28.0
0.27.0
0.26.1
0.26.0
0.25.0
0.24.0
0.23.1
0.23.0
0.22.1
0.22.0
0.21.0
0.20.0
0.19.0
0.18.0
0.17.0
0.16.0
0.15.0
0.14.0
0.13.0
0.12.1
0.12.0
0.11.2
0.11.1
0.11.0
0.10.0
0.9.0
0.8.0
0.7.0
0.6.1
0.6.0
0.5.1
0.5.0
0.4.0
0.3.2
0.3.1
0.3.0
0.2.2
0.2.0
0.1.0
0.1.0-rc.2
0.1.0-rc.1
0.1.0-alpha.6
0.1.0-alpha.5
0.1.0-alpha.4
0.1.0-alpha.3
0.1.0-alpha.2
0.1.0-alpha.1
A component library for Phoenix LiveView applications
Current section
Files
Jump to
Current section
Files
lib/noora/breadcrumbs.ex
defmodule Noora.Breadcrumbs do
@moduledoc """
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>
```
"""
use Phoenix.Component
import Noora.Avatar
import Noora.Dropdown
import Noora.Icon
import Noora.Utils
attr(:style, :string, values: ~w(slash arrow), default: "slash", doc: "The separator style between breadcrumbs")
slot(:inner_block, doc: "Breadcrumb items to be rendered")
attr(:rest, :global, doc: "Additional HTML attributes")
def breadcrumbs(assigns) do
~H"""
<div class="noora-breadcrumbs" data-style={@style} {@rest}>
{render_slot(@inner_block)}
</div>
"""
end
attr(:id, :string, required: true, doc: "Unique identifier for the breadcrumb component")
attr(:label, :string, required: true, doc: "Main text displayed in the breadcrumb trigger")
attr(:on_open_change, :string, default: nil, doc: "Event handler for when the breadcrumb opens")
attr(:on_highlight_change, :string,
default: nil,
doc: "Event handler for when the highlighted option changes"
)
attr(:on_select, :string, default: nil, doc: "Event handler for when an option is selected")
attr(:on_escape_key_down, :string,
default: nil,
doc: "Event handler for when the escape key is pressed"
)
attr(:on_pointer_down_outside, :string,
default: nil,
doc: "Event handler for when the pointer is pressed outside the breadcrumb"
)
attr(:on_focus_outside, :string,
default: nil,
doc: "Function called when the focus is moved outside the component"
)
attr(:on_interact_outside, :string,
default: nil,
doc: "Function called when an interaction happens outside the component"
)
attr(:show_avatar, :boolean, default: false, doc: "Whether to show the avatar")
attr(:avatar_color, :string,
values: ~w(gray red orange yellow azure blue purple pink),
default: "pink",
doc: "Color of the avatar when avatar is shown"
)
slot(:icon, doc: "Breadcrumb icon")
slot(:inner_block, doc: "Content to be rendered inside the breadcrumb menu")
attr(:rest, :global)
def breadcrumb(assigns) do
~H"""
<div
id={@id}
class="noora-breadcrumb"
phx-hook="NooraDropdown"
data-loop-focus
data-close-on-select
data-typeahead
data-on-open-change={@on_open_change}
data-on-highlight-change={@on_highlight_change}
data-on-select={@on_select}
data-on-escape-key-down={@on_escape_key_down}
data-on-pointer-down-outside={@on_pointer_down_outside}
data-on-focus-outside={@on_focus_outside}
data-on-interact-outside={@on_interact_outside}
data-positioning-offset-main-axis={6}
{@rest}
>
<button data-part="trigger">
<.avatar
:if={@show_avatar}
id={@id <> "-avatar"}
name={@label}
color={@avatar_color}
size="2xsmall"
data-part="avatar"
/>
<div :if={has_slot_content?(@icon, assigns) and not @show_avatar} data-part="icon">
{render_slot(@icon)}
</div>
<span data-part="label">{@label}</span>
<div :if={has_slot_content?(@inner_block, assigns)} data-part="selector">
<.selector />
</div>
</button>
<div :if={has_slot_content?(@inner_block, assigns)} data-part="positioner">
<div class="noora-dropdown-content" data-part="content">
{render_slot(@inner_block)}
</div>
</div>
</div>
<div data-part="slash"><.slash /></div>
<div data-part="arrow"><.chevron_right /></div>
"""
end
attr(:id, :string, required: false)
attr(:label, :string, required: true, doc: "Text displayed as the main content of the item")
attr(:value, :string, required: true, doc: "Value associated with the breadcrumb item")
attr(:selected, :boolean, default: false, doc: "Whether the item is selected")
attr(:href, :string, default: nil, doc: "Standard URL for navigation")
attr(:show_avatar, :boolean, default: false, doc: "Whether to show the avatar")
attr(:icon, :string, default: nil, doc: "Icon to display. Overrides `show_avatar`.")
attr(:avatar_color, :string,
values: ~w(gray red orange yellow azure blue purple pink),
default: "pink",
doc: "Color of the avatar when avatar is shown"
)
def breadcrumb_item(assigns) do
~H"""
<.dropdown_item value={@value} label={@label} href={@href} data-selected={@selected}>
<:left_icon :if={@show_avatar and is_nil(@icon)}>
<.avatar
id={(@id || @label) <> "-avatar"}
name={@label}
color={@avatar_color}
size="2xsmall"
data-part="avatar"
/>
<.icon :if={!is_nil(@icon)} name={@icon} />
</:left_icon>
<:right_icon><.check /></:right_icon>
</.dropdown_item>
"""
end
end