Open demo

CSS code

HTML 
<div><span class="lbl">Docs sidebar with nested sections</span>
<div class="dn-frame dn-frame-docs">
  <div class="dn-side">
    <p class="dn-brand">Lumen UI <span class="dn-ver">v3.2</span></p>
    <nav class="dn dn-docs" aria-label="Documentation">
      <ul class="dn-list">
        <li><details class="dn-sec" open><summary class="dn-top"><span>Getting started</span><svg class="dn-chev" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></summary>
          <ul class="dn-sub">
            <li><a class="dn-link" href="#introduction">Introduction</a></li>
            <li><a class="dn-link" href="#installation">Installation</a></li>
            <li><a class="dn-link" href="#theming">Theming</a></li>
            <li><a class="dn-link" href="#dark-mode">Dark mode</a></li>
          </ul>
        </details></li>
        <li><details class="dn-sec is-trail" open><summary class="dn-top"><span>Components</span><svg class="dn-chev" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></summary>
          <ul class="dn-sub">
            <li><a class="dn-link" href="#button">Button</a></li>
            <li><a class="dn-link" href="#dialog">Dialog</a></li>
            <li><details class="is-trail" open><summary class="dn-sum"><span>Forms</span><svg class="dn-chev" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></summary>
              <ul class="dn-sub">
                <li><a class="dn-link" href="#input">Input</a></li>
                <li><a class="dn-link" href="#select">Select</a></li>
                <li><a class="dn-link" href="#checkbox">Checkbox</a></li>
                <li><a class="dn-link" href="#validation" aria-current="page">Validation</a></li>
              </ul>
            </details></li>
            <li><a class="dn-link" href="#tabs">Tabs</a></li>
            <li><a class="dn-link" href="#toast">Toast</a></li>
          </ul>
        </details></li>
        <li><details class="dn-sec"><summary class="dn-top"><span>Patterns</span><svg class="dn-chev" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></summary>
          <ul class="dn-sub">
            <li><a class="dn-link" href="#empty-states">Empty states</a></li>
            <li><a class="dn-link" href="#loading">Loading</a></li>
            <li><a class="dn-link" href="#settings-pages">Settings pages</a></li>
          </ul>
        </details></li>
        <li><details class="dn-sec"><summary class="dn-top"><span>API reference</span><svg class="dn-chev" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></summary>
          <ul class="dn-sub">
            <li><a class="dn-link" href="#createtheme">createTheme()</a></li>
            <li><a class="dn-link" href="#usetoast">useToast()</a></li>
            <li><a class="dn-link" href="#tokens">Tokens</a></li>
          </ul>
        </details></li>
      </ul>
    </nav>
  </div>
  <div class="dn-main">
    <nav aria-label="Breadcrumb"><ol class="dn-crumb"><li>Docs</li><li>Components</li><li>Forms</li><li aria-current="page">Validation</li></ol></nav>
    <h2 class="dn-h">Validation</h2>
    <p class="dn-p">Show an error only after a field loses focus, keep the message next to the field and link it with aria-describedby so screen readers read it with the label.</p>
  </div>
</div>
</div>
<div><span class="lbl">Help centre with icons and article counts</span>
<div class="dn-frame dn-frame-help">
  <div class="dn-side">
    <p class="dn-brand">Ledgerly Help <span class="dn-ver">63 articles</span></p>
    <nav class="dn dn-help" aria-label="Help topics">
      <ul class="dn-list">
        <li><details class="dn-sec"><summary class="dn-top"><svg class="dn-ico" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="12" cy="8" r="3.6"/><path d="M5 20c.8-3.6 3.6-5.6 7-5.6s6.2 2 7 5.6"/></svg><span>Account</span><span class="dn-n" aria-label="12 articles">12</span><svg class="dn-chev" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></summary>
          <ul class="dn-sub">
            <li><a class="dn-link" href="#change-your-email">Change your email</a></li>
            <li><a class="dn-link" href="#two-step-sign-in">Two-step sign-in</a></li>
            <li><a class="dn-link" href="#delete-your-account">Delete your account</a></li>
          </ul>
        </details></li>
        <li><details class="dn-sec is-trail" open><summary class="dn-top"><svg class="dn-ico" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><rect x="3" y="5.5" width="18" height="13" rx="2.2"/><path d="M3 10h18M7 15h3"/></svg><span>Billing</span><span class="dn-n" aria-label="18 articles">18</span><svg class="dn-chev" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></summary>
          <ul class="dn-sub">
            <li><a class="dn-link" href="#plans-and-prices">Plans and prices</a></li>
            <li><details class="is-trail" open><summary class="dn-sum"><span>Invoices</span><svg class="dn-chev" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></summary>
              <ul class="dn-sub">
                <li><a class="dn-link" href="#download-an-invoice">Download an invoice</a></li>
                <li><a class="dn-link" href="#add-a-vat-number">Add a VAT number</a></li>
              </ul>
            </details></li>
            <li><a class="dn-link" href="#change-your-billing-date" aria-current="page">Change your billing date</a></li>
            <li><a class="dn-link" href="#refunds">Refunds</a></li>
          </ul>
        </details></li>
        <li><details class="dn-sec"><summary class="dn-top"><svg class="dn-ico" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3.5 7.2A1.7 1.7 0 0 1 5.2 5.5h4l2 2.2h7.6a1.7 1.7 0 0 1 1.7 1.7v8.4a1.7 1.7 0 0 1-1.7 1.7H5.2a1.7 1.7 0 0 1-1.7-1.7z"/></svg><span>Projects</span><span class="dn-n" aria-label="24 articles">24</span><svg class="dn-chev" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></summary>
          <ul class="dn-sub">
            <li><a class="dn-link" href="#invite-a-client">Invite a client</a></li>
            <li><a class="dn-link" href="#archive-a-project">Archive a project</a></li>
            <li><a class="dn-link" href="#export-to-csv">Export to CSV</a></li>
          </ul>
        </details></li>
        <li><details class="dn-sec"><summary class="dn-top"><svg class="dn-ico" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 3.5v4M15 3.5v4M7 7.5h10v3.2a5 5 0 0 1-10 0zM12 15.7v4.8"/></svg><span>Integrations</span><span class="dn-n" aria-label="9 articles">9</span><svg class="dn-chev" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></summary>
          <ul class="dn-sub">
            <li><a class="dn-link" href="#slack">Slack</a></li>
            <li><a class="dn-link" href="#google-calendar">Google Calendar</a></li>
            <li><a class="dn-link" href="#zapier">Zapier</a></li>
          </ul>
        </details></li>
      </ul>
    </nav>
  </div>
  <div class="dn-main">
    <nav aria-label="Breadcrumb"><ol class="dn-crumb"><li>Help</li><li>Billing</li><li aria-current="page">Change your billing date</li></ol></nav>
    <h2 class="dn-h">Change your billing date</h2>
    <p class="dn-p">You can move your billing date once per billing cycle from Settings, Billing. The next invoice is adjusted for the days in between.</p>
  </div>
