N-004 Navigation simple

How to create a breadcrumb navigation ブレッドクラムナビゲーションの作り方

Breadcrumb navigation showing hierarchical structure. Customize separators and hover effects. 階層構造を表示するパンくずリストナビゲーション。セパレーターとホバーエフェクトをカスタマイズできます。

breadcrumb navigation hierarchy path

ライブデモ Live Demo

概要・用途・特徴Overview, Usage & Features

何ができるかWhat it does

Breadcrumb navigation showing hierarchical structure. Customize separators and hover effects.

階層構造を表示するパンくずリストナビゲーション。セパレーターとホバーエフェクトをカスタマイズできます。

どこで使うかWhere to use

website header, dashboard sidebar, mobile menu, admin panel

ECサイト商品ページ、ドキュメントサイト、ブログカテゴリ、管理画面

特徴Key features

Semantic breadcrumb trail using <nav> and <ol>. Custom separator via CSS content or SVG icon. Current page marked aria-current="page". Responsive — truncates middle items on mobile. No JavaScript needed for basic display.

<nav>と<ol>を使用したセマンティックなパンくずリスト。CSS contentまたはSVGアイコンによるカスタム区切り文字。現在ページにaria-current="page"でマーク。レスポンシブ — モバイルでは中間アイテムを省略。基本表示にJavaScript不要。

調整可能パラメータ Adjustable Parameters

Parameter Default Description
separator—separator character (/, >, →, etc.)
hover color—link color on hover
current page style—current page styling (bold, color, etc.)

実装コード Implementation Code 

// 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;
}
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) => (
        <span key={item.label} style={{ display: "flex", alignItems: "center", gap: "8px" }}>
          <div 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>
          )}
        </span>
      ))}
    </nav>
  );
}
.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;
}

仕組みとカスタマイズHow It Works & Customization

仕組みHow it works

An <ol> inside <nav aria-label="breadcrumb"> holds <li> items. CSS ::after on each item (except the last) renders the separator character. The last item has font-weight: bold and aria-current="page". For responsive truncation, JavaScript or CSS hides middle items and shows an ellipsis.

<nav aria-label="breadcrumb">内の<ol>が<li>アイテムを保持。最後以外の各アイテムのCSS ::afterが区切り文字をレンダリング。最後のアイテムはfont-weight:boldとaria-current="page"を持つ。レスポンシブな省略にはJavaScriptまたはCSSが中間アイテムを非表示にして省略記号を表示。

カスタマイズ方法Customization

Replace the CSS ::after separator with an SVG chevron for a sharper look. Add schema.org BreadcrumbList JSON-LD to the page for SEO rich results. Make the last item non-linked (plain text) since it represents the current page.

CSS ::after区切り文字をSVGシェブロンに置き換えてシャープな外観に。SEOリッチリザルト用にページにschema.org BreadcrumbList JSON-LDを追加。現在のページを表すため最後のアイテムをリンクなし（プレーンテキスト）にする。

注意点Caveats

Always wrap breadcrumbs in <nav aria-label="breadcrumb"> so screen readers identify the landmark. Do not make the current page item a link — it should be plain text with aria-current="page".

スクリーンリーダーがランドマークを識別するためパンくずを常に<nav aria-label="breadcrumb">でラップしてください。現在のページアイテムをリンクにしないでください — aria-current="page"のプレーンテキストにしてください。

よくある質問 Frequently Asked Questions

How to customize the breadcrumb navigation? Breadcrumb Navigationをカスタマイズするには？

Modify the CSS custom properties and class styles defined in the code section. Key adjustable values include colors, sizes, durations, and spacing. See the Adjustable Parameters section for specific variables.

コードセクションで定義されているCSSカスタムプロパティとクラススタイルを変更してください。色、サイズ、時間、間隔が主な調整可能値です。具体的な変数は調整可能パラメータセクションを参照してください。

How to use the breadcrumb navigation in React? ReactでBreadcrumb Navigationを使うには？

Import the provided React component and its CSS file. The component accepts props for customization. Check the React code section for the full implementation and available props.

提供されているReactコンポーネントとCSSファイルをインポートしてください。コンポーネントのpropsでカスタマイズできます。完全な実装と利用可能なpropsはReactコードセクションを参照してください。

What are the performance implications of breadcrumb navigation? Breadcrumb Navigationのパフォーマンスへの影響は？

This implementation uses CSS transforms and opacity for animations, which are GPU-accelerated. It's lightweight and doesn't cause layout thrashing. Consider using prefers-reduced-motion for accessibility.

この実装はCSSのtransformとopacityを使用しており、GPUアクセラレーションされます。軽量でレイアウトスラッシングを引き起こしません。アクセシビリティのためにprefers-reduced-motionの使用を検討してください。

AIへの指示テンプレート AI Prompt Template

以下をAIに貼り付けると実装を依頼できます。 Paste the following into your AI assistant to request implementation.