Packages
moon
2.90.5
2.90.5
retired
2.90.4
2.90.3
2.90.2
2.90.1
2.90.0
2.89.4
2.89.1
2.89.0
2.88.0
2.87.11
2.87.10
2.87.9
2.87.8
2.87.7
2.87.6
2.87.5
2.87.4
2.87.3
2.87.2
2.87.1
2.87.0
2.86.1
2.86.0
2.85.1
2.85.0
2.84.0
2.83.0
2.82.0
2.81.4
2.81.3
2.81.2
2.81.1
2.81.0
2.80.2
2.80.1
2.80.0
2.79.13
2.79.12
2.79.11
2.79.10
2.79.9
2.79.8
2.79.7
2.79.6
2.79.5
2.79.4
2.79.3
2.79.2
2.79.1
2.79.0
2.78.4
2.78.3
2.78.2
2.78.1
2.78.0
2.77.0
2.76.5
2.76.4
2.76.3
2.76.2
2.76.1
2.76.0
2.75.0
2.74.1
2.74.0
2.73.8
2.73.7
2.73.6
2.73.5
2.73.4
2.73.3
2.73.2
2.73.1
2.73.0
2.72.5
2.72.4
2.72.3
2.72.2
2.72.1
2.72.0
2.71.1
2.71.0
2.70.0
2.69.2
2.69.1
2.69.0
2.68.11
2.68.10
Components-based design system written in elixir
Retired package: Deprecated - Package no longer supported. Use moon_live_view package instead
Current section
Files
Jump to
Current section
Files
lib/moon/design/breadcrumb/extended.ex
defmodule Moon.Design.Breadcrumb.Extended do
@moduledoc false
use Moon.StatelessComponent
alias Moon.Design.Breadcrumb.Item
@doc "Id of the component"
prop(id, :string)
@doc "Data-testid attribute for DOM element"
prop(testid, :string)
@doc "List of crumbs to display - Moon.Design.Breadcrumb.Crumb"
prop(breadcrumbs, :list)
@doc "Name of custom icon used as a divider between breadcrumb items"
prop(divider, :string)
@doc "Screen size, where breadcrumb items with multiple words are partially replaced with ellipsis (...)"
prop(responsive_crumbs_on, :string, values: ~w(sm md lg xl 2xl))
@doc "Additional Tailwind classes"
prop(divider_class, :css_class)
@doc "Additional Tailwind classes"
prop(class, :css_class)
@doc "Item slot"
slot(item)
def render(assigns) do
~F"""
<nav aria-label="Breadcrumb" {=@id} data-testid={@testid}>
<ol class="flex flex-wrap items-center">
{#for {crumb, index} <- Enum.with_index(@breadcrumbs)}
<#slot
{@item, crumb: crumb, index: index}
context_put={
value: index,
responsive_crumbs_on: @responsive_crumbs_on,
title: crumb.name,
href: crumb.link
}
>
<Item
{=@divider}
{=@responsive_crumbs_on}
{=@divider_class}
{=@class}
value={index}
href={crumb.link}
title={crumb.name}
icon={Map.get(crumb, :icon)}
/>
</#slot>
{/for}
</ol>
</nav>
"""
end
end