ナビゲーション v1.0.0

パンくずリスト

ページ階層を示すナビゲーションパス。セパレーターのカスタマイズ、 オーバーフロー時の中間項目の折りたたみ、リンク/テキスト項目に対応しています。 折りたたみ機能により、中間のパンくずが「...」省略ボタンの背後に隠れ、クリックで展開されるため、 長いパスでもUIを煩雑にせずスキャンしやすい状態を保てます。

プレビュー & コード

オプション

名前 型 デフォルト 説明
items * Array 必須 Array of hashes with `label:` (String, required) and `href:` (String, optional — nil = current page, rendered as plain text)
separator Symbol :chevron Separator icon between crumbs: :chevron, :slash, :arrow, or :dot
collapse_after Integer nil When set and item count exceeds this number + 1, middle items collapse behind a '...' ellipsis button that expands on click

変更履歴 v1.0.0

- Initial release with chevron, slash, arrow, and dot separators
- Collapsible overflow with Stimulus-powered expand on click
- Accessible nav/ol markup with aria-label and aria-current
- Dark mode support throughout

フルアクセスを取得

このコンポーネントと他のすべてのソースコードをアンロックしましょう。一回のお支払いで永久アクセス。

今すぐアクセスを取得