Live Demo
マウスでホバーするかTabキーで対象にフォーカスしてください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1273"><nav class="crumbs" aria-label="パンくずリスト"><button type="button"><small>01</small> Home</button><span aria-hidden="true">›</span><button type="button"><small>02</small> Works</button><span aria-hidden="true">›</span><button type="button"><small>03</small> Residential</button></nav><p class="caption">EXPLORE THE PATH</p></div>CSS
.tbx-1273{width:100%;min-height:218px;box-sizing:border-box;display:grid;place-content:center;justify-items:center;gap:14px;padding:22px 12px;background:#f5f0e6;font-family:system-ui,sans-serif;color:#423c30}.tbx-1273 *{box-sizing:border-box}
.tbx-1273 .crumbs{display:flex;align-items:center;gap:6px;max-width:100%;flex-wrap:wrap;justify-content:center;border:1px solid #d8ceb9;background:white;padding:10px 12px}.tbx-1273 .crumbs button{border:0;background:transparent;position:relative;padding:10px 3px;cursor:pointer;color:#544b3a;font:600 11px system-ui;display:flex;align-items:center;gap:5px;white-space:nowrap}
.tbx-1273 .crumbs button:after{content:'';position:absolute;height:2px;left:0;right:100%;bottom:3px;background:#ad6f4d;transition:right .3s}.tbx-1273 small{font-size:9px;color:#b18f78;transition:color .3s}.tbx-1273 .crumbs>span{color:#bbaa97;font-size:18px}
.tbx-1273 .crumbs button:is(:hover,:focus-visible){color:#a05a33}.tbx-1273 .crumbs button:is(:hover,:focus-visible):after{right:0}.tbx-1273 .crumbs button:is(:hover,:focus-visible) small{color:#a05a33}
.tbx-1273 .caption{font-size:9px;letter-spacing:.2em;margin:0;color:#afa08a}.tbx-1273 :focus-visible{outline:2px solid #ad6f4d;outline-offset:3px}
@media(max-width:360px){.tbx-1273 .crumbs{padding:9px 7px;gap:3px}.tbx-1273 .crumbs button{font-size:10px}}
@media(prefers-reduced-motion:reduce){.tbx-1273 *{transition:none!important}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Navigation, Breadcrumb
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末ではホバーができないため、フォーカス・タッチ操作を確認してください。
Browser：現行版のChrome・Safari・Firefox・Edgeを推奨。:has()を利用する素材は古いブラウザでは挙動が異なる場合があります。
Reduced Motion：prefers-reduced-motion: reduce 対応。