Tailwind CSS Breadcrumb - Nuanxa

Komponen breadcrumb digunakan untuk menunjukkan lokasi halaman saat ini di dalam situs web atau aplikasi. Komponen ini mendukung berbagai gaya dan mudah dikustomisasi menggunakan Tailwind CSS.

Requires Nuanxa JS

Default breadcrumb

Komponen breadcrumb standar dengan tautan navigasi.

            
<nav class="flex" aria-label="Breadcrumb">
  <ol class="inline-flex items-center space-x-2 md:space-x-2">
    <li class="inline-flex items-center">
      <a
        href="#dashboard"
        class="items-center text-sm font-medium hover:text-red-600 transition-colors"
      >
        Dashboard
      </a>
    </li>

    <li class="flex items-center">
      <i class="fas fa-chevron-right mx-2 text-xs"></i>
      <a
        href="#setting"
        class="text-sm font-medium hover:text-red-600 transition-colors"
      >
        Setting
      </a>
    </li>

    <li class="flex items-center" aria-current="page">
      <i class="fas fa-chevron-right mx-2 text-xs"></i>
      <span class="text-sm font-medium text-gray-500">
        Profile
      </span>
    </li>
  </ol>
</nav>

Breadcrumb with card

Komponen breadcrumb yang dibungkus dalam container kartu.

            
<nav class="flex" aria-label="Breadcrumb">
  <ol
    class="bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-700 shadow-md shadow-gray-400 dark:shadow-gray-700 rounded-xl py-2 px-4 inline-flex items-center space-x-2 md:space-x-2"
  >
    <li class="inline-flex items-center">
      <a
        href="#dashboard"
        class="items-center text-sm font-medium hover:text-red-600 transition-colors"
      >
        Dashboard
      </a>
    </li>

    <li class="flex items-center">
      <i class="fas fa-chevron-right mx-2 text-xs"></i>
      <a
        href="#setting"
        class="text-sm font-medium hover:text-red-600 transition-colors"
      >
        Setting
      </a>
    </li>

    <li class="flex items-center" aria-current="page">
      <i class="fas fa-chevron-right mx-2 text-xs"></i>
      <span class="text-sm font-medium text-gray-500">
        Profile
      </span>
    </li>
  </ol>
</nav>

Breadcrumb slash

Komponen breadcrumb dengan pemisah garis miring.

            
<nav class="flex" aria-label="Breadcrumb">
  <ol class="inline-flex items-center space-x-2 md:space-x-2">
    <li class="inline-flex items-center">
      <a
        href="#dashboard"
        class="items-center text-sm font-medium hover:text-red-600 transition-colors"
      >
        Dashboard
      </a>
    </li>

    <li class="flex items-center">
      <i class="fas fa-chevron-right mx-2 text-xs"></i>
      <a
        href="#setting"
        class="text-sm font-medium hover:text-red-600 transition-colors"
      >
        Setting
      </a>
    </li>

    <li class="flex items-center" aria-current="page">
      <i class="fas fa-chevron-right mx-2 text-xs"></i>
      <span class="text-sm font-medium text-gray-500">
        Profile
      </span>
    </li>
  </ol>
</nav>

Badge

Button