AI向け説明 AI Description

階層構造を表示するパンくずリスト。各項目はリンクとして機能し、最後の項目は現在のページを示すため、`pointer-events: none`でクリック不可にします。セパレーターは`::after`疑似要素または独立した要素で実装し、ホバー時の色変更は`transition`でスムーズにします。

A breadcrumb list showing hierarchical structure. Each item functions as a link, with the last item indicating the current page using `pointer-events: none` to disable clicks. Separators are implemented with `::after` pseudo-elements or independent elements, with smooth color changes on hover using `transition`.

調整可能パラメータ Adjustable Parameters

• separator — セパレーター文字（/, >, →など） separator character (/, >, →, etc.)
• hover color — ホバー時のリンク色 link color on hover
• current page style — 現在のページのスタイル（太字、色など） current page styling (bold, color, etc.)

実装 Implementation

HTML + CSS + JS

<nav class="breadcrumb" aria-label="Breadcrumb">
  <div class="breadcrumb__item">
    <a href="#" class="breadcrumb__link">Home</a>
  </div>
  <span class="breadcrumb__separator">/</span>
  <div class="breadcrumb__item">
    <a href="#" class="breadcrumb__link">Category</a>
  </div>
  <span class="breadcrumb__separator">/</span>
  <div class="breadcrumb__item">
    <a href="#" class="breadcrumb__link">Current Page</a>
  </div>
</nav>

<style>
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.breadcrumb__link {
  color: #5c6184;
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumb__link:hover {
  color: #5c6ac4;
}

.breadcrumb__item:last-child .breadcrumb__link {
  color: #1d2242;
  font-weight: 600;
  pointer-events: none;
}

.breadcrumb__separator {
  color: #5c6184;
  user-select: none;
}
</style>

React (JSX + CSS)

// react/N-004.jsx
import "./N-004.css";

const items = [
  { label: "Home", href: "/" },
  { label: "Category", href: "/category" },
  { label: "Current Page", href: null }
];

export default function BreadcrumbNavigation() {
  return (
    <nav className="breadcrumb" aria-label="Breadcrumb">
      {items.map((item, index) => (
        <>
          <div key={item.label} className="breadcrumb__item">
            {item.href ? (
              <a href={item.href} className="breadcrumb__link">
                {item.label}
              </a>
            ) : (
              <span className="breadcrumb__link">{item.label}</span>
            )}
          </div>
          {index < items.length - 1 && (
            <span className="breadcrumb__separator">/</span>
          )}
        </>
      ))}
    </nav>
  );
}

/* react/N-004.css */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.breadcrumb__link {
  color: #5c6184;
  text-decoration: none;
  transition: color 0.2s ease;
}

.breadcrumb__link:hover {
  color: #5c6ac4;
}

.breadcrumb__item:last-child .breadcrumb__link {
  color: #1d2242;
  font-weight: 600;
  pointer-events: none;
}

.breadcrumb__separator {
  color: #5c6184;
  user-select: none;
}