Using utility classes
<nav aria-label="breadcrumb"> <ol class="flex"> <li>Home</li> <li><span class="text-gray-500 mx-2">/</span></li> <li><a href="#">Library</a></li> <li><span class="text-gray-500 mx-2">/</span></li> <li class="text-gray-500" aria-current="page">Data</li> </ol></nav>Create custom component classes
@layer components { .t-breadcrumb-sep { @apply text-gray-500; } .t-breadcrumb-item { @apply text-gray-500; } .t-breadcrumb-item a { @apply text-gray-500 no-underline; } .t-breadcrumb-item.active { @apply text-inherit; } .t-breadcrumb-item.active a { @apply t-link; }}NOTE: Refer Tailwind Custom Base CSS and Tailwind Organize Components CSS File.
Usage
<nav aria-label="breadcrumb"> <ol class="t-inline-container"> <li class="t-breadcrumb-item active">Home</li> <li class="t-breadcrumb-sep">/</li> <li class="t-breadcrumb-item active"><a href="#">Library</a></li> <li class="t-breadcrumb-sep">/</li> <li class="t-breadcrumb-item">Data</li> </ol></nav>Vue Component
<script setup>const props = defineProps({ items: { type: Array, required: true }})</script><template> <nav aria-label="breadcrumb"> <ol class="t-inline-container"> <template v-for="(item, key) in items"> <li class="t-breadcrumb-item" :class="{ active: item.active || item.to }"> <NuxtLink v-if="item.to" :to="item.to">{{ item.text }}</NuxtLink> <span v-else>{{ item.text }}</span> </li> <li v-if="key != items.length - 1" class="t-breadcrumb-sep">/</li> </template> </ol> </nav></template>Usage
<script setup>const items = [ { text: 'Home', active: true }, { text: 'Library', to: '#' }, { text: 'Data' }]</script><template> <t-breadcrumb :items="items"></t-breadcrumb></template>