<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>
<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.
data-items
[]
String
Items to display.
data-divider
/
String
Character that divides the items.