パンくずナビ

用途

階層的なナビゲーション。区切り文字カスタム + 自動省略対応。

特徴

• 階層リンク
• 区切り文字カスタム
• 長すぎる場合省略
• a11y 対応

コード（コピペ用）

export function Breadcrumb({ items }: { items: { label: string; href?: string }[] }) {
  return (
    <nav aria-label="Breadcrumb" style={{
      display: 'flex', gap: '.5rem', alignItems: 'center',
      fontFamily: 'serif', fontSize: '.7rem', letterSpacing: '.15em',
      textTransform: 'uppercase', color: 'rgba(255,255,255,.22)',
    }}>
      {items.map((it, i) => (
        <span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: '.5rem' }}>
          {it.href ? (
            <a href={it.href} style={{ color: 'rgba(255,255,255,.5)', textDecoration: 'none' }}>{it.label}</a>
          ) : (
            <span style={{ color: 'rgba(255,255,255,.85)' }}>{it.label}</span>
          )}
          {i < items.length - 1 && <span style={{ color: 'rgba(255,255,255,.07)' }}>/</span>}
        </span>
      ))}
    </nav>
  );
}

使い方

対象プロジェクトに該当ファイルをコピーして、props を流し込むだけ。

注意事項

• 依存パッケージを忘れず追加