Breadcrumb 03

<nav class="breadcrumb-basic" aria-label="パンくず">
  <ol class="breadcrumb-basic__list">
    <li class="breadcrumb-basic__item">
      <a class="breadcrumb-basic__link" href="#">ホーム</a>
    </li>
    <li class="breadcrumb-basic__item">
      <a class="breadcrumb-basic__link" href="#">カテゴリ</a>
    </li>
    <li class="breadcrumb-basic__item">
      <span class="breadcrumb-basic__current" aria-current="page"
        >現在のページ</span
      >
    </li>
  </ol>
</nav>

/* reset */
:where(ol).breadcrumb-basic__list {
  padding: 0;
  margin: 0;
  list-style: none;
}

:where(a).breadcrumb-basic__link {
  text-decoration: none;
}

/* snippet */
.breadcrumb-basic {
  --breadcrumb-link-color: #364153;
  --breadcrumb-link-color-hover: #2b36f5;
  --breadcrumb-current-color: #5e6775;
  --breadcrumb-focus-color: #2b36f5;
  --breadcrumb-focus-radius: 4px;
  --breadcrumb-separator: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M6 4l4 4-4 4' stroke='%23c3c6cb' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --breadcrumb-duration: 0.2s;
  --breadcrumb-easing: ease;

  width: 100%;
}

.breadcrumb-basic__list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.breadcrumb-basic__item {
  display: flex;
  gap: 4px;
  align-items: center;
  min-width: 0;
  font-size: 14px;
  line-height: 1.6;

  &:not(:last-child)::after {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    content: "";
    background-image: var(--breadcrumb-separator);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
  }
}

.breadcrumb-basic__link {
  color: var(--breadcrumb-link-color);
  border-radius: var(--breadcrumb-focus-radius);

  &:focus:not(:focus-visible) {
    outline: none;
  }

  &:focus-visible {
    outline: 2px solid var(--breadcrumb-focus-color);
    outline-offset: 2px;
  }
}

.breadcrumb-basic__current {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--breadcrumb-current-color);
  white-space: nowrap;
}

@media (any-hover: hover) {
  .breadcrumb-basic__link {
    transition: color var(--breadcrumb-duration) var(--breadcrumb-easing);
  }

  .breadcrumb-basic__link:hover {
    color: var(--breadcrumb-link-color-hover);
  }
}

@media (prefers-reduced-motion: reduce) {
  .breadcrumb-basic__link {
    transition: none;
  }
}

<nav class="breadcrumb-basic-slash" aria-label="パンくず">
  <ol class="breadcrumb-basic-slash__list">
    <li class="breadcrumb-basic-slash__item">
      <a class="breadcrumb-basic-slash__link" href="#">ホーム</a>
    </li>
    <li class="breadcrumb-basic-slash__item">
      <a class="breadcrumb-basic-slash__link" href="#">カテゴリ</a>
    </li>
    <li class="breadcrumb-basic-slash__item">
      <span class="breadcrumb-basic-slash__current" aria-current="page"
        >現在のページ</span
      >
    </li>
  </ol>
</nav>

/* reset */
:where(ol).breadcrumb-basic-slash__list {
  padding: 0;
  margin: 0;
  list-style: none;
}

:where(a).breadcrumb-basic-slash__link {
  text-decoration: none;
}

/* snippet */
.breadcrumb-basic-slash {
  --breadcrumb-link-color: #364153;
  --breadcrumb-link-color-hover: #2b36f5;
  --breadcrumb-current-color: #5e6775;
  --breadcrumb-separator-color: #c3c6cb;
  --breadcrumb-focus-color: #2b36f5;
  --breadcrumb-focus-radius: 4px;
  --breadcrumb-duration: 0.2s;
  --breadcrumb-easing: ease;

  width: 100%;
}

.breadcrumb-basic-slash__list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.breadcrumb-basic-slash__item {
  display: flex;
  gap: 4px;
  align-items: center;
  min-width: 0;
  font-size: 14px;
  line-height: 1.6;

  &:not(:last-child)::after {
    flex-shrink: 0;
    color: var(--breadcrumb-separator-color);
    content: "/";
  }
}

.breadcrumb-basic-slash__link {
  color: var(--breadcrumb-link-color);
  border-radius: var(--breadcrumb-focus-radius);

  &:focus:not(:focus-visible) {
    outline: none;
  }

  &:focus-visible {
    outline: 2px solid var(--breadcrumb-focus-color);
    outline-offset: 2px;
  }
}

.breadcrumb-basic-slash__current {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--breadcrumb-current-color);
  white-space: nowrap;
}

@media (any-hover: hover) {
  .breadcrumb-basic-slash__link {
    transition: color var(--breadcrumb-duration) var(--breadcrumb-easing);
  }

  .breadcrumb-basic-slash__link:hover {
    color: var(--breadcrumb-link-color-hover);
  }
}

@media (prefers-reduced-motion: reduce) {
  .breadcrumb-basic-slash__link {
    transition: none;
  }
}

<nav class="breadcrumb-basic-dot" aria-label="パンくず">
  <ol class="breadcrumb-basic-dot__list">
    <li class="breadcrumb-basic-dot__item">
      <a class="breadcrumb-basic-dot__link" href="#">ホーム</a>
    </li>
    <li class="breadcrumb-basic-dot__item">
      <a class="breadcrumb-basic-dot__link" href="#">カテゴリ</a>
    </li>
    <li class="breadcrumb-basic-dot__item">
      <span class="breadcrumb-basic-dot__current" aria-current="page"
        >現在のページ</span
      >
    </li>
  </ol>
</nav>

/* reset */
:where(ol).breadcrumb-basic-dot__list {
  padding: 0;
  margin: 0;
  list-style: none;
}

:where(a).breadcrumb-basic-dot__link {
  text-decoration: none;
}

/* snippet */
.breadcrumb-basic-dot {
  --breadcrumb-link-color: #364153;
  --breadcrumb-link-color-hover: #2b36f5;
  --breadcrumb-current-color: #5e6775;
  --breadcrumb-separator-color: #c3c6cb;
  --breadcrumb-focus-color: #2b36f5;
  --breadcrumb-focus-radius: 4px;
  --breadcrumb-duration: 0.2s;
  --breadcrumb-easing: ease;

  width: 100%;
}

.breadcrumb-basic-dot__list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

.breadcrumb-basic-dot__item {
  display: flex;
  gap: 4px;
  align-items: center;
  min-width: 0;
  font-size: 14px;
  line-height: 1.6;

  &:not(:last-child)::after {
    flex-shrink: 0;
    color: var(--breadcrumb-separator-color);
    content: "・";
  }
}

.breadcrumb-basic-dot__link {
  color: var(--breadcrumb-link-color);
  border-radius: var(--breadcrumb-focus-radius);

  &:focus:not(:focus-visible) {
    outline: none;
  }

  &:focus-visible {
    outline: 2px solid var(--breadcrumb-focus-color);
    outline-offset: 2px;
  }
}

.breadcrumb-basic-dot__current {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--breadcrumb-current-color);
  white-space: nowrap;
}

@media (any-hover: hover) {
  .breadcrumb-basic-dot__link {
    transition: color var(--breadcrumb-duration) var(--breadcrumb-easing);
  }

  .breadcrumb-basic-dot__link:hover {
    color: var(--breadcrumb-link-color-hover);
  }
}

@media (prefers-reduced-motion: reduce) {
  .breadcrumb-basic-dot__link {
    transition: none;
  }
}