概要

モダンで視覚的にわかりやすい、矢印（アロー）形状のパンくずリストナビゲーションです。 clip-pathを使用することで、CSSだけで美しく重なり合う矢印デザインを実現しています。ネガティブマージンを計算することで、各要素間に1pxの自然な境界線（ギャップ）を作り出しています。

コード

<nav aria-label="Breadcrumb" style="max-width: 100%; overflow-x: auto; padding: 4px; box-sizing: border-box;">
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a href="#">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon-home">
          <path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"></path>
          <polyline points="9 22 9 12 15 12 15 22"></polyline>
        </svg>
        Home
      </a>
    </li>
    <li class="breadcrumb-item"><a href="#">Products</a></li>
    <li class="breadcrumb-item"><a href="#">Electronics</a></li>
    <li class="breadcrumb-item active" aria-current="page">Smartphones</li>
  </ol>
</nav>

/* ナビゲーション全体のコンテナ */
.breadcrumb {
  display: inline-flex;
  list-style: none;
  padding: 0;
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: #cbd5e1; /* 境界線の色 */
  border: 1px solid #cbd5e1; /* 外枠 */
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.breadcrumb-item {
  display: flex;
}

/* リンクとアクティブ状態の共通スタイル */
.breadcrumb-item a,
.breadcrumb-item.active {
  display: flex;
  align-items: center;
  padding: 12px 24px 12px 36px;
  background-color: #ffffff;
  color: #475569;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  position: relative;
  transition: background-color 0.2s, color 0.2s;
  
  /* 矢印の形をclip-pathで作成 */
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%, 16px 50%);
  
  /* 前の要素と15px重ならせることで、1pxのギャップ（境界線）を作る */
  margin-left: -15px; 
}

/* アイコンの間隔調整 */
.breadcrumb-item a svg {
  margin-right: 6px;
}

/* 最初の要素の形と余白調整 */
.breadcrumb-item:first-child a {
  padding-left: 20px;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
  margin-left: 0;
}

/* 最後の要素（現在地）のスタイル */
.breadcrumb-item:last-child.active {
  padding-right: 24px;
  background-color: #3b82f6; /* プライマリーカラー */
  color: #ffffff;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 16px 50%);
}

/* ホバー時のスタイル */
.breadcrumb-item a:hover {
  background-color: #f8fafc;
  color: #0f172a;
}

/* ダークモード対応 */
@media (prefers-color-scheme: dark) {
  .breadcrumb {
    background-color: #334155; /* ダークモードでの境界線の色 */
    border-color: #334155;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
  }
  
  .breadcrumb-item a {
    background-color: #1e293b;
    color: #94a3b8;
  }
  
  .breadcrumb-item a:hover {
    background-color: #0f172a;
    color: #e2e8f0;
  }
  
  .breadcrumb-item:last-child.active {
    background-color: #3b82f6;
    color: #ffffff;
  }
}