Packages

shadcn/ui-inspired component library for Phoenix LiveView with eject-based distribution. CSS-first theme system, 829 components across 20+ categories — Calendar, Chart, Animation, DnD, Editor, Collaboration, Typography, Navigation, Background, Surface, and more.

Current section

Files

Jump to
phia_ui priv templates components breadcrumb.ex.eex
Raw

priv/templates/components/breadcrumb.ex.eex

defmodule <%= @module_name %>.Components.UI.Breadcrumb do
@moduledoc """
Breadcrumb navigation component.
Ejected from PhiaUI — you own this copy. Customise freely.
## Example
<.breadcrumb>
<.breadcrumb_list>
<.breadcrumb_item>
<.breadcrumb_link href="/">Home</.breadcrumb_link>
</.breadcrumb_item>
<.breadcrumb_separator />
<.breadcrumb_item>
<.breadcrumb_page>Current</.breadcrumb_page>
</.breadcrumb_item>
</.breadcrumb_list>
</.breadcrumb>
"""
use Phoenix.Component
import <%= @module_name %>.ClassMerger, only: [cn: 1]
attr :class, :string, default: nil
attr :rest, :global
slot :inner_block, required: true
def breadcrumb(assigns) do
~H"""
<nav aria-label="breadcrumb" class={cn([@class])} {@rest}>
<%%= render_slot(@inner_block) %>
</nav>
"""
end
attr :class, :string, default: nil
attr :rest, :global
slot :inner_block, required: true
def breadcrumb_list(assigns) do
~H"""
<ol class={cn(["flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5", @class])} {@rest}>
<%%= render_slot(@inner_block) %>
</ol>
"""
end
attr :class, :string, default: nil
attr :rest, :global
slot :inner_block, required: true
def breadcrumb_item(assigns) do
~H"""
<li class={cn(["inline-flex items-center gap-1.5", @class])} {@rest}>
<%%= render_slot(@inner_block) %>
</li>
"""
end
attr :href, :string, default: nil
attr :navigate, :string, default: nil
attr :class, :string, default: nil
attr :rest, :global
slot :inner_block, required: true
def breadcrumb_link(assigns) do
~H"""
<a href={@href || @navigate} class={cn(["transition-colors hover:text-foreground hover:underline", @class])} {@rest}>
<%%= render_slot(@inner_block) %>
</a>
"""
end
attr :class, :string, default: nil
attr :rest, :global
slot :inner_block, required: true
def breadcrumb_page(assigns) do
~H"""
<span aria-current="page" class={cn(["font-normal text-foreground", @class])} {@rest}>
<%%= render_slot(@inner_block) %>
</span>
"""
end
attr :class, :string, default: nil
slot :inner_block
def breadcrumb_separator(assigns) do
~H"""
<li aria-hidden="true" class={cn(["[&>svg]:size-3.5", @class])}>
<%%= if @inner_block != [] do %>
<%%= render_slot(@inner_block) %>
<%% else %>
/
<%% end %>
</li>
"""
end
attr :class, :string, default: nil
attr :rest, :global
def breadcrumb_ellipsis(assigns) do
~H"""
<span aria-hidden="true" class={cn(["flex h-9 w-9 items-center justify-center", @class])} {@rest}>
</span>
"""
end
end