目次
SWELLのパンくずリストを一部だけクリック不可にする方法
お客様からのご依頼に基づく追加CSS記述のご紹介、読者の皆様のご参考になれば幸いです。
ホームだけ残すCSS設定
パンくずリストは便利なナビゲーションですが、構成によっては「ホーム以外は押せなくていい」と感じることもあります。
今回は、SWELLのパンくずリストでホームだけクリック可能にし、それ以外のリンクを無効化した実装例をご紹介します。
見出し構成
なぜパンくずリンクを制御したのか
サイト設計によっては、パンくずの途中階層をクリックできる必要がない場合があります。
誤タップや意図しない離脱を減らしたいときには、リンク制御が有効です。
使用したCSS
.p-breadcrumba {
pointer-events: none;
cursor: default;
text-decoration: none;
color: inherit;
}
.p-breadcrumba[href="/"],
.p-breadcrumba[href="https://URL/"] {
pointer-events: auto;
cursor: pointer;
}この実装の仕組み
まずパンくず内のリンクをすべて無効化し、そのあとホームURLだけ pointer-events: auto で復活させています。
この方法なら、必要な導線だけ残してシンプルに整理できます。
注意点
本番環境のURLと一致していないと、ホームリンクが復活しないことがあります。
相対パス / と絶対URLの両方を指定しておくと、環境差によるトラブルを避けやすくなります。
まとめ
パンくずは「全部使う」だけでなく、「必要なものだけ残す」という考え方もできます。
ユーザー導線をすっきりさせたい方におすすめの調整です。