Open demo

CSS code

HTML 
<nav class="acn" aria-label="Shop">
  <ul>
    <li><a class="acn-single" href="#"><span aria-hidden="true">🏠</span> Home</a></li>
    <li>
      <details open>
        <summary><span aria-hidden="true">🛍️</span> Shop <span class="acn-chev" aria-hidden="true">▸</span></summary>
        <ul>
          <li><a href="#" aria-current="page">New arrivals</a></li>
          <li><a href="#">Furniture</a></li>
          <li><a href="#">Lighting</a></li>
          <li><a href="#">Textiles</a></li>
        </ul>
      </details>
    </li>
    <li>
      <details>
        <summary><span aria-hidden="true">📖</span> Stories <span class="acn-chev" aria-hidden="true">▸</span></summary>
        <ul>
          <li><a href="#">Maker interviews</a></li>
          <li><a href="#">Studio visits</a></li>
        </ul>
      </details>
    </li>
    <li>
      <details>
        <summary><span aria-hidden="true">🧾</span> Help <span class="acn-chev" aria-hidden="true">▸</span></summary>
        <ul>
          <li><a href="#">Shipping</a></li>
          <li><a href="#">Returns</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </details>
    </li>
  </ul>
</nav>
CSS 
/* Accordion navigation: each section is a native <details>, so its <summary> is a keyboard-operable disclosure
   that screen readers announce as expanded or collapsed. */
