パンくずリンク|パンくずリスト（breadcrumb navigation）はどうコーディングするのが今風なんだろう。
ふとそんなことを思い立ってしまったので、名を知られたサイトのソースを覗き見して考えることにした。
パンくずリンクのデザインについてまとめられたBreadcrumbs In Web Design: Examples And Best Practicesという記事によれば、
よくあるデザインパターンは次の通りである。
- 1行テキスト
テキストを横並びにしただけの伝統的なパンくず。各ページリンクの間に区切り文字が入る。- ページタイトルを > で繋いだもの
- ページタイトルを > 以外の文字で繋いだもの
- シンプルなリンクの羅列
区切り文字を入れずに画像やCSSで階層を表現する。 - マルチステップ
開始から完了までの行程を表示する。 - サブナビゲーションつき
各ページリンクに属するページをマウスオーバーで表示する。 - インタラクティブなアクションつき
deliciousのパンくずリンクは階層表示とタグの絞込みを兼ねている - 実験的なもの
Booreilandはナビゲーションがパンくずリンクっぽい。
割合についてはWeb Design PracticesのBreadcrumb Navigationという記事が参考になるかも。
圧倒的に水平＋右矢印のデザインが多い。