Breadcrumb

Navigation hierarchy

Preview

Props Editor

✅ JSON is valid - Click "Preview Update" to see changes

Source Code

defmodule FeenixUiWeb.Components.BreadcrumbComponent do
  use Phoenix.Component

  def render(assigns) do
    assigns = assign_new(assigns, :items, fn -> [] end)

    ~H"""
    <nav class="flex" aria-label="Breadcrumb">
      <ol class="flex items-center space-x-2">
        <%= for {item, index} <- Enum.with_index(@items) do %>
          <li class="flex items-center">
            <%= if index > 0 do %>
              <svg class="w-4 h-4 text-gray-400 mx-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"></path>
              </svg>
            <% end %>
            <%= if item.href do %>
              <a href={item.href} class="text-sm font-medium text-primary-600 hover:text-primary-500">
                <%= item.text %>
              </a>
            <% else %>
              <span class="text-sm font-medium text-gray-500">
                <%= item.text %>
              </span>
            <% end %>
          </li>
        <% end %>
      </ol>
    </nav>
    """
  end
end