Breadcrumb - JS + CSS

Breadcrumb

ReactVueJS + CSS

Struktur HTML

Copy

<nav class="ina-breadcrumb" aria-label="Breadcrumb">
  <ol class="ina-breadcrumb__list">
    <li class="ina-breadcrumb__item">
      <a href="/" class="ina-breadcrumb__link">
        <span class="ina-breadcrumb__text">Home</span>
      </a>
      <span class="ina-breadcrumb__separator" aria-hidden="true">
        <svg
          width="14"
          height="14"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M9 6l6 6-6 6"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </span>
    </li>
    <li class="ina-breadcrumb__item">
      <a href="/products" class="ina-breadcrumb__link">
        <span class="ina-breadcrumb__text">Products</span>
      </a>
      <span class="ina-breadcrumb__separator" aria-hidden="true">
        <svg
          width="14"
          height="14"
          viewBox="0 0 24 24"
          fill="none"
          xmlns="http://www.w3.org/2000/svg"
        >
          <path
            d="M9 6l6 6-6 6"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </svg>
      </span>
    </li>
    <li class="ina-breadcrumb__item">
      <span class="ina-breadcrumb__link ina-breadcrumb__link--active">
        <span class="ina-breadcrumb__text">Detail</span>
      </span>
    </li>
  </ol>
</nav>

Contoh Penggunaan

Default Breadcrumb

Preview Code

1. Home
2. Products
3. Detail

1. Home /
2. Category /
3. Subcategory /
4. Current Page

Copy

<div class="p-5 flex flex-col gap-6">
  <!-- Breadcrumb 1 -->
  <nav class="ina-breadcrumb" aria-label="Breadcrumb">
    <ol class="ina-breadcrumb__list">
      <li class="ina-breadcrumb__item">
        <a href="/" class="ina-breadcrumb__link">
          <span class="ina-breadcrumb__text">Home</span>
        </a>
        <span class="ina-breadcrumb__separator" aria-hidden="true">
          <svg
            width="14"
            height="14"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M9 6l6 6-6 6"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"></path>
          </svg>
        </span>
      </li>
      <li class="ina-breadcrumb__item">
        <a href="/products" class="ina-breadcrumb__link">
          <span class="ina-breadcrumb__text">Products</span>
        </a>
        <span class="ina-breadcrumb__separator" aria-hidden="true">
          <svg
            width="14"
            height="14"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M9 6l6 6-6 6"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"></path>
          </svg>
        </span>
      </li>
      <li class="ina-breadcrumb__item">
        <span class="ina-breadcrumb__link ina-breadcrumb__link--active">
          <span class="ina-breadcrumb__text">Detail</span>
        </span>
      </li>
    </ol>
  </nav>

  <!-- Breadcrumb 2 with custom separator -->
  <nav class="ina-breadcrumb" aria-label="Breadcrumb">
    <ol class="ina-breadcrumb__list">
      <li class="ina-breadcrumb__item">
        <a href="/" class="ina-breadcrumb__link">
          <span class="ina-breadcrumb__text">Home</span>
        </a>
        <span class="ina-breadcrumb__separator" aria-hidden="true">/</span>
      </li>
      <li class="ina-breadcrumb__item">
        <a href="/category" class="ina-breadcrumb__link">
          <span class="ina-breadcrumb__text">Category</span>
        </a>
        <span class="ina-breadcrumb__separator" aria-hidden="true">/</span>
      </li>
      <li class="ina-breadcrumb__item">
        <a href="/category/subcategory" class="ina-breadcrumb__link">
          <span class="ina-breadcrumb__text">Subcategory</span>
        </a>
        <span class="ina-breadcrumb__separator" aria-hidden="true">/</span>
      </li>
      <li class="ina-breadcrumb__item">
        <span class="ina-breadcrumb__link ina-breadcrumb__link--active">
          <span class="ina-breadcrumb__text">Current Page</span>
        </span>
      </li>
    </ol>
  </nav>
</div>

Breadcrumb dengan Custom Icon

Preview Code

1. Home
2. Products
3. Electronics
4. Detail

Copy

<div class="p-5">
  <nav class="ina-breadcrumb" aria-label="Breadcrumb">
    <ol class="ina-breadcrumb__list">
      <li class="ina-breadcrumb__item">
        <a href="/" class="ina-breadcrumb__link">
          <span class="ina-breadcrumb__icon">
            <svg
              width="16"
              height="16"
              viewBox="0 0 24 24"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M5 12l-2 0l9 -9l9 9l-2 0"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"></path>
              <path
                d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2 -2v-7"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"></path>
              <path
                d="M9 21v-6a2 2 0 0 1 2 -2h2a2 2 0 0 1 2 2v6"
                stroke="currentColor"
                stroke-width="2"
                stroke-linecap="round"
                stroke-linejoin="round"></path>
            </svg>
          </span>
          <span class="ina-breadcrumb__text">Home</span>
        </a>
        <span class="ina-breadcrumb__separator" aria-hidden="true">
          <svg
            width="14"
            height="14"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M9 6l6 6-6 6"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"></path>
          </svg>
        </span>
      </li>
      <li class="ina-breadcrumb__item">
        <a href="/products" class="ina-breadcrumb__link">
          <span class="ina-breadcrumb__text">Products</span>
        </a>
        <span class="ina-breadcrumb__separator" aria-hidden="true">
          <svg
            width="14"
            height="14"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M9 6l6 6-6 6"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"></path>
          </svg>
        </span>
      </li>
      <li class="ina-breadcrumb__item">
        <a href="/products/electronics" class="ina-breadcrumb__link">
          <span class="ina-breadcrumb__text">Electronics</span>
        </a>
        <span class="ina-breadcrumb__separator" aria-hidden="true">
          <svg
            width="14"
            height="14"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M9 6l6 6-6 6"
              stroke="currentColor"
              stroke-width="2"
              stroke-linecap="round"
              stroke-linejoin="round"></path>
          </svg>
        </span>
      </li>
      <li class="ina-breadcrumb__item">
        <span class="ina-breadcrumb__link ina-breadcrumb__link--active">
          <span class="ina-breadcrumb__text">Detail</span>
        </span>
      </li>
    </ol>
  </nav>
</div>

Di halaman ini

• Struktur HTML
• Contoh Penggunaan