Open demo

CSS code

HTML 
<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
  <symbol id="i-x" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6.5 6.5l11 11M17.5 6.5l-11 11"/></symbol>
  <symbol id="i-grid" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="3.5" width="7" height="7" rx="1.5"/><rect x="13.5" y="3.5" width="7" height="7" rx="1.5"/><rect x="3.5" y="13.5" width="7" height="7" rx="1.5"/><rect x="13.5" y="13.5" width="7" height="7" rx="1.5"/></symbol>
  <symbol id="i-truck" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 6.5h10v10h-10zM13.5 10h4l3 3.5v3h-7"/><circle cx="7.5" cy="18" r="1.7"/><circle cx="17" cy="18" r="1.7"/></symbol>
  <symbol id="i-layers" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3.5 8.5 4.5L12 12.5 3.5 8z"/><path d="m3.5 12 8.5 4.5 8.5-4.5M3.5 16l8.5 4.5 8.5-4.5"/></symbol>
  <symbol id="i-users" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="8.5" r="3.5"/><path d="M2.5 20c.6-3.6 3.2-5.5 6.5-5.5s5.9 1.9 6.5 5.5"/><path d="M16 5.2a3.3 3.3 0 0 1 0 6.6M18 14.8c2 .6 3.2 2.3 3.5 5.2"/></symbol>
  <symbol id="i-archive" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="4" width="17" height="5" rx="1.2"/><path d="M5 9v9.5A1.5 1.5 0 0 0 6.5 20h11a1.5 1.5 0 0 0 1.5-1.5V9M10 13h4"/></symbol>
  <symbol id="i-receipt" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3.5h12v17l-2-1.3-2 1.3-2-1.3-2 1.3-2-1.3-2 1.3z"/><path d="M9 8.5h6M9 12h6"/></symbol>
  <symbol id="i-sliders" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h9M17 7h3M4 17h3M11 17h9"/><circle cx="15" cy="7" r="2"/><circle cx="9" cy="17" r="2"/></symbol>
  <symbol id="i-menu" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h16M4 12h16M4 17h16"/></symbol>
  <symbol id="i-globe" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.5"/><path d="M3.5 12h17M12 3.5c2.3 2.4 3.4 5.2 3.4 8.5s-1.1 6.1-3.4 8.5c-2.3-2.4-3.4-5.2-3.4-8.5s1.1-6.1 3.4-8.5z"/></symbol>
  <symbol id="i-search" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="6.5"/><path d="m20 20-4.2-4.2"/></symbol>
  <symbol id="i-star" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m12 4 2.5 5 5.5.8-4 3.9.9 5.5L12 16.6l-4.9 2.6.9-5.5-4-3.9L9.5 9z"/></symbol>
  <symbol id="i-calendar" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="5" width="17" height="15.5" rx="2.5"/><path d="M3.5 10h17M8 3v4M16 3v4"/></symbol>
  <symbol id="i-message" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5.5h16v11H9.5L4 20.5z"/></symbol>
  <symbol id="i-logout" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M14 4h4.5A1.5 1.5 0 0 1 20 5.5v13a1.5 1.5 0 0 1-1.5 1.5H14"/><path d="M9.5 16.5 5 12l4.5-4.5M5 12h10"/></symbol>
</svg>
<div><span class="lbl">Responsive: sidebar from 992px, drawer below</span>
<div class="app">
  <nav class="oc oc-drawer oc-resp" id="tide-nav" popover aria-label="Tidewater">
    <div class="oc-head"><a class="oc-brand" href="#"><span class="oc-logo" aria-hidden="true">T</span>Tidewater</a><button class="oc-close" type="button" popovertarget="tide-nav" popovertargetaction="hide" aria-label="Close menu"><svg aria-hidden="true"><use href="#i-x"/></svg></button></div>
    <ul class="oc-list">
      <li><a class="oc-link" href="#"><svg aria-hidden="true"><use href="#i-grid"/></svg><span>Overview</span></a></li>
      <li><a class="oc-link" href="#" aria-current="page"><svg aria-hidden="true"><use href="#i-truck"/></svg><span>Shipments</span><span class="oc-count">36<span class="sr-only"> in transit</span></span></a></li>
      <li><a class="oc-link" href="#"><svg aria-hidden="true"><use href="#i-layers"/></svg><span>Fleet</span></a></li>
      <li><a class="oc-link" href="#"><svg aria-hidden="true"><use href="#i-users"/></svg><span>Drivers</span></a></li>
      <li><a class="oc-link" href="#"><svg aria-hidden="true"><use href="#i-archive"/></svg><span>Warehouses</span></a></li>
      <li><a class="oc-link" href="#"><svg aria-hidden="true"><use href="#i-receipt"/></svg><span>Invoices</span></a></li>
    </ul>
    <ul class="oc-list oc-foot">
      <li><a class="oc-link" href="#"><svg aria-hidden="true"><use href="#i-sliders"/></svg><span>Settings</span></a></li>
    </ul>
  </nav>
  <div class="oc-main">
    <div class="oc-bar"><button class="oc-open oc-open-resp" type="button" popovertarget="tide-nav" aria-label="Open menu"><svg aria-hidden="true"><use href="#i-menu"/></svg></button><span class="oc-bar-title">Shipments</span><span class="oc-bar-meta">Rotterdam hub</span></div>
    <div class="pg" style="--pg-bar:#bfdbfe">
    <div class="pg-head"><div><p class="pg-kicker">Rotterdam hub · Week 42</p><h2 class="pg-title">Shipments</h2></div><span class="pg-chip">36 in transit</span></div>
    <div class="pg-tiles"><div class="pg-tile"><span>On time</span><b>94.2%</b><em>+1.1 pts</em></div><div class="pg-tile"><span>Delayed</span><b>4</b></div><div class="pg-tile"><span>Delivered today</span><b>128</b></div></div>
    <div class="pg-chart" aria-hidden="true"><i style="height:50%"></i><i style="height:62%"></i><i style="height:58%"></i><i style="height:74%"></i><i style="height:66%"></i><i style="height:80%"></i><i style="height:70%"></i><i style="height:64%"></i><i style="height:86%"></i><i style="height:76%"></i><i style="height:68%"></i><i style="height:90%"></i></div>
  </div>
  </div>