.acn{width:100%;max-width:380px;background:#fff;border:1px solid #eae4d8;border-radius:16px;padding:10px;box-shadow:0 16px 36px -22px rgba(80,60,20,.28)}
.acn ul{list-style:none;margin:0;padding:0}
.acn details{border-radius:11px;overflow:hidden}
.acn summary{list-style:none;display:flex;align-items:center;gap:12px;padding:13px 14px;font-size:.92rem;font-weight:700;cursor:pointer;border-radius:11px;transition:background-color .13s}
.acn summary::-webkit-details-marker{display:none}
.acn summary:hover{background:#faf7f1}
.acn-chev{margin-left:auto;font-size:.7rem;color:#8f8067;transition:transform .2s}
.acn details[open] summary{background:#faf6ee}
.acn details[open] .acn-chev{transform:rotate(90deg)}
.acn details a{display:block;padding:10px 14px 10px 46px;font-size:.86rem;font-weight:600;color:#7a6c54;text-decoration:none;border-radius:9px}
.acn details a:hover,.acn details a[aria-current="page"]{background:#faf7f1;color:#27211a}
.acn details a[aria-current="page"]{box-shadow:inset 3px 0 0 #b45309}
.acn-single{display:flex;align-items:center;gap:12px;padding:13px 14px;font-size:.92rem;font-weight:700;color:#27211a;text-decoration:none;border-radius:11px}
.acn-single:hover{background:#faf7f1}
.acn a:focus-visible,.acn summary:focus-visible{outline:2px solid #b45309;outline-offset:-2px}
@media (prefers-reduced-motion:reduce){.acn summary,.acn-chev{transition:none}}
JavaScript 
/* Optional: Esc inside an open section closes it and returns focus to its summary. Opening and closing need no script. */
document.querySelectorAll('.acn details').forEach(d => d.addEventListener('keydown', e => {
  if (e.key === 'Escape' && d.open) { e.stopPropagation(); d.open = false; d.querySelector('summary').focus(); }
}));

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS, Bootstrap 5.3.8 JS bundle

HTML 
<nav class="acn" aria-label="Shop">
  <ul class="accordion list-unstyled m-0">
    <li><a class="acn-single" href="#"><span aria-hidden="true">🏠</span> Home</a></li>
    <li class="accordion-item">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#acn-shop" aria-expanded="true" aria-controls="acn-shop"><span aria-hidden="true">🛍️</span> Shop</button>
      <ul class="accordion-collapse collapse show list-unstyled m-0" id="acn-shop">
        <li><a class="active" href="#" aria-current="page">New arrivals</a></li>
        <li><a href="#">Furniture</a></li>
        <li><a href="#">Lighting</a></li>
        <li><a href="#">Textiles</a></li>
      </ul>
    </li>
    <li class="accordion-item">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acn-stories" aria-expanded="false" aria-controls="acn-stories"><span aria-hidden="true">📖</span> Stories</button>
      <ul class="accordion-collapse collapse list-unstyled m-0" id="acn-stories">
        <li><a href="#">Maker interviews</a></li>
        <li><a href="#">Studio visits</a></li>
      </ul>
    </li>
    <li class="accordion-item">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#acn-help" aria-expanded="false" aria-controls="acn-help"><span aria-hidden="true">🧾</span> Help</button>
      <ul class="accordion-collapse collapse list-unstyled m-0" id="acn-help">
        <li><a href="#">Shipping</a></li>
        <li><a href="#">Returns</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </li>
  </ul>
</nav>
CSS 
/* Bootstrap .accordion restyled through --bs-accordion-* variables. The Collapse plugin keeps aria-expanded on each
   .accordion-button in sync; a few lines of script add Esc to close. */
.acn{width:100%;max-width:380px;background:#fff;border:1px solid #eae4d8;border-radius:16px;padding:10px;box-shadow:0 16px 36px -22px rgba(80,60,20,.28)}
.acn .accordion{--bs-accordion-bg:transparent;--bs-accordion-color:#27211a;--bs-accordion-border-width:0;--bs-accordion-border-radius:11px;--bs-accordion-inner-border-radius:11px;
  --bs-accordion-btn-padding-x:14px;--bs-accordion-btn-padding-y:13px;--bs-accordion-btn-color:#27211a;--bs-accordion-btn-bg:transparent;
  --bs-accordion-btn-icon:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='%238f8067' d='M5 2.5 12 8l-7 5.5z'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon:var(--bs-accordion-btn-icon);--bs-accordion-btn-icon-width:9px;--bs-accordion-btn-icon-transform:rotate(90deg);--bs-accordion-btn-icon-transition:transform .2s;
  --bs-accordion-btn-focus-box-shadow:none;--bs-accordion-active-color:#27211a;--bs-accordion-active-bg:#faf6ee}
.acn .accordion-item{border-radius:11px;overflow:hidden}
.acn .accordion-button{gap:12px;font-size:.92rem;font-weight:700;line-height:normal;border-radius:11px;transition:background-color .13s}
.acn .accordion-button:hover{background:#faf7f1}
.acn .accordion-button:not(.collapsed):hover{background:#faf6ee}
.acn .accordion-collapse a{display:block;padding:10px 14px 10px 46px;font-size:.86rem;font-weight:600;color:#7a6c54;text-decoration:none;border-radius:9px}
.acn .accordion-collapse a:hover,.acn .accordion-collapse a.active{background:#faf7f1;color:#27211a}
.acn .accordion-collapse a.active{box-shadow:inset 3px 0 0 #b45309}
.acn-single{display:flex;align-items:center;gap:12px;padding:13px 14px;font-size:.92rem;font-weight:700;color:#27211a;text-decoration:none;border-radius:11px}
.acn-single:hover{background:#faf7f1;color:#27211a}
.acn a:focus-visible,.acn .accordion-button:focus-visible{outline:2px solid #b45309;outline-offset:-2px}
@media (prefers-reduced-motion:reduce){.acn .accordion-button,.acn .accordion-button::after,.acn .collapsing{transition:none}}
JavaScript 
/* Esc inside an open section collapses it and returns focus to its button. */
document.querySelectorAll('.acn .accordion-collapse').forEach(list => {
  const btn = document.querySelector(`[data-bs-target="#${list.id}"]`);
  list.addEventListener('keydown', e => { if (e.key === 'Escape') { bootstrap.Collapse.getOrCreateInstance(list, { toggle: false }).hide(); btn.focus(); } });
});

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<nav class="acn w-full max-w-[380px] rounded-2xl border border-[#eae4d8] bg-white p-2.5 shadow-[0_16px_36px_-22px_rgba(80,60,20,.28)]" aria-label="Shop">
  <ul>
    <li><a class="flex items-center gap-3 rounded-[11px] px-3.5 py-[13px] text-[.92rem] font-bold text-acn-ink hover:bg-acn-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-acn-accent" href="#"><span aria-hidden="true">🏠</span> Home</a></li>
    <li>
      <details class="group overflow-hidden rounded-[11px]" open>
        <summary class="flex cursor-pointer list-none items-center gap-3 rounded-[11px] px-3.5 py-[13px] text-[.92rem] font-bold transition-colors duration-[130ms] group-open:bg-acn-open hover:bg-acn-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-acn-accent motion-reduce:transition-none [&::-webkit-details-marker]:hidden"><span aria-hidden="true">🛍️</span> Shop <span class="ml-auto text-[.7rem] text-[#8f8067] transition-transform duration-200 group-open:rotate-90 motion-reduce:transition-none" aria-hidden="true">▸</span></summary>
        <ul>
          <li><a class="block rounded-[9px] bg-acn-hover py-2.5 pr-3.5 pl-[46px] text-[.86rem] font-semibold text-acn-ink shadow-[inset_3px_0_0_var(--color-acn-accent)] focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-acn-accent" href="#" aria-current="page">New arrivals</a></li>
          <li><a class="block rounded-[9px] py-2.5 pr-3.5 pl-[46px] text-[.86rem] font-semibold text-acn-muted hover:bg-acn-hover hover:text-acn-ink focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-acn-accent" href="#">Furniture</a></li>
          <li><a class="block rounded-[9px] py-2.5 pr-3.5 pl-[46px] text-[.86rem] font-semibold text-acn-muted hover:bg-acn-hover hover:text-acn-ink focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-acn-accent" href="#">Lighting</a></li>
          <li><a class="block rounded-[9px] py-2.5 pr-3.5 pl-[46px] text-[.86rem] font-semibold text-acn-muted hover:bg-acn-hover hover:text-acn-ink focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-acn-accent" href="#">Textiles</a></li>
        </ul>
      </details>
    </li>
    <li>
      <details class="group overflow-hidden rounded-[11px]">
        <summary class="flex cursor-pointer list-none items-center gap-3 rounded-[11px] px-3.5 py-[13px] text-[.92rem] font-bold transition-colors duration-[130ms] group-open:bg-acn-open hover:bg-acn-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-acn-accent motion-reduce:transition-none [&::-webkit-details-marker]:hidden"><span aria-hidden="true">📖</span> Stories <span class="ml-auto text-[.7rem] text-[#8f8067] transition-transform duration-200 group-open:rotate-90 motion-reduce:transition-none" aria-hidden="true">▸</span></summary>
        <ul>
          <li><a class="block rounded-[9px] py-2.5 pr-3.5 pl-[46px] text-[.86rem] font-semibold text-acn-muted hover:bg-acn-hover hover:text-acn-ink focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-acn-accent" href="#">Maker interviews</a></li>
          <li><a class="block rounded-[9px] py-2.5 pr-3.5 pl-[46px] text-[.86rem] font-semibold text-acn-muted hover:bg-acn-hover hover:text-acn-ink focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-acn-accent" href="#">Studio visits</a></li>
        </ul>
      </details>
    </li>
    <li>
      <details class="group overflow-hidden rounded-[11px]">
        <summary class="flex cursor-pointer list-none items-center gap-3 rounded-[11px] px-3.5 py-[13px] text-[.92rem] font-bold transition-colors duration-[130ms] group-open:bg-acn-open hover:bg-acn-hover focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-acn-accent motion-reduce:transition-none [&::-webkit-details-marker]:hidden"><span aria-hidden="true">🧾</span> Help <span class="ml-auto text-[.7rem] text-[#8f8067] transition-transform duration-200 group-open:rotate-90 motion-reduce:transition-none" aria-hidden="true">▸</span></summary>
        <ul>
          <li><a class="block rounded-[9px] py-2.5 pr-3.5 pl-[46px] text-[.86rem] font-semibold text-acn-muted hover:bg-acn-hover hover:text-acn-ink focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-acn-accent" href="#">Shipping</a></li>
          <li><a class="block rounded-[9px] py-2.5 pr-3.5 pl-[46px] text-[.86rem] font-semibold text-acn-muted hover:bg-acn-hover hover:text-acn-ink focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-acn-accent" href="#">Returns</a></li>
          <li><a class="block rounded-[9px] py-2.5 pr-3.5 pl-[46px] text-[.86rem] font-semibold text-acn-muted hover:bg-acn-hover hover:text-acn-ink focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-acn-accent" href="#">Contact</a></li>
        </ul>
      </details>
    </li>
  </ul>
</nav>
CSS 
@theme {
  --color-acn-ink: #27211a;
  --color-acn-muted: #7a6c54;
  --color-acn-hover: #faf7f1;
  --color-acn-open: #faf6ee;
  --color-acn-accent: #b45309;
}
JavaScript 
/* Optional: Esc inside an open section closes it and returns focus to its summary. Opening and closing need no script. */
document.querySelectorAll('.acn details').forEach(d => d.addEventListener('keydown', e => {
  if (e.key === 'Escape' && d.open) { e.stopPropagation(); d.open = false; d.querySelector('summary').focus(); }
}));

About this set

A warm, card-style navigation menu for shops and content sites. A plain Home link sits above three expandable sections, Shop, Stories and Help, each with a chevron that turns as it opens. Shop starts open with New arrivals marked as the current page, shown by a tinted row and an amber edge. Use it for a sidebar or a mobile menu where the sections have a handful of pages each and visitors benefit from seeing the whole outline at once. Each section is a native details element, so its summary is already a keyboard-operable disclosure that screen readers announce as expanded or collapsed, and opening and closing need no script. A few optional lines add Esc to close the section you are in and return focus to its summary. Sections open independently, so several can be expanded together. The Bootstrap version rebuilds the same design on .accordion with the Collapse plugin, drawing the chevron through –bs-accordion-btn-icon. The Tailwind version keeps details and summary and styles them with group-open utilities.

What’s included

  • Native details and summary sections
  • Chevron that rotates as a section opens
  • Current page marked with aria-current and an amber edge
  • Sections open independently
  • Optional Esc to close the section in focus

Accessibility

The menu is a nav labelled Shop containing nested lists, so screen readers report how many links each section holds. Each summary is announced as a button with its expanded state and toggles with Enter or Space; in the Bootstrap version the accordion buttons carry aria-expanded. Links and summaries show a 2px amber outline on keyboard focus, and the chevron and hover transitions stop under prefers-reduced-motion.

Customise it

Change the card, hover and open colours in .acn and .acn summary (plain CSS), the --bs-accordion-* variables on .acn .accordion (Bootstrap) or the --color-acn-* theme colours (Tailwind). The chevron colour is #8f8067.