Tailwind Component Breadcrumb

Jan 6, 2023

Tailwind Breadcrumb Component

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.


<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>


<script setup>const items = [  {    text: 'Home',    active: true  },  {    text: 'Library',    to: '#'  },  {    text: 'Data'  }]</script><template>  <t-breadcrumb :items="items"></t-breadcrumb></template>

NOTE: Github Repo of Tailwind Components

❤️ Is this article helpful?

Buy me a coffee ☕ or support my work via PayPal to keep this space 🖖 and ad-free.

Do send some 💖 to @d_luaz or share this article.

✨ By Desmond Lua

A dream boy who enjoys making apps, travelling and making youtube videos. Follow me on @d_luaz

👶 Apps I built

Travelopy - discover travel places in Malaysia, Singapore, Taiwan, Japan.