スマホ対応したパンくずリストを改行しないで、横スクロールで見れるようにするCSS。

ウェブサイトをスマホ対応しているとき、階層が深いサイトだとパンくずリストがゴチャって見えてしまうことってありますよね。

CSSで簡単に実装できる、横スクロールで見れるパンくずリストの実装をみていきます。

やりたいこと

こちらは当社サイトのパンくずリストです。スマホサイトだと横幅が小さいために改行されて表示されてしまいます。

これでも悪くはないのですが、スマホ画面の限られたスペースをパンくずリストで消費したくはないですよね。そんな時にこんなふうに表示できたらどうでしょう。

これで1行にまとまって、末尾が右に隠れるようになりました。

これを右スクロールするとこのように下層のパンくずリストが表示されます。

簡単なCSSで実装できますので、いってみましょう。

結論

.p-breadcrumb {
    /* はみ出し部分をスクロールする */
    overflow-x: scroll;

    /* テキストを改行しないようにする */
    word-break: keep-all;
    white-space: nowrap;

    /* スクロールの動きを滑らかにする */
    -webkit-overflow-scrolling: touch;
}

4行だけで簡単に設定できちゃいます。

最後の-webkit-overflow-scrolling: touch;は、iOSでスクロールした時に動きを滑らかにするためのCSSです。

これがないとスクロールが慣性で動かなくなるので、設定しておいた方がよいでしょう。