</div></div>
<div><span class="lbl">Drawer at every width (phone app)</span>
<div class="app app-phone">
  <nav class="oc oc-drawer" id="trip-nav" popover aria-label="Wayfarer">
    <div class="oc-head"><a class="oc-brand" href="#"><span class="oc-logo" aria-hidden="true">W</span>Wayfarer</a><button class="oc-close" type="button" popovertarget="trip-nav" popovertargetaction="hide" aria-label="Close menu"><svg aria-hidden="true"><use href="#i-x"/></svg></button></div>
    <div class="oc-user"><span class="oc-avatar" aria-hidden="true">ML</span><div><b>Mei Lin</b><span>Explorer member</span></div></div>
    <ul class="oc-list">
      <li><a class="oc-link" href="#" aria-current="page"><svg aria-hidden="true"><use href="#i-globe"/></svg><span>Trips</span></a></li>
      <li><a class="oc-link" href="#"><svg aria-hidden="true"><use href="#i-search"/></svg><span>Explore</span></a></li>
      <li><a class="oc-link" href="#"><svg aria-hidden="true"><use href="#i-star"/></svg><span>Saved places</span><span class="oc-count">18<span class="sr-only"> saved</span></span></a></li>
      <li><a class="oc-link" href="#"><svg aria-hidden="true"><use href="#i-calendar"/></svg><span>Bookings</span></a></li>
      <li><a class="oc-link" href="#"><svg aria-hidden="true"><use href="#i-message"/></svg><span>Messages</span><span class="oc-count">2<span class="sr-only"> unread</span></span></a></li>
    </ul>
    <ul class="oc-list oc-foot">
      <li><a class="oc-link" href="#"><svg aria-hidden="true"><use href="#i-sliders"/></svg><span>Settings</span></a></li>
      <li><a class="oc-link" href="#"><svg aria-hidden="true"><use href="#i-logout"/></svg><span>Sign out</span></a></li>
    </ul>
  </nav>
  <div class="oc-main">
    <div class="oc-bar"><button class="oc-open" type="button" popovertarget="trip-nav" aria-label="Open menu"><svg aria-hidden="true"><use href="#i-menu"/></svg></button><span class="oc-bar-title">Trips</span><span class="oc-avatar" aria-hidden="true">ML</span></div>
    <div class="pg" style="--pg-bar:#bfdbfe">
    <div class="pg-head"><div><p class="pg-kicker">Next trip · in 18 days</p><h2 class="pg-title">Lisbon, 12–16 Nov</h2></div><span class="pg-chip">Confirmed</span></div>
    <div class="pg-tiles"><div class="pg-tile"><span>Flight</span><b>LX 2084</b></div><div class="pg-tile"><span>Nights</span><b>4</b></div></div>
    <div class="pg-chart" aria-hidden="true"><i style="height:40%"></i><i style="height:56%"></i><i style="height:48%"></i><i style="height:70%"></i><i style="height:62%"></i><i style="height:52%"></i><i style="height:66%"></i><i style="height:58%"></i></div>
  </div>
  </div>
</div></div>
CSS 
/* App shell */
.app{position:relative;display:flex;height:520px;background:#fff;border:1px solid #d6dce5;border-radius:16px;overflow:hidden;
  box-shadow:0 1px 2px rgba(15,23,42,.05),0 18px 40px -22px rgba(15,23,42,.28)}
