HTML・CSSでつくるパンくずリストのデザイン5選

シンプルなパンくずリスト。「ホーム」アイコンの有無は任意で選択することが可能です。リンクと分かりやすくするために、ホバーアニメーションを加えるのも良いですね。

矢印を塗りつぶしてみました。よりコンパクトに見せたい場合におすすめです。

区切りをスラッシュにしてみました。「/」という文字をそのまま指定しているので、矢印と比べて若干実装がシンプルになっています。

ダッシュボードのような矢印付きのパンくずリスト。白・黒をテーマカラーとしたサイトにおすすめです。

背景を単色にすることでより矢印が目立つようにしたパンくずリスト。文字色が白のため、背景はコントラスト強めの色にするのがおすすめです。