Packages
petal_components
2.0.0
4.6.2
4.6.1
4.6.0
4.5.0
4.4.0
4.3.0
4.2.1
4.2.0
4.1.2
4.1.1
4.1.0
4.0.12
4.0.11
4.0.10
4.0.6
4.0.5
4.0.4
4.0.3
4.0.1
3.2.2
3.2.1
3.2.0
3.1.0
3.0.2
3.0.1
3.0.0
2.9.3
2.9.2
retired
2.9.1
retired
2.9.0
retired
2.8.4
2.8.3
2.8.2
2.8.1
2.8.0
2.7.4
2.7.3
2.7.2
2.7.1
2.7.0
2.6.1
2.6.0
2.5.2
2.5.1
2.5.0
2.4.3
2.4.2
2.4.1
2.4.0
2.3.0
2.2.1
2.2.0
2.1.2
2.1.1
2.1.0
2.0.6
2.0.5
2.0.4
2.0.3
2.0.2
2.0.1
2.0.0
1.9.3
1.9.2
1.9.1
1.9.0
1.8.0
1.7.1
1.7.0
1.6.2
1.6.1
1.6.0
1.5.5
1.5.4
1.5.3
1.5.2
1.5.1
1.5.0
1.4.9
1.4.8
1.4.7
1.4.6
1.4.5
1.4.4
1.4.3
1.4.2
1.4.1
1.4.0
1.3.0
1.2.14
1.2.13
1.2.12
1.2.11
1.2.10
1.2.9
1.2.8
1.2.7
1.2.6
1.2.5
1.2.4
1.2.3
1.2.2
1.2.1
1.2.0
1.1.6
1.1.5
1.1.4
1.1.3
1.1.2
1.1.1
1.1.0
1.0.8
1.0.7
1.0.6
1.0.5
1.0.4
1.0.3
1.0.2
1.0.1
1.0.0
0.19.10
0.19.9
0.19.8
0.19.7
0.19.6
0.19.5
0.19.4
0.19.3
0.19.2
0.19.1
0.19.0
0.18.5
0.18.4
0.18.3
0.18.2
0.18.1
0.18.0
0.17.7
0.17.6
0.17.5
0.17.4
0.17.3
0.17.2
0.17.1
0.17.0
0.16.0
0.15.0
0.14.1
0.14.0
0.13.7
0.13.6
0.13.5
0.13.4
0.13.3
0.13.2
0.13.1
0.13.0
0.12.0
0.11.4
0.11.3
0.11.2
0.11.1
0.11.0
0.10.8
0.10.7
0.10.6
0.10.5
0.10.4
0.10.3
0.10.2
0.10.1
0.10.0
0.9.3
0.9.2
0.9.1
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.1
0.2.0
0.1.0
Shadcn-style Phoenix LiveView components that AI assistants can actually use. Pair with the MCP server so AI coding tools can inspect the real component API.
Current section
Files
Jump to
Current section
Files
lib/petal_components/breadcrumbs.ex
defmodule PetalComponents.Breadcrumbs do
use Phoenix.Component
import PetalComponents.Icon
alias PetalComponents.Link
attr(:separator, :string, default: "slash", values: ["slash", "chevron"])
attr(:class, :any, default: nil, doc: "Parent div CSS class")
attr(:separator_class, :any, default: nil, doc: "Separator div CSS class")
attr(:link_class, :any, default: nil, doc: "Link class CSS")
attr(:links, :list, default: [], doc: "List of your links")
attr(:aria_label, :string, default: "Breadcrumbs", doc: "ARIA label for the nav")
attr(:rest, :global)
# Example:
# <.breadcrumbs separator="chevron"
# class="mt-3"
# link_class="!text-blue-500 text-sm font-semibold"
# links={[
# %{ label: "Link 1", to: "/" },
# %{ to: "/", icon: :home, icon_class="text-blue-500" },
# %{ label: "Link 1", to: "/", link_type: "patch|a|redirect" }
# ]}
# />
def breadcrumbs(assigns) do
~H"""
<nav {@rest} class={["pc-breadcrumbs", @class]} aria-label={@aria_label}>
<%= for {link, counter} <- Enum.with_index(@links) do %>
<%= if counter > 0 do %>
<.separator type={@separator} class={@separator_class} />
<% end %>
<Link.a
link_type={link[:link_type] || "a"}
to={link.to}
class={["pc-breadcrumb", @link_class]}
>
<div class="flex items-center gap-2">
<%= if link[:icon] do %>
<.icon name={link[:icon]} class={["pc-breadcrumb-icon", link[:icon_class]]} />
<% end %>
<%= if link[:label] do %>
<%= link.label %>
<% end %>
</div>
</Link.a>
<% end %>
</nav>
"""
end
defp separator(%{type: "slash"} = assigns) do
~H"""
<div aria-hidden="true" class={["pc-breadcrumbs__separator-slash", @class]}>/</div>
"""
end
defp separator(%{type: "chevron"} = assigns) do
~H"""
<div class={["pc-breadcrumbs__separator-chevron", @class]}>
<.icon
name="hero-chevron-right-solid"
aria-hidden="true"
class="pc-breadcrumbs__separator-chevron__icon"
/>
</div>
"""
end
end