Packages
moon
2.90.0
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
Current section
Files
Jump to
Current section
Files
lib/moon/design/breadcrumb.ex
defmodule Moon.Design.Breadcrumb do
@moduledoc false
use Moon.StatefulComponent
alias Moon.Design.Breadcrumb
@doc "Data-testid attribute for DOM element"
prop(testid, :string)
@doc "Additional Tailwind classes"
prop(class, :css_class)
@doc "List of crumbs to display - Moon.Design.Breadcrumb.Crumb"
prop(breadcrumbs, :list, default: [])
@doc "Number of visible crumbs. Additional ones collapse for a streamlined view"
prop(collapsible_crumbs, :integer, default: 4)
@doc "Name of custom icon used as a divider between breadcrumb items"
prop(divider, :string, default: "arrows_right")
@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(list_item_class, :css_class)
@doc "Additional Tailwind classes"
prop(divider_class, :css_class)
@doc "Items slot"
slot(item)
def render(assigns) do
~F"""
<div class={@class} data-testid={@testid}>
{#if Enum.count(@breadcrumbs) > @collapsible_crumbs}
<Breadcrumb.Collapsed
id={"#{@id}_inner_breadcrumb"}
breadcrumbs={@breadcrumbs}
{=@divider}
{=@responsive_crumbs_on}
class={@list_item_class}
{=@divider_class}
>
<:item :let={crumb: crumb, index: index}>
<#slot
{@item, crumb: crumb, index: index}
context_put={
value: index,
responsive_crumbs_on: @responsive_crumbs_on,
title: crumb.name,
href: crumb.link,
divider: @divider,
divider_class: @divider_class,
icon: crumb.icon
}
>
<Breadcrumb.Item
{=@divider}
{=@responsive_crumbs_on}
{=@divider_class}
class={@list_item_class}
value={index}
href={crumb.link}
title={crumb.name}
icon={Map.get(crumb, :icon)}
/>
</#slot>
</:item>
</Breadcrumb.Collapsed>
{#else}
<Breadcrumb.Extended
breadcrumbs={@breadcrumbs}
{=@divider}
{=@responsive_crumbs_on}
class={@list_item_class}
{=@divider_class}
>
<:item :let={crumb: crumb, index: index}>
<#slot
{@item, crumb: crumb, index: index}
context_put={
value: index,
responsive_crumbs_on: @responsive_crumbs_on,
title: crumb.name,
href: crumb.link,
divider: @divider,
divider_class: @divider_class
}
>
<Breadcrumb.Item
{=@divider}
{=@responsive_crumbs_on}
{=@divider_class}
class={@list_item_class}
value={index}
href={crumb.link}
title={crumb.name}
icon={Map.get(crumb, :icon)}
/>
</#slot>
</:item>
</Breadcrumb.Extended>
{/if}
</div>
"""
end
end