devsnips
Search docs, APIs, guides…

Component

Sidebar Accordion

Documentation navigation sidebar where category groups expand to reveal link lists with an active-page marker and connector line. Multi-open so readers keep context while browsing.

  • Component
  • Tailwind
  • HTML
  • MIT

What it does

Capabilities

  • Active page marker
  • Connector line
  • Section counts
  • Multi-open mode
  • 90deg chevron
  • Hover states

Preview

Live component

Interactive preview
Open preview
9:41 100%
devsnips.site/library/tailwind/components/accordions/sidebar-accordion/
fluid · no fixed width 100%
No dependencies Production-ready

Install

Add to your project

terminal
npx devsnips add Tailwind/Components/Accordions/sidebar-accordion
registry path: Tailwind/Components/Accordions/sidebar-accordion

Source

Implementation

code.html 
<!--
Snippet Name: Sidebar Accordion
Description: Documentation navigation sidebar. Category groups expand to reveal link lists with an active-item marker. Multi-open with section counts.
Author: DevSnips Contributors
Usage Example: Left-rail docs navigation; keep multiple sections open while reading.
-->
<nav class="space-y-1.5" aria-label="Documentation" data-accordion="sidebar">
  <div data-accordion-item>
    <button type="button" id="side-trigger-1" aria-controls="side-panel-1" aria-expanded="true" class="accordion-trigger group flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-left text-sm font-medium text-gray-900 hover:bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-inset">
      <svg class="accordion-chevron h-4 w-4 shrink-0 text-gray-400 transition-transform duration-300 ease-out" style="transform: rotate(90deg)" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
      <span>Getting Started</span>
      <span class="ml-auto text-[11px] font-medium text-gray-400">4</span>
    </button>
    <div id="side-panel-1" role="region" aria-labelledby="side-trigger-1" class="accordion-panel grid grid-rows-[1fr] transition-[grid-template-rows] duration-300 ease-out">
      <div class="overflow-hidden">
        <ul class="mt-1 space-y-0.5 border-l border-gray-200 pl-3 ml-4">
          <li><a href="#" aria-current="page" class="flex items-center gap-2 rounded-md -ml-3 border-l-2 border-blue-500 bg-blue-50/60 py-1.5 pl-3 pr-2 text-sm text-blue-700">Introduction</a></li>
          <li><a href="#" class="block rounded-md py-1.5 pl-3 pr-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900">Installation</a></li>
          <li><a href="#" class="block rounded-md py-1.5 pl-3 pr-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900">Project structure</a></li>
          <li><a href="#" class="block rounded-md py-1.5 pl-3 pr-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900">Theming</a></li>
        </ul>
      </div>
    </div>
  </div>

  <div data-accordion-item>
    <button type="button" id="side-trigger-2" aria-controls="side-panel-2" aria-expanded="false" class="accordion-trigger group flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-left text-sm font-medium text-gray-900 hover:bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-inset">
      <svg class="accordion-chevron h-4 w-4 shrink-0 text-gray-400 transition-transform duration-300 ease-out" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
      <span>Components</span>
      <span class="ml-auto text-[11px] font-medium text-gray-400">12</span>
    </button>
    <div id="side-panel-2" role="region" aria-labelledby="side-trigger-2" class="accordion-panel grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 ease-out">
      <div class="overflow-hidden">
        <ul class="mt-1 space-y-0.5 border-l border-gray-200 pl-3 ml-4">
          <li><a href="#" class="block rounded-md py-1.5 pl-3 pr-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900">Buttons</a></li>
          <li><a href="#" class="block rounded-md py-1.5 pl-3 pr-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900">Cards</a></li>
          <li><a href="#" class="block rounded-md py-1.5 pl-3 pr-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900">Accordions</a></li>
        </ul>
      </div>
    </div>
  </div>

  <div data-accordion-item>
    <button type="button" id="side-trigger-3" aria-controls="side-panel-3" aria-expanded="false" class="accordion-trigger group flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-left text-sm font-medium text-gray-900 hover:bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-inset">
      <svg class="accordion-chevron h-4 w-4 shrink-0 text-gray-400 transition-transform duration-300 ease-out" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
      <span>API Reference</span>
      <span class="ml-auto text-[11px] font-medium text-gray-400">8</span>
    </button>
    <div id="side-panel-3" role="region" aria-labelledby="side-trigger-3" class="accordion-panel grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 ease-out">
      <div class="overflow-hidden">
        <ul class="mt-1 space-y-0.5 border-l border-gray-200 pl-3 ml-4">
          <li><a href="#" class="block rounded-md py-1.5 pl-3 pr-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900">Authentication</a></li>
          <li><a href="#" class="block rounded-md py-1.5 pl-3 pr-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900">Endpoints</a></li>
          <li><a href="#" class="block rounded-md py-1.5 pl-3 pr-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900">Webhooks</a></li>
        </ul>
      </div>
    </div>
  </div>

  <div data-accordion-item>
    <button type="button" id="side-trigger-4" aria-controls="side-panel-4" aria-expanded="false" class="accordion-trigger group flex w-full items-center gap-2.5 rounded-lg px-3 py-2 text-left text-sm font-medium text-gray-900 hover:bg-gray-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-inset">
      <svg class="accordion-chevron h-4 w-4 shrink-0 text-gray-400 transition-transform duration-300 ease-out" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/></svg>
      <span>Guides</span>
      <span class="ml-auto text-[11px] font-medium text-gray-400">6</span>
    </button>
    <div id="side-panel-4" role="region" aria-labelledby="side-trigger-4" class="accordion-panel grid grid-rows-[0fr] transition-[grid-template-rows] duration-300 ease-out">
      <div class="overflow-hidden">
        <ul class="mt-1 space-y-0.5 border-l border-gray-200 pl-3 ml-4">
          <li><a href="#" class="block rounded-md py-1.5 pl-3 pr-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900">Deployment</a></li>
          <li><a href="#" class="block rounded-md py-1.5 pl-3 pr-2 text-sm text-gray-600 hover:bg-gray-100 hover:text-gray-900">Testing</a></li>
        </ul>
      </div>
    </div>
  </div>

  <script>
    (function () {
      const root = document.currentScript.closest('[data-accordion]');
      if (!root) return;
      root.querySelectorAll('[data-accordion-item]').forEach((item) => {
        const trigger = item.querySelector('.accordion-trigger');
        const panel = item.querySelector('.accordion-panel');
        const chevron = trigger ? trigger.querySelector('.accordion-chevron') : null;
        if (!trigger || !panel) return;
        const toggle = () => {
          const open = trigger.getAttribute('aria-expanded') === 'true';
          trigger.setAttribute('aria-expanded', String(!open));
          panel.classList.toggle('grid-rows-[1fr]', !open);
          panel.classList.toggle('grid-rows-[0fr]', open);
          if (chevron) chevron.style.transform = open ? '' : 'rotate(90deg)';
        };
        trigger.addEventListener('click', toggle);
      });
    })();
  </script>
</nav>
96 lines UTF-8 · LF · Spaces: 2
DevSnips AI ready Claude · Cursor · Windsurf

Agent skill & Model Context Protocol

Pass this component straight into your AI workflow. DevSnips exposes each resource as a structured, addressable registry entry, so your agent installs the real files instead of approximating them.

devsnips://components/accordions/sidebar-accordion
Prompt instruction 
I want to use this DevSnips resource in production:

Page:
https://devsnips.site/library/tailwind/components/accordions/sidebar-accordion/

Install: npx devsnips add
Tailwind/Components/Accordions/sidebar-accordion

This is the Sidebar Accordion — Documentation navigation sidebar where category groups expand to reveal link lists with an active-page marker and connector line. Multi-open so readers keep context while browsing.

Use this DevSnips resource as the starting point for my project.
Adapt it to my project's stack and conventions, fix any issues,
and make it production-ready while preserving its intended design
and behavior.

Paste into ChatGPT, Claude or your agent — it already carries the page URL and the exact install path.

Resource URI
devsnips://components/accordions/sidebar-accordion