.app-phone{width:100%;max-width:390px;height:620px;margin:0 auto;border-radius:28px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Sidebar contents */
.oc{--oc-accent:#1d4ed8;--oc-active-bg:#eaf1ff;--oc-active-ink:#1e40af;--oc-ink:#475569;--oc-strong:#0f172a;--oc-muted:#5b6474;
  --oc-line:#e5e9f0;--oc-hover:#f1f5f9;
  flex-direction:column;gap:2px;margin:0;padding:16px 14px;border:0;background:#fff;color:var(--oc-ink);font-size:.875rem}
.oc-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:2px 4px 14px 8px}
.oc-brand{display:flex;align-items:center;gap:10px;border-radius:8px;color:var(--oc-strong);font-size:1rem;font-weight:700;text-decoration:none}
.oc-logo{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--oc-accent);color:#fff;font-size:.85rem;font-weight:800}
.oc-close,.oc-open{display:grid;place-items:center;width:36px;height:36px;padding:0;border:1px solid #d3d9e2;border-radius:10px;background:#fff;
  color:var(--oc-strong,#0f172a);cursor:pointer;transition:background-color .15s}
.oc-close:hover,.oc-open:hover{background:#f1f5f9}
.oc-close svg,.oc-open svg{width:18px;height:18px}
.oc-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.oc-link{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px;color:var(--oc-ink);font-weight:500;text-decoration:none;
  transition:background-color .15s,color .15s}
.oc-link svg{width:18px;height:18px;flex:none}
.oc-link:hover{background:var(--oc-hover);color:var(--oc-strong)}
.oc-link[aria-current="page"]{background:var(--oc-active-bg);color:var(--oc-active-ink);font-weight:600}
.oc-count{margin-left:auto;padding:0 7px;border-radius:999px;background:var(--oc-accent);color:#fff;font-size:.7rem;font-weight:700;line-height:1.6}
.oc-foot{margin-top:auto;padding-top:12px;border-top:1px solid var(--oc-line)}
.oc a:focus-visible,.oc-close:focus-visible,.oc-open:focus-visible{outline:2px solid #1d4ed8;outline-offset:2px}

/* Drawer: a popover that slides in from the left. popovertarget opens it; Esc and outside clicks close it. */
.oc-drawer{position:fixed;inset:0 auto 0 0;width:min(300px,86vw);height:100%;max-height:none;overflow-y:auto;
  box-shadow:24px 0 48px -24px rgba(2,6,23,.5);translate:-100% 0;
  transition:translate .28s cubic-bezier(.3,0,.2,1),display .28s allow-discrete,overlay .28s allow-discrete}
.oc-drawer:popover-open{display:flex;translate:0 0}
@starting-style{.oc-drawer:popover-open{translate:-100% 0}}
.oc-drawer::backdrop{background:rgba(15,23,42,.45)}

/* Responsive: from 992px the same element sits in the layout as a normal sidebar */
@media (min-width:992px){
  .oc-resp{position:static;display:flex;flex:0 0 248px;width:auto;height:auto;translate:none;box-shadow:none;transition:none;border-right:1px solid var(--oc-line)}
  .oc-resp .oc-close,.oc-open-resp{display:none}
}

/* Content column with a top bar */
.oc-main{flex:1;min-width:0;display:flex;flex-direction:column}
.oc-bar{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid #e5e9f0;background:#fff}
.oc-bar-title{font-weight:700;color:#0f172a}
.oc-bar-meta{margin-left:auto;font-size:.8rem;color:#5b6474}
.oc-avatar{margin-left:auto;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#dbeafe;color:#1e3a8a;font-size:.72rem;font-weight:800}
.oc-user{display:flex;align-items:center;gap:12px;margin:0 0 12px;padding:12px;border-radius:12px;background:linear-gradient(135deg,#eff6ff,#e0e7ff)}
.oc-user .oc-avatar{margin:0;width:40px;height:40px;background:#1d4ed8;color:#fff}
.oc-user b{display:block;color:#0f172a;font-size:.9rem}
.oc-user span{font-size:.75rem;color:#475569}

@media (max-width:640px){.app:not(.app-phone){height:auto}}
@media (prefers-reduced-motion:reduce){.oc-drawer,.oc-link,.oc-close,.oc-open{transition:none}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS, Bootstrap 5.3.8 JS bundle

HTML 
<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
  <symbol id="i-grid" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="3.5" width="7" height="7" rx="1.5"/><rect x="13.5" y="3.5" width="7" height="7" rx="1.5"/><rect x="3.5" y="13.5" width="7" height="7" rx="1.5"/><rect x="13.5" y="13.5" width="7" height="7" rx="1.5"/></symbol>
  <symbol id="i-truck" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 6.5h10v10h-10zM13.5 10h4l3 3.5v3h-7"/><circle cx="7.5" cy="18" r="1.7"/><circle cx="17" cy="18" r="1.7"/></symbol>
  <symbol id="i-layers" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3.5 8.5 4.5L12 12.5 3.5 8z"/><path d="m3.5 12 8.5 4.5 8.5-4.5M3.5 16l8.5 4.5 8.5-4.5"/></symbol>
  <symbol id="i-users" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="8.5" r="3.5"/><path d="M2.5 20c.6-3.6 3.2-5.5 6.5-5.5s5.9 1.9 6.5 5.5"/><path d="M16 5.2a3.3 3.3 0 0 1 0 6.6M18 14.8c2 .6 3.2 2.3 3.5 5.2"/></symbol>
  <symbol id="i-archive" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="4" width="17" height="5" rx="1.2"/><path d="M5 9v9.5A1.5 1.5 0 0 0 6.5 20h11a1.5 1.5 0 0 0 1.5-1.5V9M10 13h4"/></symbol>
  <symbol id="i-receipt" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3.5h12v17l-2-1.3-2 1.3-2-1.3-2 1.3-2-1.3-2 1.3z"/><path d="M9 8.5h6M9 12h6"/></symbol>
  <symbol id="i-sliders" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h9M17 7h3M4 17h3M11 17h9"/><circle cx="15" cy="7" r="2"/><circle cx="9" cy="17" r="2"/></symbol>
  <symbol id="i-menu" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h16M4 12h16M4 17h16"/></symbol>
  <symbol id="i-globe" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.5"/><path d="M3.5 12h17M12 3.5c2.3 2.4 3.4 5.2 3.4 8.5s-1.1 6.1-3.4 8.5c-2.3-2.4-3.4-5.2-3.4-8.5s1.1-6.1 3.4-8.5z"/></symbol>
  <symbol id="i-search" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="6.5"/><path d="m20 20-4.2-4.2"/></symbol>
  <symbol id="i-star" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m12 4 2.5 5 5.5.8-4 3.9.9 5.5L12 16.6l-4.9 2.6.9-5.5-4-3.9L9.5 9z"/></symbol>
  <symbol id="i-calendar" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="5" width="17" height="15.5" rx="2.5"/><path d="M3.5 10h17M8 3v4M16 3v4"/></symbol>
  <symbol id="i-message" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5.5h16v11H9.5L4 20.5z"/></symbol>
  <symbol id="i-logout" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M14 4h4.5A1.5 1.5 0 0 1 20 5.5v13a1.5 1.5 0 0 1-1.5 1.5H14"/><path d="M9.5 16.5 5 12l4.5-4.5M5 12h10"/></symbol>
</svg>
<div><span class="lbl">Responsive: sidebar from 992px, drawer below</span>
<div class="app d-flex">
  <div class="offcanvas-lg offcanvas-start oc d-flex" tabindex="-1" id="tideNav" aria-label="Tidewater menu">
    <div class="oc-head d-flex align-items-center justify-content-between"><a class="oc-brand d-flex align-items-center text-decoration-none" href="#"><span class="oc-logo d-grid text-white" style="place-items:center" aria-hidden="true">T</span>Tidewater</a><button class="btn-close d-lg-none" type="button" data-bs-dismiss="offcanvas" data-bs-target="#tideNav" aria-label="Close menu"></button></div>
    <nav class="offcanvas-body d-flex" aria-label="Tidewater">
      <ul class="nav nav-pills flex-column">
        <li class="nav-item"><a class="nav-link" href="#"><svg aria-hidden="true"><use href="#i-grid"/></svg><span>Overview</span></a></li>
        <li class="nav-item"><a class="nav-link active" href="#" aria-current="page"><svg aria-hidden="true"><use href="#i-truck"/></svg><span>Shipments</span><span class="badge rounded-pill">36<span class="visually-hidden"> in transit</span></span></a></li>
        <li class="nav-item"><a class="nav-link" href="#"><svg aria-hidden="true"><use href="#i-layers"/></svg><span>Fleet</span></a></li>
        <li class="nav-item"><a class="nav-link" href="#"><svg aria-hidden="true"><use href="#i-users"/></svg><span>Drivers</span></a></li>
        <li class="nav-item"><a class="nav-link" href="#"><svg aria-hidden="true"><use href="#i-archive"/></svg><span>Warehouses</span></a></li>
        <li class="nav-item"><a class="nav-link" href="#"><svg aria-hidden="true"><use href="#i-receipt"/></svg><span>Invoices</span></a></li>
      </ul>
      <ul class="nav nav-pills flex-column oc-foot mt-auto">
        <li class="nav-item"><a class="nav-link" href="#"><svg aria-hidden="true"><use href="#i-sliders"/></svg><span>Settings</span></a></li>
      </ul>
    </nav>
  </div>
  <div class="oc-main flex-grow-1 d-flex flex-column">
    <div class="oc-bar d-flex align-items-center"><button class="btn oc-open d-lg-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#tideNav" aria-controls="tideNav" aria-label="Open menu"><svg aria-hidden="true"><use href="#i-menu"/></svg></button><span class="oc-bar-title">Shipments</span><span class="oc-bar-meta ms-auto">Rotterdam hub</span></div>
    <div class="pg" style="--pg-bar:#bfdbfe">
    <div class="pg-head"><div><p class="pg-kicker">Rotterdam hub · Week 42</p><h2 class="pg-title">Shipments</h2></div><span class="pg-chip">36 in transit</span></div>
    <div class="pg-tiles"><div class="pg-tile"><span>On time</span><b>94.2%</b><em>+1.1 pts</em></div><div class="pg-tile"><span>Delayed</span><b>4</b></div><div class="pg-tile"><span>Delivered today</span><b>128</b></div></div>
    <div class="pg-chart" aria-hidden="true"><i style="height:50%"></i><i style="height:62%"></i><i style="height:58%"></i><i style="height:74%"></i><i style="height:66%"></i><i style="height:80%"></i><i style="height:70%"></i><i style="height:64%"></i><i style="height:86%"></i><i style="height:76%"></i><i style="height:68%"></i><i style="height:90%"></i></div>
  </div>
  </div>
</div></div>
<div><span class="lbl">Drawer at every width (phone app)</span>
<div class="app app-phone d-flex">
  <div class="offcanvas offcanvas-start oc" tabindex="-1" id="tripNav" aria-label="Wayfarer menu">
    <div class="oc-head d-flex align-items-center justify-content-between"><a class="oc-brand d-flex align-items-center text-decoration-none" href="#"><span class="oc-logo d-grid text-white" style="place-items:center" aria-hidden="true">W</span>Wayfarer</a><button class="btn-close" type="button" data-bs-dismiss="offcanvas" aria-label="Close menu"></button></div>
    <nav class="offcanvas-body d-flex" aria-label="Wayfarer">
      <div class="oc-user d-flex align-items-center"><span class="oc-avatar d-grid rounded-circle" style="place-items:center" aria-hidden="true">ML</span><div><b>Mei Lin</b><span>Explorer member</span></div></div>
      <ul class="nav nav-pills flex-column">
        <li class="nav-item"><a class="nav-link active" href="#" aria-current="page"><svg aria-hidden="true"><use href="#i-globe"/></svg><span>Trips</span></a></li>
        <li class="nav-item"><a class="nav-link" href="#"><svg aria-hidden="true"><use href="#i-search"/></svg><span>Explore</span></a></li>
        <li class="nav-item"><a class="nav-link" href="#"><svg aria-hidden="true"><use href="#i-star"/></svg><span>Saved places</span><span class="badge rounded-pill">18<span class="visually-hidden"> saved</span></span></a></li>
        <li class="nav-item"><a class="nav-link" href="#"><svg aria-hidden="true"><use href="#i-calendar"/></svg><span>Bookings</span></a></li>
        <li class="nav-item"><a class="nav-link" href="#"><svg aria-hidden="true"><use href="#i-message"/></svg><span>Messages</span><span class="badge rounded-pill">2<span class="visually-hidden"> unread</span></span></a></li>
      </ul>
      <ul class="nav nav-pills flex-column oc-foot mt-auto">
        <li class="nav-item"><a class="nav-link" href="#"><svg aria-hidden="true"><use href="#i-sliders"/></svg><span>Settings</span></a></li>
        <li class="nav-item"><a class="nav-link" href="#"><svg aria-hidden="true"><use href="#i-logout"/></svg><span>Sign out</span></a></li>
      </ul>
    </nav>
  </div>
  <div class="oc-main flex-grow-1 d-flex flex-column">
    <div class="oc-bar d-flex align-items-center"><button class="btn oc-open" type="button" data-bs-toggle="offcanvas" data-bs-target="#tripNav" aria-controls="tripNav" aria-label="Open menu"><svg aria-hidden="true"><use href="#i-menu"/></svg></button><span class="oc-bar-title">Trips</span><span class="oc-avatar d-grid rounded-circle ms-auto" style="place-items:center" aria-hidden="true">ML</span></div>
    <div class="pg" style="--pg-bar:#bfdbfe">
    <div class="pg-head"><div><p class="pg-kicker">Next trip · in 18 days</p><h2 class="pg-title">Lisbon, 12–16 Nov</h2></div><span class="pg-chip">Confirmed</span></div>
    <div class="pg-tiles"><div class="pg-tile"><span>Flight</span><b>LX 2084</b></div><div class="pg-tile"><span>Nights</span><b>4</b></div></div>
    <div class="pg-chart" aria-hidden="true"><i style="height:40%"></i><i style="height:56%"></i><i style="height:48%"></i><i style="height:70%"></i><i style="height:62%"></i><i style="height:52%"></i><i style="height:66%"></i><i style="height:58%"></i></div>
  </div>
  </div>
</div></div>
CSS 
/* App shell. The sidebar is Bootstrap's Offcanvas: .offcanvas-lg (sidebar from 992px, drawer below) and .offcanvas (drawer at every width). */
.app{position:relative;height:520px;background:#fff;border:1px solid #d6dce5;border-radius:16px;overflow:hidden;
  box-shadow:0 1px 2px rgba(15,23,42,.05),0 18px 40px -22px rgba(15,23,42,.28)}
.app-phone{width:100%;max-width:390px;height:620px;margin:0 auto;border-radius:28px}

.oc{--oc-accent:#1d4ed8;--oc-active-ink:#1e40af;--oc-strong:#0f172a;--oc-line:#e5e9f0;--oc-hover:#f1f5f9;
  --bs-offcanvas-width:min(300px,86vw);--bs-offcanvas-border-width:0;--bs-offcanvas-box-shadow:24px 0 48px -24px rgba(2,6,23,.5);
  --bs-offcanvas-padding-x:14px;--bs-offcanvas-padding-y:16px;--bs-offcanvas-transition:transform .28s cubic-bezier(.3,0,.2,1);
  flex-direction:column;padding:16px 14px;background:#fff;font-size:.875rem;box-shadow:var(--bs-offcanvas-box-shadow)}
.oc .offcanvas-body{flex-direction:column;flex-grow:1;padding:0}
.oc .nav{--bs-nav-link-color:#475569;--bs-nav-link-hover-color:var(--oc-strong);--bs-nav-link-padding-x:12px;--bs-nav-link-padding-y:9px;
  --bs-nav-link-font-size:.875rem;--bs-nav-link-font-weight:500;--bs-nav-pills-border-radius:9px;
  --bs-nav-pills-link-active-bg:#eaf1ff;--bs-nav-pills-link-active-color:var(--oc-active-ink);gap:2px;flex-wrap:nowrap}
.oc .nav-link{display:flex;align-items:center;gap:11px;line-height:1.5}
.oc .nav-link svg{width:18px;height:18px;flex:none}
.oc .nav-link:not(.active):hover{background:var(--oc-hover)}
.oc .nav-link.active{font-weight:600}
.oc .badge{margin-left:auto;padding:0 7px;background:var(--oc-accent);font-size:.7rem;line-height:1.6}
.oc-head{padding:2px 4px 14px 8px}
.oc-brand{gap:10px;border-radius:8px;color:var(--oc-strong);font-size:1rem;font-weight:700}
.oc-logo{width:30px;height:30px;border-radius:9px;background:var(--oc-accent);font-size:.85rem;font-weight:800}
.oc .btn-close,.oc-open{width:36px;height:36px;padding:0;border:1px solid #d3d9e2;border-radius:10px;background-size:9px;opacity:1}
.oc-open{--bs-btn-hover-bg:#f1f5f9;--bs-btn-color:#0f172a;--bs-btn-hover-color:#0f172a;display:grid;place-items:center}
.oc-open svg{width:18px;height:18px}
.oc .btn-close:hover{background-color:#f1f5f9}
.oc-foot{padding-top:12px;border-top:1px solid var(--oc-line)}
.oc .nav-link:focus-visible,.oc a:focus-visible,.oc .btn-close:focus-visible,.oc-open:focus-visible{box-shadow:none;outline:2px solid #1d4ed8;outline-offset:2px}
@media (min-width:992px){
  .oc.offcanvas-lg{flex:0 0 248px;border-right:1px solid var(--oc-line);box-shadow:none;overflow-y:auto}
}

.oc-main{min-width:0}
.oc-bar{gap:12px;padding:12px 18px;border-bottom:1px solid #e5e9f0;background:#fff}
.oc-bar-title{font-weight:700;color:#0f172a}
.oc-bar-meta{font-size:.8rem;color:#5b6474}
.oc-avatar{width:32px;height:32px;background:#dbeafe;color:#1e3a8a;font-size:.72rem;font-weight:800}
.oc-user{gap:12px;margin:0 0 12px;padding:12px;border-radius:12px;background:linear-gradient(135deg,#eff6ff,#e0e7ff)}
.oc-user .oc-avatar{width:40px;height:40px;background:#1d4ed8;color:#fff}
.oc-user b{display:block;color:#0f172a;font-size:.9rem}
.oc-user span{font-size:.75rem;color:#475569}
@media (max-width:640px){.app:not(.app-phone){height:auto}}
@media (prefers-reduced-motion:reduce){.oc{--bs-offcanvas-transition:none}.oc .nav-link{transition:none}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<svg width="0" height="0" style="position:absolute" aria-hidden="true" focusable="false">
  <symbol id="i-x" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6.5 6.5l11 11M17.5 6.5l-11 11"/></symbol>
  <symbol id="i-grid" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="3.5" width="7" height="7" rx="1.5"/><rect x="13.5" y="3.5" width="7" height="7" rx="1.5"/><rect x="3.5" y="13.5" width="7" height="7" rx="1.5"/><rect x="13.5" y="13.5" width="7" height="7" rx="1.5"/></symbol>
  <symbol id="i-truck" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 6.5h10v10h-10zM13.5 10h4l3 3.5v3h-7"/><circle cx="7.5" cy="18" r="1.7"/><circle cx="17" cy="18" r="1.7"/></symbol>
  <symbol id="i-layers" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m12 3.5 8.5 4.5L12 12.5 3.5 8z"/><path d="m3.5 12 8.5 4.5 8.5-4.5M3.5 16l8.5 4.5 8.5-4.5"/></symbol>
  <symbol id="i-users" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="9" cy="8.5" r="3.5"/><path d="M2.5 20c.6-3.6 3.2-5.5 6.5-5.5s5.9 1.9 6.5 5.5"/><path d="M16 5.2a3.3 3.3 0 0 1 0 6.6M18 14.8c2 .6 3.2 2.3 3.5 5.2"/></symbol>
  <symbol id="i-archive" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="4" width="17" height="5" rx="1.2"/><path d="M5 9v9.5A1.5 1.5 0 0 0 6.5 20h11a1.5 1.5 0 0 0 1.5-1.5V9M10 13h4"/></symbol>
  <symbol id="i-receipt" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M6 3.5h12v17l-2-1.3-2 1.3-2-1.3-2 1.3-2-1.3-2 1.3z"/><path d="M9 8.5h6M9 12h6"/></symbol>
  <symbol id="i-sliders" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h9M17 7h3M4 17h3M11 17h9"/><circle cx="15" cy="7" r="2"/><circle cx="9" cy="17" r="2"/></symbol>
  <symbol id="i-menu" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 7h16M4 12h16M4 17h16"/></symbol>
  <symbol id="i-globe" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="8.5"/><path d="M3.5 12h17M12 3.5c2.3 2.4 3.4 5.2 3.4 8.5s-1.1 6.1-3.4 8.5c-2.3-2.4-3.4-5.2-3.4-8.5s1.1-6.1 3.4-8.5z"/></symbol>
  <symbol id="i-search" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="6.5"/><path d="m20 20-4.2-4.2"/></symbol>
  <symbol id="i-star" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m12 4 2.5 5 5.5.8-4 3.9.9 5.5L12 16.6l-4.9 2.6.9-5.5-4-3.9L9.5 9z"/></symbol>
  <symbol id="i-calendar" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="5" width="17" height="15.5" rx="2.5"/><path d="M3.5 10h17M8 3v4M16 3v4"/></symbol>
  <symbol id="i-message" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M4 5.5h16v11H9.5L4 20.5z"/></symbol>
  <symbol id="i-logout" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M14 4h4.5A1.5 1.5 0 0 1 20 5.5v13a1.5 1.5 0 0 1-1.5 1.5H14"/><path d="M9.5 16.5 5 12l4.5-4.5M5 12h10"/></symbol>
</svg>
<div><span class="mb-3.5 block text-[.72rem] tracking-[.12em] text-[#5b6474] uppercase">Responsive: sidebar from 992px, drawer below</span>
<div class="relative flex h-[520px] overflow-hidden rounded-2xl max-[640px]:h-auto border border-[#d6dce5] bg-white shadow-[0_1px_2px_rgba(15,23,42,.05),0_18px_40px_-22px_rgba(15,23,42,.28)]">
  <nav class="fixed inset-y-0 right-auto left-0 m-0 hidden h-full max-h-none w-[min(300px,86vw)] -translate-x-full flex-col gap-0.5 overflow-y-auto border-0 bg-white px-3.5 py-4 text-[.875rem] text-[#475569] shadow-[24px_0_48px_-24px_rgba(2,6,23,.5)] transition-[translate,display,overlay] transition-discrete duration-[280ms] ease-[cubic-bezier(.3,0,.2,1)] backdrop:bg-[rgba(15,23,42,.45)] open:flex open:translate-x-0 starting:open:-translate-x-full motion-reduce:transition-none min-[992px]:static min-[992px]:flex min-[992px]:h-auto min-[992px]:w-auto min-[992px]:flex-none min-[992px]:basis-[248px] min-[992px]:translate-x-0 min-[992px]:border-r min-[992px]:border-[#e5e9f0] min-[992px]:shadow-none min-[992px]:transition-none" id="tide-nav" popover aria-label="Tidewater">
    <div class="flex items-center justify-between gap-2 pt-0.5 pr-1 pb-3.5 pl-2"><a class="flex items-center gap-2.5 rounded-lg text-[1rem] font-bold text-[#0f172a] no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#1d4ed8]" href="#"><span class="grid size-[30px] place-items-center rounded-[9px] bg-[#1d4ed8] text-[.85rem] font-extrabold text-white" aria-hidden="true">T</span>Tidewater</a><button class="grid size-9 cursor-pointer place-items-center rounded-[10px] border border-[#d3d9e2] bg-white p-0 text-[#0f172a] transition-colors duration-150 hover:bg-[#f1f5f9] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#1d4ed8] motion-reduce:transition-none min-[992px]:hidden" type="button" popovertarget="tide-nav" popovertargetaction="hide" aria-label="Close menu"><svg class="size-[18px]" aria-hidden="true"><use href="#i-x"/></svg></button></div>
    <ul class="m-0 flex list-none flex-col gap-0.5 p-0">
      <li><a class="flex items-center gap-[11px] rounded-[9px] px-3 py-[9px] font-medium text-[#475569] no-underline transition-colors duration-150 hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#1d4ed8] motion-reduce:transition-none aria-[current=page]:bg-[#eaf1ff] aria-[current=page]:font-semibold aria-[current=page]:text-[#1e40af]" href="#"><svg class="size-[18px] flex-none" aria-hidden="true"><use href="#i-grid"/></svg><span>Overview</span></a></li>
      <li><a class="flex items-center gap-[11px] rounded-[9px] px-3 py-[9px] font-medium text-[#475569] no-underline transition-colors duration-150 hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#1d4ed8] motion-reduce:transition-none aria-[current=page]:bg-[#eaf1ff] aria-[current=page]:font-semibold aria-[current=page]:text-[#1e40af]" href="#" aria-current="page"><svg class="size-[18px] flex-none" aria-hidden="true"><use href="#i-truck"/></svg><span>Shipments</span><span class="ml-auto rounded-full bg-[#1d4ed8] px-[7px] text-[.7rem] leading-[1.6] font-bold text-white">36<span class="sr-only"> in transit</span></span></a></li>
      <li><a class="flex items-center gap-[11px] rounded-[9px] px-3 py-[9px] font-medium text-[#475569] no-underline transition-colors duration-150 hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#1d4ed8] motion-reduce:transition-none aria-[current=page]:bg-[#eaf1ff] aria-[current=page]:font-semibold aria-[current=page]:text-[#1e40af]" href="#"><svg class="size-[18px] flex-none" aria-hidden="true"><use href="#i-layers"/></svg><span>Fleet</span></a></li>
      <li><a class="flex items-center gap-[11px] rounded-[9px] px-3 py-[9px] font-medium text-[#475569] no-underline transition-colors duration-150 hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#1d4ed8] motion-reduce:transition-none aria-[current=page]:bg-[#eaf1ff] aria-[current=page]:font-semibold aria-[current=page]:text-[#1e40af]" href="#"><svg class="size-[18px] flex-none" aria-hidden="true"><use href="#i-users"/></svg><span>Drivers</span></a></li>
      <li><a class="flex items-center gap-[11px] rounded-[9px] px-3 py-[9px] font-medium text-[#475569] no-underline transition-colors duration-150 hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#1d4ed8] motion-reduce:transition-none aria-[current=page]:bg-[#eaf1ff] aria-[current=page]:font-semibold aria-[current=page]:text-[#1e40af]" href="#"><svg class="size-[18px] flex-none" aria-hidden="true"><use href="#i-archive"/></svg><span>Warehouses</span></a></li>
      <li><a class="flex items-center gap-[11px] rounded-[9px] px-3 py-[9px] font-medium text-[#475569] no-underline transition-colors duration-150 hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#1d4ed8] motion-reduce:transition-none aria-[current=page]:bg-[#eaf1ff] aria-[current=page]:font-semibold aria-[current=page]:text-[#1e40af]" href="#"><svg class="size-[18px] flex-none" aria-hidden="true"><use href="#i-receipt"/></svg><span>Invoices</span></a></li>
    </ul>
    <ul class="m-0 mt-auto flex list-none flex-col gap-0.5 border-t border-[#e5e9f0] p-0 pt-3">
      <li><a class="flex items-center gap-[11px] rounded-[9px] px-3 py-[9px] font-medium text-[#475569] no-underline transition-colors duration-150 hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#1d4ed8] motion-reduce:transition-none aria-[current=page]:bg-[#eaf1ff] aria-[current=page]:font-semibold aria-[current=page]:text-[#1e40af]" href="#"><svg class="size-[18px] flex-none" aria-hidden="true"><use href="#i-sliders"/></svg><span>Settings</span></a></li>
    </ul>
  </nav>
  <div class="flex min-w-0 flex-1 flex-col">
    <div class="flex items-center gap-3 border-b border-[#e5e9f0] bg-white px-[18px] py-3"><button class="grid size-9 cursor-pointer place-items-center rounded-[10px] border border-[#d3d9e2] bg-white p-0 text-[#0f172a] transition-colors duration-150 hover:bg-[#f1f5f9] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#1d4ed8] motion-reduce:transition-none min-[992px]:hidden" type="button" popovertarget="tide-nav" aria-label="Open menu"><svg class="size-[18px]" aria-hidden="true"><use href="#i-menu"/></svg></button><span class="font-bold text-[#0f172a]">Shipments</span><span class="ml-auto text-[.8rem] text-[#5b6474]">Rotterdam hub</span></div>
    <div class="flex min-w-0 flex-1 flex-col gap-[18px] overflow-hidden bg-[#f8fafc] px-7 py-[26px] max-[640px]:px-[18px] max-[640px]:py-5">
    <div class="flex flex-wrap items-end justify-between gap-3"><div><p class="m-0 text-[.75rem] text-[#5b6474]">Rotterdam hub · Week 42</p><h2 class="mt-0.5 mb-0 text-[1.25rem] leading-[1.3] font-bold tracking-[-.02em] text-[#0f172a]">Shipments</h2></div><span class="rounded-full border px-3 py-[5px] text-[.75rem] font-semibold border-[#d9dfe8] bg-white text-[#334155]">36 in transit</span></div>
    <div class="grid grid-cols-[repeat(auto-fit,minmax(128px,1fr))] gap-3"><div class="rounded-xl border border-[#e2e8f0] bg-white px-[15px] py-[13px]"><span class="block text-[.75rem] text-[#5b6474]">On time</span><b class="mt-[3px] block text-[1.2rem] leading-[1.3] tracking-[-.01em] text-[#0f172a]">94.2%</b><em class="text-[.72rem] font-semibold not-italic text-[#047857]">+1.1 pts</em></div><div class="rounded-xl border border-[#e2e8f0] bg-white px-[15px] py-[13px]"><span class="block text-[.75rem] text-[#5b6474]">Delayed</span><b class="mt-[3px] block text-[1.2rem] leading-[1.3] tracking-[-.01em] text-[#0f172a]">4</b></div><div class="rounded-xl border border-[#e2e8f0] bg-white px-[15px] py-[13px]"><span class="block text-[.75rem] text-[#5b6474]">Delivered today</span><b class="mt-[3px] block text-[1.2rem] leading-[1.3] tracking-[-.01em] text-[#0f172a]">128</b></div></div>
    <div class="flex min-h-[110px] flex-1 items-end gap-2 rounded-xl border border-[#e2e8f0] bg-white px-4 pt-4 max-[640px]:h-[90px] max-[640px]:min-h-0 max-[640px]:flex-none" aria-hidden="true"><i class="flex-1 rounded-t-[5px] bg-[#bfdbfe] opacity-70" style="height:50%"></i><i class="flex-1 rounded-t-[5px] bg-[#bfdbfe]" style="height:62%"></i><i class="flex-1 rounded-t-[5px] bg-[#bfdbfe] opacity-70" style="height:58%"></i><i class="flex-1 rounded-t-[5px] bg-[#bfdbfe]" style="height:74%"></i><i class="flex-1 rounded-t-[5px] bg-[#bfdbfe] opacity-70" style="height:66%"></i><i class="flex-1 rounded-t-[5px] bg-[#bfdbfe]" style="height:80%"></i><i class="flex-1 rounded-t-[5px] bg-[#bfdbfe] opacity-70" style="height:70%"></i><i class="flex-1 rounded-t-[5px] bg-[#bfdbfe]" style="height:64%"></i><i class="flex-1 rounded-t-[5px] bg-[#bfdbfe] opacity-70" style="height:86%"></i><i class="flex-1 rounded-t-[5px] bg-[#bfdbfe]" style="height:76%"></i><i class="flex-1 rounded-t-[5px] bg-[#bfdbfe] opacity-70" style="height:68%"></i><i class="flex-1 rounded-t-[5px] bg-[#bfdbfe]" style="height:90%"></i></div>
  </div>
  </div>
</div></div>
<div><span class="mb-3.5 block text-[.72rem] tracking-[.12em] text-[#5b6474] uppercase">Drawer at every width (phone app)</span>
<div class="relative mx-auto flex h-[620px] w-full max-w-[390px] overflow-hidden rounded-[28px] border border-[#d6dce5] bg-white shadow-[0_1px_2px_rgba(15,23,42,.05),0_18px_40px_-22px_rgba(15,23,42,.28)]">
  <nav class="fixed inset-y-0 right-auto left-0 m-0 hidden h-full max-h-none w-[min(300px,86vw)] -translate-x-full flex-col gap-0.5 overflow-y-auto border-0 bg-white px-3.5 py-4 text-[.875rem] text-[#475569] shadow-[24px_0_48px_-24px_rgba(2,6,23,.5)] transition-[translate,display,overlay] transition-discrete duration-[280ms] ease-[cubic-bezier(.3,0,.2,1)] backdrop:bg-[rgba(15,23,42,.45)] open:flex open:translate-x-0 starting:open:-translate-x-full motion-reduce:transition-none" id="trip-nav" popover aria-label="Wayfarer">
    <div class="flex items-center justify-between gap-2 pt-0.5 pr-1 pb-3.5 pl-2"><a class="flex items-center gap-2.5 rounded-lg text-[1rem] font-bold text-[#0f172a] no-underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#1d4ed8]" href="#"><span class="grid size-[30px] place-items-center rounded-[9px] bg-[#1d4ed8] text-[.85rem] font-extrabold text-white" aria-hidden="true">W</span>Wayfarer</a><button class="grid size-9 cursor-pointer place-items-center rounded-[10px] border border-[#d3d9e2] bg-white p-0 text-[#0f172a] transition-colors duration-150 hover:bg-[#f1f5f9] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#1d4ed8] motion-reduce:transition-none" type="button" popovertarget="trip-nav" popovertargetaction="hide" aria-label="Close menu"><svg class="size-[18px]" aria-hidden="true"><use href="#i-x"/></svg></button></div>
    <div class="mb-3 flex items-center gap-3 rounded-xl bg-[linear-gradient(135deg,#eff6ff,#e0e7ff)] p-3"><span class="grid size-10 place-items-center rounded-full bg-[#1d4ed8] text-[.72rem] font-extrabold text-white" aria-hidden="true">ML</span><div><b class="block text-[.9rem] text-[#0f172a]">Mei Lin</b><span class="text-[.75rem] text-[#475569]">Explorer member</span></div></div>
    <ul class="m-0 flex list-none flex-col gap-0.5 p-0">
      <li><a class="flex items-center gap-[11px] rounded-[9px] px-3 py-[9px] font-medium text-[#475569] no-underline transition-colors duration-150 hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#1d4ed8] motion-reduce:transition-none aria-[current=page]:bg-[#eaf1ff] aria-[current=page]:font-semibold aria-[current=page]:text-[#1e40af]" href="#" aria-current="page"><svg class="size-[18px] flex-none" aria-hidden="true"><use href="#i-globe"/></svg><span>Trips</span></a></li>
      <li><a class="flex items-center gap-[11px] rounded-[9px] px-3 py-[9px] font-medium text-[#475569] no-underline transition-colors duration-150 hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#1d4ed8] motion-reduce:transition-none aria-[current=page]:bg-[#eaf1ff] aria-[current=page]:font-semibold aria-[current=page]:text-[#1e40af]" href="#"><svg class="size-[18px] flex-none" aria-hidden="true"><use href="#i-search"/></svg><span>Explore</span></a></li>
      <li><a class="flex items-center gap-[11px] rounded-[9px] px-3 py-[9px] font-medium text-[#475569] no-underline transition-colors duration-150 hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#1d4ed8] motion-reduce:transition-none aria-[current=page]:bg-[#eaf1ff] aria-[current=page]:font-semibold aria-[current=page]:text-[#1e40af]" href="#"><svg class="size-[18px] flex-none" aria-hidden="true"><use href="#i-star"/></svg><span>Saved places</span><span class="ml-auto rounded-full bg-[#1d4ed8] px-[7px] text-[.7rem] leading-[1.6] font-bold text-white">18<span class="sr-only"> saved</span></span></a></li>
      <li><a class="flex items-center gap-[11px] rounded-[9px] px-3 py-[9px] font-medium text-[#475569] no-underline transition-colors duration-150 hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#1d4ed8] motion-reduce:transition-none aria-[current=page]:bg-[#eaf1ff] aria-[current=page]:font-semibold aria-[current=page]:text-[#1e40af]" href="#"><svg class="size-[18px] flex-none" aria-hidden="true"><use href="#i-calendar"/></svg><span>Bookings</span></a></li>
      <li><a class="flex items-center gap-[11px] rounded-[9px] px-3 py-[9px] font-medium text-[#475569] no-underline transition-colors duration-150 hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#1d4ed8] motion-reduce:transition-none aria-[current=page]:bg-[#eaf1ff] aria-[current=page]:font-semibold aria-[current=page]:text-[#1e40af]" href="#"><svg class="size-[18px] flex-none" aria-hidden="true"><use href="#i-message"/></svg><span>Messages</span><span class="ml-auto rounded-full bg-[#1d4ed8] px-[7px] text-[.7rem] leading-[1.6] font-bold text-white">2<span class="sr-only"> unread</span></span></a></li>
    </ul>
    <ul class="m-0 mt-auto flex list-none flex-col gap-0.5 border-t border-[#e5e9f0] p-0 pt-3">
      <li><a class="flex items-center gap-[11px] rounded-[9px] px-3 py-[9px] font-medium text-[#475569] no-underline transition-colors duration-150 hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#1d4ed8] motion-reduce:transition-none aria-[current=page]:bg-[#eaf1ff] aria-[current=page]:font-semibold aria-[current=page]:text-[#1e40af]" href="#"><svg class="size-[18px] flex-none" aria-hidden="true"><use href="#i-sliders"/></svg><span>Settings</span></a></li>
      <li><a class="flex items-center gap-[11px] rounded-[9px] px-3 py-[9px] font-medium text-[#475569] no-underline transition-colors duration-150 hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#1d4ed8] motion-reduce:transition-none aria-[current=page]:bg-[#eaf1ff] aria-[current=page]:font-semibold aria-[current=page]:text-[#1e40af]" href="#"><svg class="size-[18px] flex-none" aria-hidden="true"><use href="#i-logout"/></svg><span>Sign out</span></a></li>
    </ul>
  </nav>
  <div class="flex min-w-0 flex-1 flex-col">
    <div class="flex items-center gap-3 border-b border-[#e5e9f0] bg-white px-[18px] py-3"><button class="grid size-9 cursor-pointer place-items-center rounded-[10px] border border-[#d3d9e2] bg-white p-0 text-[#0f172a] transition-colors duration-150 hover:bg-[#f1f5f9] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#1d4ed8] motion-reduce:transition-none" type="button" popovertarget="trip-nav" aria-label="Open menu"><svg class="size-[18px]" aria-hidden="true"><use href="#i-menu"/></svg></button><span class="font-bold text-[#0f172a]">Trips</span><span class="ml-auto grid size-8 place-items-center rounded-full bg-[#dbeafe] text-[.72rem] font-extrabold text-[#1e3a8a]" aria-hidden="true">ML</span></div>
    <div class="flex min-w-0 flex-1 flex-col gap-[18px] overflow-hidden bg-[#f8fafc] px-7 py-[26px] max-[640px]:px-[18px] max-[640px]:py-5">
    <div class="flex flex-wrap items-end justify-between gap-3"><div><p class="m-0 text-[.75rem] text-[#5b6474]">Next trip · in 18 days</p><h2 class="mt-0.5 mb-0 text-[1.25rem] leading-[1.3] font-bold tracking-[-.02em] text-[#0f172a]">Lisbon, 12–16 Nov</h2></div><span class="rounded-full border px-3 py-[5px] text-[.75rem] font-semibold border-[#d9dfe8] bg-white text-[#334155]">Confirmed</span></div>
    <div class="grid grid-cols-[repeat(auto-fit,minmax(128px,1fr))] gap-3"><div class="rounded-xl border border-[#e2e8f0] bg-white px-[15px] py-[13px]"><span class="block text-[.75rem] text-[#5b6474]">Flight</span><b class="mt-[3px] block text-[1.2rem] leading-[1.3] tracking-[-.01em] text-[#0f172a]">LX 2084</b></div><div class="rounded-xl border border-[#e2e8f0] bg-white px-[15px] py-[13px]"><span class="block text-[.75rem] text-[#5b6474]">Nights</span><b class="mt-[3px] block text-[1.2rem] leading-[1.3] tracking-[-.01em] text-[#0f172a]">4</b></div></div>
    <div class="flex min-h-[110px] flex-1 items-end gap-2 rounded-xl border border-[#e2e8f0] bg-white px-4 pt-4 max-[640px]:h-[90px] max-[640px]:min-h-0 max-[640px]:flex-none" aria-hidden="true"><i class="flex-1 rounded-t-[5px] bg-[#bfdbfe] opacity-70" style="height:40%"></i><i class="flex-1 rounded-t-[5px] bg-[#bfdbfe]" style="height:56%"></i><i class="flex-1 rounded-t-[5px] bg-[#bfdbfe] opacity-70" style="height:48%"></i><i class="flex-1 rounded-t-[5px] bg-[#bfdbfe]" style="height:70%"></i><i class="flex-1 rounded-t-[5px] bg-[#bfdbfe] opacity-70" style="height:62%"></i><i class="flex-1 rounded-t-[5px] bg-[#bfdbfe]" style="height:52%"></i><i class="flex-1 rounded-t-[5px] bg-[#bfdbfe] opacity-70" style="height:66%"></i><i class="flex-1 rounded-t-[5px] bg-[#bfdbfe]" style="height:58%"></i></div>
  </div>
  </div>
</div></div>

About this set

Sidebars that leave the screen on small devices and slide back in when asked. The responsive one is a logistics dashboard: from 992px wide it is a normal sidebar inside the layout, and below that the same element becomes a drawer opened from a menu button in the top bar, with a close button in its header and a dimmed backdrop behind it. The phone app is a travel app whose menu is a drawer at every width, with the member’s card, counts for saved places and messages, and Settings and Sign out at the bottom. In plain CSS and Tailwind the drawer is an element with the popover attribute, opened by a button with popovertarget, so it needs no script: the browser handles Esc and clicks outside, and @starting-style with transition-behavior: allow-discrete animates it in and out. The Bootstrap version uses the Offcanvas component instead, .offcanvas-lg for the responsive sidebar and .offcanvas for the phone app, restyled through its –bs-offcanvas-* variables. Use the responsive pattern for dashboards and the always-drawer pattern for mobile-first apps.

What’s included

  • One element that is a sidebar from 992px and a drawer below
  • Popover drawer with no JavaScript in plain CSS and Tailwind
  • Slide-in and slide-out with @starting-style
  • Closes on Esc, outside click and a close button
  • Bootstrap .offcanvas-lg and .offcanvas, restyled through variables

Accessibility

The menu and close buttons are real buttons with aria-labels, and browsers expose the popover button's expanded state. The popover drawer closes with Esc or an outside click and sits right after its button in the Tab order; the Bootstrap offcanvas moves focus into the panel and keeps it there until it closes. Current pages use aria-current="page", focus outlines are visible, and the slide animation is removed under prefers-reduced-motion.

Customise it

Change the --oc-* custom properties for colours, the drawer width in width:min(300px,86vw), and the 992px breakpoint in the media query. In Bootstrap set --bs-offcanvas-width and the other --bs-offcanvas-* variables on .oc; in Tailwind edit the w-[…] and min-[992px]: utilities.