Example

<ul
  x-data="breadcrumb"
  :data-items="['item', 'item 2', 'item 4']"
  class="flex gap-x-2"
>
  <template x-for="(item, index) in items">
    <li class="flex gap-x-2">
      <a href="" x-text="item"></a>
      <span x-text="divider" x-show="index < items.length - 1"></span>
    </li>
  </template>
</ul>

Usage

<script defer src="https://cdn.jsdelivr.net/npm/litewind-alpine@0.x.x/components/breadcrumb/dist/cdn.min.js"></script>

The data for the component is provided by the breadcrumb function in the x-data directive and the props in the data-* attributes.

Props

data-items
[] String

Items to display.


data-divider
/ String

Character that divides the items.

Litewind-alpine 0.1.0