add breadcrumb component

lib/doggo.ex

@@ -123,6 +123,71 @@ defmodule Doggo do
     """
   end
 
+  @doc """
+  Renders a breadcrumb navigation.
+
+  ## Example
+
+  <.breadcrumb>
+    <:item patch="/categories">Categories</:item>
+    <:item patch="/categories/1">Reviews</:item>
+    <:item patch="/categories/1/articles/1">The Movie</:item>
+  </.breadcrumb>
+  """
+  attr :aria_label, :string, default: "breadcrumb"
+
+  attr :class, :any,
+    default: [],
+    doc: "Additional CSS classes. Can be a string or a list of strings."
+
+  attr :rest, :global, doc: "Any additional HTML attributes."
+
+  slot :item, required: true do
+    attr :navigate, :string
+    attr :patch, :string
+    attr :href, :string
+  end
+
+  def breadcrumb(%{item: items} = assigns) do
+    [last_item | rest] = Enum.reverse(items)
+
+    assigns =
+      assign(assigns, :item, Enum.reverse([{:current, last_item} | rest]))
+
+    ~H"""
+    <nav aria-label="Breadcrumb" class={["breadcrumb" | List.wrap(@class)]} {@rest}>
+      <ul>
+        <li :for={item <- @item}>
+          <.breadcrumb_link item={item} />
+        </li>
+      </ul>
+    </nav>
+    """
+  end
+
+  defp breadcrumb_link(%{item: {:current, current_item}} = assigns) do
+    assigns = assign(assigns, :item, current_item)
+
+    ~H"""
+    <.link
+      navigate={@item[:navigate]}
+      patch={@item[:patch]}
+      href={@item[:href]}
+      aria-current="page"
+    >
+      <%= render_slot(@item) %>
+    </.link>
+    """
+  end
+
+  defp breadcrumb_link(assigns) do
+    ~H"""
+    <.link navigate={@item[:navigate]} patch={@item[:patch]} href={@item[:href]}>
+      <%= render_slot(@item) %>
+    </.link>
+    """
+  end
+
   @doc """
   Renders a button.
 

priv/storybook/components/breadcrumb.story.exs

@@ -0,0 +1,18 @@
+defmodule Storybook.Components.Breadcrumb do
+  use PhoenixStorybook.Story, :component
+
+  def function, do: &Doggo.breadcrumb/1
+
+  def variations do
+    [
+      %Variation{
+        id: :default,
+        slots: [
+        ~s(<:item patch="/categories">Categories</:item>),
+        ~s(<:item patch="/categories/1">Reviews</:item>),
+        ~s(<:item patch="/categories/1/articles/1">The Movie</:item>)
+        ]
+      }
+    ]
+  end
+end