</div>
</div>
CSS 
/* Sidebar navigation tree: <details>/<summary> sections hold plain links, so it works without JavaScript.
   The current page has aria-current="page"; sections on its path carry .is-trail and are rendered open. */
.dn{--dn-accent:#0e7490;--dn-tint:#e7f5f8;--dn-cur-text:#155e75;--dn-text:#1f2937;--dn-link:#475569;--dn-hover:#f1f5f9;--dn-line:#e2e6ec;--dn-muted:#64748b;
  font-size:.9rem;color:var(--dn-text)}
.dn-help{--dn-accent:#6d28d9;--dn-tint:#f1ebfd;--dn-hover:#f4f1fb}
.dn summary{cursor:pointer;list-style:none}
.dn summary::-webkit-details-marker{display:none}
.dn summary:hover,.dn .dn-link:hover{background:var(--dn-hover)}
.dn summary:focus-visible,.dn .dn-link:focus-visible{outline:2px solid var(--dn-accent);outline-offset:1px}
.dn-chev{width:14px;height:14px;flex:none;color:var(--dn-muted);transition:transform .15s ease}
.dn details[open]>summary .dn-chev{transform:rotate(90deg)}
.dn-ico{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* docs: uppercase section headings, a hairline rail, a tinted current page with an accent edge */
.dn-docs .dn-top{font-size:.72rem;letter-spacing:.08em;color:#334155}
.dn-docs .dn-sub{margin-left:12px;padding-left:8px;border-left:1px solid var(--dn-line)}
.dn-docs .dn-link[aria-current="page"]{background:var(--dn-tint);color:var(--dn-cur-text);font-weight:600;box-shadow:inset 2px 0 0 var(--dn-accent)}
/* help centre: icon rows, a count badge, a filled current page */
.dn-help .dn-top{gap:10px;padding:8px 10px;border-radius:9px}
.dn-help .is-trail>.dn-top{color:var(--dn-accent)}
.dn-help .dn-sub{margin-left:22px;padding-left:10px}
.dn-help .dn-link{border-radius:9px}
.dn-help .dn-link[aria-current="page"]{background:var(--dn-accent);color:#fff;font-weight:600}
.dn-n{margin-left:auto;font-size:.72rem;font-weight:600;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.dn-chev{transition:none}}
.dn ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:1px}
.dn-list{gap:2px!important}
.dn-sub{padding-top:4px!important;padding-bottom:4px!important}
.dn-top{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:6px;font-weight:700;text-transform:uppercase}
.dn-help .dn-top{text-transform:none;font-weight:600}
.dn-sum{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:6px;font-weight:600;color:#334155}
.dn-link{display:block;padding:6px 10px;border-radius:6px;color:var(--dn-link);text-decoration:none}
.dn-link:hover{color:#0f172a}
.dn-n{padding:1px 8px;border-radius:99px;background:#eef0f4;color:var(--dn-link)}
.dn-sum .dn-chev,.dn-docs .dn-top .dn-chev{margin-left:auto}
/* demo frame: sidebar beside a page header */
.dn-frame{display:grid;background:#fff;border:1px solid #e2e7ee;border-radius:14px;overflow:hidden;box-shadow:0 10px 30px -22px rgba(15,23,42,.3)}
.dn-side{padding:16px;background:#fbfcfd;border-bottom:1px solid #e9edf3}
.dn-brand{display:flex;align-items:center;gap:8px;margin:0 0 14px;padding:0 8px;font-weight:700}
.dn-ver{padding:2px 8px;border-radius:99px;background:#e7f5f8;color:#155e75;font-size:.7rem;font-weight:600}
.dn-frame-help .dn-ver{background:#f1ebfd;color:#5b21b6}
.dn-main{padding:24px 28px}
.dn-crumb{display:flex;flex-wrap:wrap;margin:0 0 8px;padding:0;list-style:none;font-size:.8rem;color:#5b6577}
.dn-crumb li+li::before{content:"/";padding:0 6px}
.dn-h{margin:0 0 8px;font-size:1.5rem;letter-spacing:-.01em}
.dn-p{margin:0;max-width:52ch;line-height:1.6;color:#475569}
@media (min-width:720px){.dn-frame{grid-template-columns:270px 1fr}.dn-side{border-bottom:0;border-right:1px solid #e9edf3}}
@media (max-width:480px){.dn-main{padding:24px 20px}}

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div><span class="lbl">Docs sidebar with nested sections</span>
<div class="dn-frame card border-0 rounded-4 overflow-hidden dn-frame-docs">
  <div class="dn-side">
    <p class="dn-brand d-flex align-items-center gap-2 fw-bold">Lumen UI <span class="dn-ver badge rounded-pill">v3.2</span></p>
    <nav class="dn dn-docs" aria-label="Documentation">
      <ul class="dn-list nav flex-column">
        <li><details class="dn-sec" open><summary class="dn-top d-flex align-items-center gap-2 text-uppercase fw-bold"><span>Getting started</span><svg class="dn-chev ms-auto" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></summary>
          <ul class="dn-sub nav flex-column">
            <li><a class="dn-link nav-link" href="#introduction">Introduction</a></li>
            <li><a class="dn-link nav-link" href="#installation">Installation</a></li>
            <li><a class="dn-link nav-link" href="#theming">Theming</a></li>
            <li><a class="dn-link nav-link" href="#dark-mode">Dark mode</a></li>
          </ul>
        </details></li>
        <li><details class="dn-sec is-trail" open><summary class="dn-top d-flex align-items-center gap-2 text-uppercase fw-bold"><span>Components</span><svg class="dn-chev ms-auto" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></summary>
          <ul class="dn-sub nav flex-column">
            <li><a class="dn-link nav-link" href="#button">Button</a></li>
            <li><a class="dn-link nav-link" href="#dialog">Dialog</a></li>
            <li><details class="is-trail" open><summary class="dn-sum d-flex align-items-center gap-2 fw-semibold"><span>Forms</span><svg class="dn-chev ms-auto" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></summary>
              <ul class="dn-sub nav flex-column">
                <li><a class="dn-link nav-link" href="#input">Input</a></li>
                <li><a class="dn-link nav-link" href="#select">Select</a></li>
                <li><a class="dn-link nav-link" href="#checkbox">Checkbox</a></li>
                <li><a class="dn-link nav-link" href="#validation" aria-current="page">Validation</a></li>
              </ul>
            </details></li>
            <li><a class="dn-link nav-link" href="#tabs">Tabs</a></li>
            <li><a class="dn-link nav-link" href="#toast">Toast</a></li>
          </ul>
        </details></li>
        <li><details class="dn-sec"><summary class="dn-top d-flex align-items-center gap-2 text-uppercase fw-bold"><span>Patterns</span><svg class="dn-chev ms-auto" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></summary>
          <ul class="dn-sub nav flex-column">
            <li><a class="dn-link nav-link" href="#empty-states">Empty states</a></li>
            <li><a class="dn-link nav-link" href="#loading">Loading</a></li>
            <li><a class="dn-link nav-link" href="#settings-pages">Settings pages</a></li>
          </ul>
        </details></li>
        <li><details class="dn-sec"><summary class="dn-top d-flex align-items-center gap-2 text-uppercase fw-bold"><span>API reference</span><svg class="dn-chev ms-auto" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></summary>
          <ul class="dn-sub nav flex-column">
            <li><a class="dn-link nav-link" href="#createtheme">createTheme()</a></li>
            <li><a class="dn-link nav-link" href="#usetoast">useToast()</a></li>
            <li><a class="dn-link nav-link" href="#tokens">Tokens</a></li>
          </ul>
        </details></li>
      </ul>
    </nav>
  </div>
  <div class="dn-main">
    <nav aria-label="Breadcrumb"><ol class="dn-crumb breadcrumb mb-2"><li class="breadcrumb-item">Docs</li><li class="breadcrumb-item">Components</li><li class="breadcrumb-item">Forms</li><li class="breadcrumb-item active" aria-current="page">Validation</li></ol></nav>
    <h2 class="dn-h fw-bold">Validation</h2>
    <p class="dn-p text-body-secondary mb-0">Show an error only after a field loses focus, keep the message next to the field and link it with aria-describedby so screen readers read it with the label.</p>
  </div>
</div>
</div>
<div><span class="lbl">Help centre with icons and article counts</span>
<div class="dn-frame card border-0 rounded-4 overflow-hidden dn-frame-help">
  <div class="dn-side">
    <p class="dn-brand d-flex align-items-center gap-2 fw-bold">Ledgerly Help <span class="dn-ver badge rounded-pill">63 articles</span></p>
    <nav class="dn dn-help" aria-label="Help topics">
      <ul class="dn-list nav flex-column">
        <li><details class="dn-sec"><summary class="dn-top d-flex align-items-center gap-2 text-uppercase fw-bold"><svg class="dn-ico" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="12" cy="8" r="3.6"/><path d="M5 20c.8-3.6 3.6-5.6 7-5.6s6.2 2 7 5.6"/></svg><span>Account</span><span class="dn-n badge rounded-pill" aria-label="12 articles">12</span><svg class="dn-chev " viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></summary>
          <ul class="dn-sub nav flex-column">
            <li><a class="dn-link nav-link" href="#change-your-email">Change your email</a></li>
            <li><a class="dn-link nav-link" href="#two-step-sign-in">Two-step sign-in</a></li>
            <li><a class="dn-link nav-link" href="#delete-your-account">Delete your account</a></li>
          </ul>
        </details></li>
        <li><details class="dn-sec is-trail" open><summary class="dn-top d-flex align-items-center gap-2 text-uppercase fw-bold"><svg class="dn-ico" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><rect x="3" y="5.5" width="18" height="13" rx="2.2"/><path d="M3 10h18M7 15h3"/></svg><span>Billing</span><span class="dn-n badge rounded-pill" aria-label="18 articles">18</span><svg class="dn-chev " viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></summary>
          <ul class="dn-sub nav flex-column">
            <li><a class="dn-link nav-link" href="#plans-and-prices">Plans and prices</a></li>
            <li><details class="is-trail" open><summary class="dn-sum d-flex align-items-center gap-2 fw-semibold"><span>Invoices</span><svg class="dn-chev ms-auto" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></summary>
              <ul class="dn-sub nav flex-column">
                <li><a class="dn-link nav-link" href="#download-an-invoice">Download an invoice</a></li>
                <li><a class="dn-link nav-link" href="#add-a-vat-number">Add a VAT number</a></li>
              </ul>
            </details></li>
            <li><a class="dn-link nav-link" href="#change-your-billing-date" aria-current="page">Change your billing date</a></li>
            <li><a class="dn-link nav-link" href="#refunds">Refunds</a></li>
          </ul>
        </details></li>
        <li><details class="dn-sec"><summary class="dn-top d-flex align-items-center gap-2 text-uppercase fw-bold"><svg class="dn-ico" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3.5 7.2A1.7 1.7 0 0 1 5.2 5.5h4l2 2.2h7.6a1.7 1.7 0 0 1 1.7 1.7v8.4a1.7 1.7 0 0 1-1.7 1.7H5.2a1.7 1.7 0 0 1-1.7-1.7z"/></svg><span>Projects</span><span class="dn-n badge rounded-pill" aria-label="24 articles">24</span><svg class="dn-chev " viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></summary>
          <ul class="dn-sub nav flex-column">
            <li><a class="dn-link nav-link" href="#invite-a-client">Invite a client</a></li>
            <li><a class="dn-link nav-link" href="#archive-a-project">Archive a project</a></li>
            <li><a class="dn-link nav-link" href="#export-to-csv">Export to CSV</a></li>
          </ul>
        </details></li>
        <li><details class="dn-sec"><summary class="dn-top d-flex align-items-center gap-2 text-uppercase fw-bold"><svg class="dn-ico" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 3.5v4M15 3.5v4M7 7.5h10v3.2a5 5 0 0 1-10 0zM12 15.7v4.8"/></svg><span>Integrations</span><span class="dn-n badge rounded-pill" aria-label="9 articles">9</span><svg class="dn-chev " viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></summary>
          <ul class="dn-sub nav flex-column">
            <li><a class="dn-link nav-link" href="#slack">Slack</a></li>
            <li><a class="dn-link nav-link" href="#google-calendar">Google Calendar</a></li>
            <li><a class="dn-link nav-link" href="#zapier">Zapier</a></li>
          </ul>
        </details></li>
      </ul>
    </nav>
  </div>
  <div class="dn-main">
    <nav aria-label="Breadcrumb"><ol class="dn-crumb breadcrumb mb-2"><li class="breadcrumb-item">Help</li><li class="breadcrumb-item">Billing</li><li class="breadcrumb-item active" aria-current="page">Change your billing date</li></ol></nav>
    <h2 class="dn-h fw-bold">Change your billing date</h2>
    <p class="dn-p text-body-secondary mb-0">You can move your billing date once per billing cycle from Settings, Billing. The next invoice is adjusted for the days in between.</p>
  </div>
</div>
</div>
CSS 
/* Sidebar navigation tree: <details>/<summary> sections hold plain links, so it works without JavaScript.
   The current page has aria-current="page"; sections on its path carry .is-trail and are rendered open. */
.dn{--dn-accent:#0e7490;--dn-tint:#e7f5f8;--dn-cur-text:#155e75;--dn-text:#1f2937;--dn-link:#475569;--dn-hover:#f1f5f9;--dn-line:#e2e6ec;--dn-muted:#64748b;
  font-size:.9rem;color:var(--dn-text)}
.dn-help{--dn-accent:#6d28d9;--dn-tint:#f1ebfd;--dn-hover:#f4f1fb}
.dn summary{cursor:pointer;list-style:none}
.dn summary::-webkit-details-marker{display:none}
.dn summary:hover,.dn .dn-link:hover{background:var(--dn-hover)}
.dn summary:focus-visible,.dn .dn-link:focus-visible{outline:2px solid var(--dn-accent);outline-offset:1px}
.dn-chev{width:14px;height:14px;flex:none;color:var(--dn-muted);transition:transform .15s ease}
.dn details[open]>summary .dn-chev{transform:rotate(90deg)}
.dn-ico{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* docs: uppercase section headings, a hairline rail, a tinted current page with an accent edge */
.dn-docs .dn-top{font-size:.72rem;letter-spacing:.08em;color:#334155}
.dn-docs .dn-sub{margin-left:12px;padding-left:8px;border-left:1px solid var(--dn-line)}
.dn-docs .dn-link[aria-current="page"]{background:var(--dn-tint);color:var(--dn-cur-text);font-weight:600;box-shadow:inset 2px 0 0 var(--dn-accent)}
/* help centre: icon rows, a count badge, a filled current page */
.dn-help .dn-top{gap:10px;padding:8px 10px;border-radius:9px}
.dn-help .is-trail>.dn-top{color:var(--dn-accent)}
.dn-help .dn-sub{margin-left:22px;padding-left:10px}
.dn-help .dn-link{border-radius:9px}
.dn-help .dn-link[aria-current="page"]{background:var(--dn-accent);color:#fff;font-weight:600}
.dn-n{margin-left:auto;font-size:.72rem;font-weight:600;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.dn-chev{transition:none}}
.dn .nav{--bs-nav-link-padding-x:10px;--bs-nav-link-padding-y:6px;--bs-nav-link-color:var(--dn-link);--bs-nav-link-hover-color:#0f172a;gap:1px;flex-wrap:nowrap}
.dn-list{gap:2px!important}
.dn-sub{padding:4px 0}
.dn-top{padding:7px 8px;border-radius:6px}
.dn-help .dn-top{text-transform:none!important;font-weight:600!important}
.dn-sum{padding:6px 10px;border-radius:6px;color:#334155}
.dn-link{border-radius:6px}
.dn-n{--bs-badge-padding-x:8px;--bs-badge-padding-y:2px;--bs-badge-color:var(--dn-link);background:#eef0f4}
.dn-docs .dn-top .dn-chev{margin-left:auto}
.dn-help .dn-top .dn-chev{margin-left:0!important}
.dn-frame{display:grid;--bs-card-border-width:1px;border:1px solid #e2e7ee!important;box-shadow:0 10px 30px -22px rgba(15,23,42,.3)}
.dn-side{padding:16px;background:#fbfcfd;border-bottom:1px solid #e9edf3}
.dn-brand{margin:0 0 14px;padding:0 8px}
.dn-ver{--bs-badge-padding-x:8px;--bs-badge-padding-y:3px;--bs-badge-font-size:.7rem;--bs-badge-font-weight:600;--bs-badge-color:#155e75;background:#e7f5f8}
.dn-frame-help .dn-ver{--bs-badge-color:#5b21b6;background:#f1ebfd}
.dn-main{padding:24px 28px}
.dn-crumb{--bs-breadcrumb-font-size:.8rem;--bs-breadcrumb-item-padding-x:6px;--bs-breadcrumb-divider-color:#5b6577;--bs-breadcrumb-item-active-color:#5b6577;--bs-breadcrumb-divider:"/";color:#5b6577}
.dn-h{margin:0 0 8px;font-size:1.5rem;letter-spacing:-.01em}
.dn-p{max-width:52ch;line-height:1.6}
@media (min-width:720px){.dn-frame{grid-template-columns:270px 1fr}.dn-side{border-bottom:0;border-right:1px solid #e9edf3}}
@media (max-width:480px){.dn-main{padding:24px 20px}}

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#5b6577] uppercase">Docs sidebar with nested sections</span>
<div class="grid overflow-hidden rounded-[14px] border border-[#e2e7ee] bg-white shadow-[0_10px_30px_-22px_rgba(15,23,42,.3)] min-[720px]:grid-cols-[270px_1fr]">
  <div class="border-b border-[#e9edf3] bg-[#fbfcfd] p-4 min-[720px]:border-r min-[720px]:border-b-0">
    <p class="mb-3.5 flex items-center gap-2 px-2 font-bold">Lumen UI <span class="rounded-full bg-[#e7f5f8] px-2 py-0.5 text-[.7rem] font-semibold text-[#155e75]">v3.2</span></p>
    <nav class="text-[.9rem] text-[#1f2937]" aria-label="Documentation">
      <ul class="m-0 flex list-none flex-col gap-0.5 p-0">
        <li><details open><summary class="flex cursor-pointer list-none items-center gap-2 rounded-md px-2 py-[7px] text-[.72rem] font-bold tracking-[.08em] text-[#334155] uppercase hover:bg-[#f1f5f9] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#0e7490] [&::-webkit-details-marker]:hidden"><span>Getting started</span><svg class="ml-auto size-3.5 flex-none transition-transform duration-150 motion-reduce:transition-none [details[open]>summary>&]:rotate-90 text-[#64748b]" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></summary>
          <ul class="m-0 ml-3 flex list-none flex-col gap-px border-l border-[#e2e6ec] py-1 pl-2">
            <li><a class="block rounded-md px-2.5 py-1.5 text-[#475569] no-underline hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#0e7490] aria-[current=page]:bg-[#e7f5f8] aria-[current=page]:font-semibold aria-[current=page]:text-[#155e75] aria-[current=page]:shadow-[inset_2px_0_0_#0e7490]" href="#introduction">Introduction</a></li>
            <li><a class="block rounded-md px-2.5 py-1.5 text-[#475569] no-underline hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#0e7490] aria-[current=page]:bg-[#e7f5f8] aria-[current=page]:font-semibold aria-[current=page]:text-[#155e75] aria-[current=page]:shadow-[inset_2px_0_0_#0e7490]" href="#installation">Installation</a></li>
            <li><a class="block rounded-md px-2.5 py-1.5 text-[#475569] no-underline hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#0e7490] aria-[current=page]:bg-[#e7f5f8] aria-[current=page]:font-semibold aria-[current=page]:text-[#155e75] aria-[current=page]:shadow-[inset_2px_0_0_#0e7490]" href="#theming">Theming</a></li>
            <li><a class="block rounded-md px-2.5 py-1.5 text-[#475569] no-underline hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#0e7490] aria-[current=page]:bg-[#e7f5f8] aria-[current=page]:font-semibold aria-[current=page]:text-[#155e75] aria-[current=page]:shadow-[inset_2px_0_0_#0e7490]" href="#dark-mode">Dark mode</a></li>
          </ul>
        </details></li>
        <li><details class="is-trail" open><summary class="flex cursor-pointer list-none items-center gap-2 rounded-md px-2 py-[7px] text-[.72rem] font-bold tracking-[.08em] text-[#334155] uppercase hover:bg-[#f1f5f9] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#0e7490] [&::-webkit-details-marker]:hidden"><span>Components</span><svg class="ml-auto size-3.5 flex-none transition-transform duration-150 motion-reduce:transition-none [details[open]>summary>&]:rotate-90 text-[#64748b]" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></summary>
          <ul class="m-0 ml-3 flex list-none flex-col gap-px border-l border-[#e2e6ec] py-1 pl-2">
            <li><a class="block rounded-md px-2.5 py-1.5 text-[#475569] no-underline hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#0e7490] aria-[current=page]:bg-[#e7f5f8] aria-[current=page]:font-semibold aria-[current=page]:text-[#155e75] aria-[current=page]:shadow-[inset_2px_0_0_#0e7490]" href="#button">Button</a></li>
            <li><a class="block rounded-md px-2.5 py-1.5 text-[#475569] no-underline hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#0e7490] aria-[current=page]:bg-[#e7f5f8] aria-[current=page]:font-semibold aria-[current=page]:text-[#155e75] aria-[current=page]:shadow-[inset_2px_0_0_#0e7490]" href="#dialog">Dialog</a></li>
            <li><details class="is-trail" open><summary class="flex cursor-pointer list-none items-center gap-2 rounded-md px-2.5 py-1.5 font-semibold text-[#334155] hover:bg-[#f1f5f9] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#0e7490] [&::-webkit-details-marker]:hidden"><span>Forms</span><svg class="ml-auto size-3.5 flex-none transition-transform duration-150 motion-reduce:transition-none [details[open]>summary>&]:rotate-90 text-[#64748b]" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></summary>
              <ul class="m-0 ml-3 flex list-none flex-col gap-px border-l border-[#e2e6ec] py-1 pl-2">
                <li><a class="block rounded-md px-2.5 py-1.5 text-[#475569] no-underline hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#0e7490] aria-[current=page]:bg-[#e7f5f8] aria-[current=page]:font-semibold aria-[current=page]:text-[#155e75] aria-[current=page]:shadow-[inset_2px_0_0_#0e7490]" href="#input">Input</a></li>
                <li><a class="block rounded-md px-2.5 py-1.5 text-[#475569] no-underline hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#0e7490] aria-[current=page]:bg-[#e7f5f8] aria-[current=page]:font-semibold aria-[current=page]:text-[#155e75] aria-[current=page]:shadow-[inset_2px_0_0_#0e7490]" href="#select">Select</a></li>
                <li><a class="block rounded-md px-2.5 py-1.5 text-[#475569] no-underline hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#0e7490] aria-[current=page]:bg-[#e7f5f8] aria-[current=page]:font-semibold aria-[current=page]:text-[#155e75] aria-[current=page]:shadow-[inset_2px_0_0_#0e7490]" href="#checkbox">Checkbox</a></li>
                <li><a class="block rounded-md px-2.5 py-1.5 text-[#475569] no-underline hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#0e7490] aria-[current=page]:bg-[#e7f5f8] aria-[current=page]:font-semibold aria-[current=page]:text-[#155e75] aria-[current=page]:shadow-[inset_2px_0_0_#0e7490]" href="#validation" aria-current="page">Validation</a></li>
              </ul>
            </details></li>
            <li><a class="block rounded-md px-2.5 py-1.5 text-[#475569] no-underline hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#0e7490] aria-[current=page]:bg-[#e7f5f8] aria-[current=page]:font-semibold aria-[current=page]:text-[#155e75] aria-[current=page]:shadow-[inset_2px_0_0_#0e7490]" href="#tabs">Tabs</a></li>
            <li><a class="block rounded-md px-2.5 py-1.5 text-[#475569] no-underline hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#0e7490] aria-[current=page]:bg-[#e7f5f8] aria-[current=page]:font-semibold aria-[current=page]:text-[#155e75] aria-[current=page]:shadow-[inset_2px_0_0_#0e7490]" href="#toast">Toast</a></li>
          </ul>
        </details></li>
        <li><details><summary class="flex cursor-pointer list-none items-center gap-2 rounded-md px-2 py-[7px] text-[.72rem] font-bold tracking-[.08em] text-[#334155] uppercase hover:bg-[#f1f5f9] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#0e7490] [&::-webkit-details-marker]:hidden"><span>Patterns</span><svg class="ml-auto size-3.5 flex-none transition-transform duration-150 motion-reduce:transition-none [details[open]>summary>&]:rotate-90 text-[#64748b]" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></summary>
          <ul class="m-0 ml-3 flex list-none flex-col gap-px border-l border-[#e2e6ec] py-1 pl-2">
            <li><a class="block rounded-md px-2.5 py-1.5 text-[#475569] no-underline hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#0e7490] aria-[current=page]:bg-[#e7f5f8] aria-[current=page]:font-semibold aria-[current=page]:text-[#155e75] aria-[current=page]:shadow-[inset_2px_0_0_#0e7490]" href="#empty-states">Empty states</a></li>
            <li><a class="block rounded-md px-2.5 py-1.5 text-[#475569] no-underline hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#0e7490] aria-[current=page]:bg-[#e7f5f8] aria-[current=page]:font-semibold aria-[current=page]:text-[#155e75] aria-[current=page]:shadow-[inset_2px_0_0_#0e7490]" href="#loading">Loading</a></li>
            <li><a class="block rounded-md px-2.5 py-1.5 text-[#475569] no-underline hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#0e7490] aria-[current=page]:bg-[#e7f5f8] aria-[current=page]:font-semibold aria-[current=page]:text-[#155e75] aria-[current=page]:shadow-[inset_2px_0_0_#0e7490]" href="#settings-pages">Settings pages</a></li>
          </ul>
        </details></li>
        <li><details><summary class="flex cursor-pointer list-none items-center gap-2 rounded-md px-2 py-[7px] text-[.72rem] font-bold tracking-[.08em] text-[#334155] uppercase hover:bg-[#f1f5f9] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#0e7490] [&::-webkit-details-marker]:hidden"><span>API reference</span><svg class="ml-auto size-3.5 flex-none transition-transform duration-150 motion-reduce:transition-none [details[open]>summary>&]:rotate-90 text-[#64748b]" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></summary>
          <ul class="m-0 ml-3 flex list-none flex-col gap-px border-l border-[#e2e6ec] py-1 pl-2">
            <li><a class="block rounded-md px-2.5 py-1.5 text-[#475569] no-underline hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#0e7490] aria-[current=page]:bg-[#e7f5f8] aria-[current=page]:font-semibold aria-[current=page]:text-[#155e75] aria-[current=page]:shadow-[inset_2px_0_0_#0e7490]" href="#createtheme">createTheme()</a></li>
            <li><a class="block rounded-md px-2.5 py-1.5 text-[#475569] no-underline hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#0e7490] aria-[current=page]:bg-[#e7f5f8] aria-[current=page]:font-semibold aria-[current=page]:text-[#155e75] aria-[current=page]:shadow-[inset_2px_0_0_#0e7490]" href="#usetoast">useToast()</a></li>
            <li><a class="block rounded-md px-2.5 py-1.5 text-[#475569] no-underline hover:bg-[#f1f5f9] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#0e7490] aria-[current=page]:bg-[#e7f5f8] aria-[current=page]:font-semibold aria-[current=page]:text-[#155e75] aria-[current=page]:shadow-[inset_2px_0_0_#0e7490]" href="#tokens">Tokens</a></li>
          </ul>
        </details></li>
      </ul>
    </nav>
  </div>
  <div class="px-7 py-6 max-[480px]:px-5">
    <nav aria-label="Breadcrumb"><ol class="m-0 mb-2 flex list-none flex-wrap p-0 text-[.8rem] text-[#5b6577] [&>li+li]:before:px-1.5 [&>li+li]:before:content-['/']"><li>Docs</li><li>Components</li><li>Forms</li><li aria-current="page">Validation</li></ol></nav>
    <h2 class="m-0 mb-2 text-[1.5rem] font-bold tracking-[-.01em]">Validation</h2>
    <p class="m-0 max-w-[52ch] leading-[1.6] text-[#475569]">Show an error only after a field loses focus, keep the message next to the field and link it with aria-describedby so screen readers read it with the label.</p>
  </div>
</div>
</div>
<div><span class="mb-4 block text-[.72rem] tracking-[.12em] text-[#5b6577] uppercase">Help centre with icons and article counts</span>
<div class="grid overflow-hidden rounded-[14px] border border-[#e2e7ee] bg-white shadow-[0_10px_30px_-22px_rgba(15,23,42,.3)] min-[720px]:grid-cols-[270px_1fr]">
  <div class="border-b border-[#e9edf3] bg-[#fbfcfd] p-4 min-[720px]:border-r min-[720px]:border-b-0">
    <p class="mb-3.5 flex items-center gap-2 px-2 font-bold">Ledgerly Help <span class="rounded-full bg-[#f1ebfd] px-2 py-0.5 text-[.7rem] font-semibold text-[#5b21b6]">63 articles</span></p>
    <nav class="text-[.9rem] text-[#1f2937]" aria-label="Help topics">
      <ul class="m-0 flex list-none flex-col gap-0.5 p-0">
        <li><details><summary class="flex cursor-pointer list-none items-center gap-2.5 rounded-[9px] px-2.5 py-2 font-semibold text-[#1f2937] hover:bg-[#f4f1fb] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#6d28d9] [&::-webkit-details-marker]:hidden [details.is-trail>&]:text-[#6d28d9]"><svg class="size-[18px] flex-none fill-none stroke-current stroke-[1.7] [stroke-linecap:round] [stroke-linejoin:round]" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><circle cx="12" cy="8" r="3.6"/><path d="M5 20c.8-3.6 3.6-5.6 7-5.6s6.2 2 7 5.6"/></svg><span>Account</span><span class="ml-auto rounded-full bg-[#eef0f4] px-2 py-px text-[.72rem] font-semibold text-[#475569] tabular-nums" aria-label="12 articles">12</span><svg class="size-3.5 flex-none transition-transform duration-150 motion-reduce:transition-none [details[open]>summary>&]:rotate-90 text-[#64748b]" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></summary>
          <ul class="m-0 ml-[22px] flex list-none flex-col gap-px py-1 pl-2.5">
            <li><a class="block rounded-[9px] px-2.5 py-1.5 text-[#475569] no-underline hover:bg-[#f4f1fb] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#6d28d9] aria-[current=page]:bg-[#6d28d9] aria-[current=page]:font-semibold aria-[current=page]:text-white" href="#change-your-email">Change your email</a></li>
            <li><a class="block rounded-[9px] px-2.5 py-1.5 text-[#475569] no-underline hover:bg-[#f4f1fb] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#6d28d9] aria-[current=page]:bg-[#6d28d9] aria-[current=page]:font-semibold aria-[current=page]:text-white" href="#two-step-sign-in">Two-step sign-in</a></li>
            <li><a class="block rounded-[9px] px-2.5 py-1.5 text-[#475569] no-underline hover:bg-[#f4f1fb] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#6d28d9] aria-[current=page]:bg-[#6d28d9] aria-[current=page]:font-semibold aria-[current=page]:text-white" href="#delete-your-account">Delete your account</a></li>
          </ul>
        </details></li>
        <li><details class="is-trail" open><summary class="flex cursor-pointer list-none items-center gap-2.5 rounded-[9px] px-2.5 py-2 font-semibold text-[#1f2937] hover:bg-[#f4f1fb] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#6d28d9] [&::-webkit-details-marker]:hidden [details.is-trail>&]:text-[#6d28d9]"><svg class="size-[18px] flex-none fill-none stroke-current stroke-[1.7] [stroke-linecap:round] [stroke-linejoin:round]" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><rect x="3" y="5.5" width="18" height="13" rx="2.2"/><path d="M3 10h18M7 15h3"/></svg><span>Billing</span><span class="ml-auto rounded-full bg-[#eef0f4] px-2 py-px text-[.72rem] font-semibold text-[#475569] tabular-nums" aria-label="18 articles">18</span><svg class="size-3.5 flex-none transition-transform duration-150 motion-reduce:transition-none [details[open]>summary>&]:rotate-90 text-[#64748b]" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></summary>
          <ul class="m-0 ml-[22px] flex list-none flex-col gap-px py-1 pl-2.5">
            <li><a class="block rounded-[9px] px-2.5 py-1.5 text-[#475569] no-underline hover:bg-[#f4f1fb] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#6d28d9] aria-[current=page]:bg-[#6d28d9] aria-[current=page]:font-semibold aria-[current=page]:text-white" href="#plans-and-prices">Plans and prices</a></li>
            <li><details class="is-trail" open><summary class="flex cursor-pointer list-none items-center gap-2 rounded-md px-2.5 py-1.5 font-semibold text-[#334155] hover:bg-[#f4f1fb] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#6d28d9] [&::-webkit-details-marker]:hidden"><span>Invoices</span><svg class="ml-auto size-3.5 flex-none transition-transform duration-150 motion-reduce:transition-none [details[open]>summary>&]:rotate-90 text-[#64748b]" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></summary>
              <ul class="m-0 ml-[22px] flex list-none flex-col gap-px py-1 pl-2.5">
                <li><a class="block rounded-[9px] px-2.5 py-1.5 text-[#475569] no-underline hover:bg-[#f4f1fb] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#6d28d9] aria-[current=page]:bg-[#6d28d9] aria-[current=page]:font-semibold aria-[current=page]:text-white" href="#download-an-invoice">Download an invoice</a></li>
                <li><a class="block rounded-[9px] px-2.5 py-1.5 text-[#475569] no-underline hover:bg-[#f4f1fb] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#6d28d9] aria-[current=page]:bg-[#6d28d9] aria-[current=page]:font-semibold aria-[current=page]:text-white" href="#add-a-vat-number">Add a VAT number</a></li>
              </ul>
            </details></li>
            <li><a class="block rounded-[9px] px-2.5 py-1.5 text-[#475569] no-underline hover:bg-[#f4f1fb] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#6d28d9] aria-[current=page]:bg-[#6d28d9] aria-[current=page]:font-semibold aria-[current=page]:text-white" href="#change-your-billing-date" aria-current="page">Change your billing date</a></li>
            <li><a class="block rounded-[9px] px-2.5 py-1.5 text-[#475569] no-underline hover:bg-[#f4f1fb] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#6d28d9] aria-[current=page]:bg-[#6d28d9] aria-[current=page]:font-semibold aria-[current=page]:text-white" href="#refunds">Refunds</a></li>
          </ul>
        </details></li>
        <li><details><summary class="flex cursor-pointer list-none items-center gap-2.5 rounded-[9px] px-2.5 py-2 font-semibold text-[#1f2937] hover:bg-[#f4f1fb] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#6d28d9] [&::-webkit-details-marker]:hidden [details.is-trail>&]:text-[#6d28d9]"><svg class="size-[18px] flex-none fill-none stroke-current stroke-[1.7] [stroke-linecap:round] [stroke-linejoin:round]" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3.5 7.2A1.7 1.7 0 0 1 5.2 5.5h4l2 2.2h7.6a1.7 1.7 0 0 1 1.7 1.7v8.4a1.7 1.7 0 0 1-1.7 1.7H5.2a1.7 1.7 0 0 1-1.7-1.7z"/></svg><span>Projects</span><span class="ml-auto rounded-full bg-[#eef0f4] px-2 py-px text-[.72rem] font-semibold text-[#475569] tabular-nums" aria-label="24 articles">24</span><svg class="size-3.5 flex-none transition-transform duration-150 motion-reduce:transition-none [details[open]>summary>&]:rotate-90 text-[#64748b]" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></summary>
          <ul class="m-0 ml-[22px] flex list-none flex-col gap-px py-1 pl-2.5">
            <li><a class="block rounded-[9px] px-2.5 py-1.5 text-[#475569] no-underline hover:bg-[#f4f1fb] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#6d28d9] aria-[current=page]:bg-[#6d28d9] aria-[current=page]:font-semibold aria-[current=page]:text-white" href="#invite-a-client">Invite a client</a></li>
            <li><a class="block rounded-[9px] px-2.5 py-1.5 text-[#475569] no-underline hover:bg-[#f4f1fb] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#6d28d9] aria-[current=page]:bg-[#6d28d9] aria-[current=page]:font-semibold aria-[current=page]:text-white" href="#archive-a-project">Archive a project</a></li>
            <li><a class="block rounded-[9px] px-2.5 py-1.5 text-[#475569] no-underline hover:bg-[#f4f1fb] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#6d28d9] aria-[current=page]:bg-[#6d28d9] aria-[current=page]:font-semibold aria-[current=page]:text-white" href="#export-to-csv">Export to CSV</a></li>
          </ul>
        </details></li>
        <li><details><summary class="flex cursor-pointer list-none items-center gap-2.5 rounded-[9px] px-2.5 py-2 font-semibold text-[#1f2937] hover:bg-[#f4f1fb] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#6d28d9] [&::-webkit-details-marker]:hidden [details.is-trail>&]:text-[#6d28d9]"><svg class="size-[18px] flex-none fill-none stroke-current stroke-[1.7] [stroke-linecap:round] [stroke-linejoin:round]" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 3.5v4M15 3.5v4M7 7.5h10v3.2a5 5 0 0 1-10 0zM12 15.7v4.8"/></svg><span>Integrations</span><span class="ml-auto rounded-full bg-[#eef0f4] px-2 py-px text-[.72rem] font-semibold text-[#475569] tabular-nums" aria-label="9 articles">9</span><svg class="size-3.5 flex-none transition-transform duration-150 motion-reduce:transition-none [details[open]>summary>&]:rotate-90 text-[#64748b]" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M9 6l6 6-6 6" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg></summary>
          <ul class="m-0 ml-[22px] flex list-none flex-col gap-px py-1 pl-2.5">
            <li><a class="block rounded-[9px] px-2.5 py-1.5 text-[#475569] no-underline hover:bg-[#f4f1fb] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#6d28d9] aria-[current=page]:bg-[#6d28d9] aria-[current=page]:font-semibold aria-[current=page]:text-white" href="#slack">Slack</a></li>
            <li><a class="block rounded-[9px] px-2.5 py-1.5 text-[#475569] no-underline hover:bg-[#f4f1fb] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#6d28d9] aria-[current=page]:bg-[#6d28d9] aria-[current=page]:font-semibold aria-[current=page]:text-white" href="#google-calendar">Google Calendar</a></li>
            <li><a class="block rounded-[9px] px-2.5 py-1.5 text-[#475569] no-underline hover:bg-[#f4f1fb] hover:text-[#0f172a] focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-[#6d28d9] aria-[current=page]:bg-[#6d28d9] aria-[current=page]:font-semibold aria-[current=page]:text-white" href="#zapier">Zapier</a></li>
          </ul>
        </details></li>
      </ul>
    </nav>
  </div>
  <div class="px-7 py-6 max-[480px]:px-5">
    <nav aria-label="Breadcrumb"><ol class="m-0 mb-2 flex list-none flex-wrap p-0 text-[.8rem] text-[#5b6577] [&>li+li]:before:px-1.5 [&>li+li]:before:content-['/']"><li>Help</li><li>Billing</li><li aria-current="page">Change your billing date</li></ol></nav>
    <h2 class="m-0 mb-2 text-[1.5rem] font-bold tracking-[-.01em]">Change your billing date</h2>
    <p class="m-0 max-w-[52ch] leading-[1.6] text-[#475569]">You can move your billing date once per billing cycle from Settings, Billing. The next invoice is adjusted for the days in between.</p>
  </div>
</div>
</div>

About this set

Two sidebar navigation trees shown next to the page they belong to. Docs sidebar with nested sections is a design-system documentation menu with uppercase section headings, a hairline rail beside each list of links and a nested Forms section; the current page is tinted with an accent edge. Help centre with icons and article counts is a support site menu with an icon for each topic, an article count badge, a nested Invoices group and the current article filled in violet. Both are a nav element with an aria-label, nested lists of ordinary links and details and summary elements for every collapsible section, so they work with no JavaScript and fold away with the keyboard. The current link carries aria-current page, and every section on the path to it is rendered open so readers can see where they are. A breadcrumb with its own aria-current repeats the path in the page header. Below 720px the sidebar sits above the content instead of beside it. Use the first for developer documentation and the second for help centres and knowledge bases.

What’s included

  • Two styles: docs sidebar with rails, help centre with icons and counts
  • Collapsible sections from details and summary, no JavaScript
  • Current page marked with aria-current and its sections open
  • Breadcrumb in the page header with the same trail
  • Bootstrap version built on .nav, .nav-link, .badge and .breadcrumb

Accessibility

Each menu is a nav landmark with its own label, and sections are summary elements announced with their open or closed state. The current page has aria-current page, so screen readers say current page. Links and summaries show a 2px outline on keyboard focus, text meets 4.5:1 including the white current link on violet, and chevrons stop rotating under prefers-reduced-motion.

Customise it

Change --dn-accent, --dn-tint and --dn-cur-text on .dn for the current page colours, and --dn-link, --dn-hover and --dn-line for links, hover and rails. In Bootstrap the link colours go through --bs-nav-link-color; in Tailwind edit the aria-[current=page]: utilities.