<.dm_breadcrumb id="breadcrumb-single-default" class="shadow px-8">
  <:crumb class="flex gap-2">
    <.dm_mdi name="home" class="w-4 h-4" />
    <a href="/">Home</a>
  </:crumb>
  <:crumb>
    <button type="button">Page</button>
  </:crumb>
</.dm_breadcrumb>

<.dm_breadcrumb id="breadcrumb-single-custom-icon" class="shadow w-full px-2">
  <:crumb>
    <a href="/">Home</a>
  </:crumb>
  <:crumb>
    <button type="button">Page</button>
  </:crumb>
</.dm_breadcrumb>

<.dm_breadcrumb id="breadcrumb-single-deep-path" class="shadow px-4">
  <:crumb><a href="/">Home</a></:crumb>
  <:crumb><a href="/docs">Documentation</a></:crumb>
  <:crumb><a href="/docs/components">Components</a></:crumb>
  <:crumb>Breadcrumb</:crumb>
</.dm_breadcrumb>

<.dm_breadcrumb id="breadcrumb-single-custom-separator" class="shadow px-4" separator=">">
  <:crumb><a href="/">Home</a></:crumb>
  <:crumb><a href="/products">Products</a></:crumb>
  <:crumb>Detail</:crumb>
</.dm_breadcrumb>

<.dm_breadcrumb
  id="breadcrumb-single-with-nav-label"
  class="shadow px-4"
  nav_label="Product navigation path"
>
  <:crumb><a href="/">Home</a></:crumb>
  <:crumb><a href="/shop">Shop</a></:crumb>
  <:crumb>Checkout</:crumb>
</.dm_breadcrumb>