Packages
moon
2.76.1
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/components/breadcrumb/subcomponents/extended.ex
defmodule Moon.Components.Breadcrumb.Extended do
@moduledoc false
use Moon.StatelessComponent
alias Moon.Icons.ArrowsRight
prop(breadcrumbs, :list)
def render(assigns) do
~F"""
<nav aria-label="Breadcrumb">
<ol class="flex flex-wrap gap-2 items-center text-moon-14">
{#for {crumb, index} <- Enum.with_index(@breadcrumbs)}
<li class="flex items-center gap-2 text-trunks">
<ArrowsRight class="rtl:rotate-180" :if={index != 0} />
<span class={
"transition-colors duration-200 hover:text-bulma",
"text-bulma font-medium": index == Enum.count(@breadcrumbs) - 1
}>
<a href={crumb.link}>{crumb.name}</a>
</span>
</li>
{/for}
</ol>
</nav>
"""
end
end