<.breadcrumb >
  <.breadcrumb_list>
    <.breadcrumb_item>
      <.breadcrumb_link href="/">Home</.breadcrumb_link>
    </.breadcrumb_item>
    <.breadcrumb_separator />
    <.breadcrumb_item>
      <.breadcrumb_link href="/components">Components</.breadcrumb_link>
    </.breadcrumb_item>
    <.breadcrumb_separator />
    <.breadcrumb_item>
      <.breadcrumb_page>Breadcrumb</.breadcrumb_page>
    </.breadcrumb_item>
  </.breadcrumb_list>
</.breadcrumb>

<.breadcrumb >
  <.breadcrumb_list>
    <%= for {{label, href}, idx} <- Enum.with_index([{"Home", "/"}, {"Products", "/products"}, {"Shoes", "/products/shoes"}, {"Sneakers", nil}]) do %>
      <.breadcrumb_separator :if={idx > 0} />
      <.breadcrumb_item>
        <%= if href do %>
          <.breadcrumb_link href={href}><%= label %></.breadcrumb_link>
        <% else %>
          <.breadcrumb_page><%= label %></.breadcrumb_page>
        <% end %>
      </.breadcrumb_item>
    <% end %>
  </.breadcrumb_list>
</.breadcrumb>

<.breadcrumb >
  <.breadcrumb_list>
    <.breadcrumb_item>
      <.breadcrumb_link href="/">Home</.breadcrumb_link>
    </.breadcrumb_item>
    <.breadcrumb_separator />
    <.breadcrumb_item>
      <.breadcrumb_ellipsis />
    </.breadcrumb_item>
    <.breadcrumb_separator />
    <.breadcrumb_item>
      <.breadcrumb_link href="/docs/components">Components</.breadcrumb_link>
    </.breadcrumb_item>
    <.breadcrumb_separator />
    <.breadcrumb_item>
      <.breadcrumb_page>Breadcrumb</.breadcrumb_page>
    </.breadcrumb_item>
  </.breadcrumb_list>
</.breadcrumb>