Accordion Sidebar Nav
Docs-style sidebar with collapsible sections that open on a measured height tween, rotating chevrons and a sliding indicator rail on the active link.
About This Component
A documentation sidebar with collapsible sections. Every section opens on a measured height tween rather than a height auto jump, the chevrons rotate with the state, and a slim rail slides down the left edge to sit against whichever link is current.
Read the full effect overview
One section is open at a time by default; add data-multi="true" to the root and they stack. Ships in three looks, vault, corporate and soft, switched by one data-variant attribute and defined entirely in CSS custom properties, so the same script serves all three. GSAP core only: no plugins, no framework.
What's Included
- Sections open on a measured pixel height, never a height auto jump
- Panels return to height auto once open, so they reflow with the viewport
- Chevrons rotate through the state with their own tween
- Sliding rail follows the active link and hides when its section is closed
- One section open at a time, with a data-multi opt-out for stacking
- Real buttons with aria-expanded, plus arrow, Home and End key navigation
- Panels stay open with JavaScript off, so nothing is hidden from a crawler
- Three shipped variants: vault, corporate, soft
Perfect For
- Documentation and knowledge-base sidebars
- Dashboard and admin navigation with grouped destinations
- Settings screens with collapsible groups
- Any long nav that needs to fold down to a scannable list
How It Works
Measured height, not auto
Opening a section reads the panel's current offsetHeight, flips it to height auto to measure the natural height, restores the starting value and then tweens between the two numbers. On completion an open panel is set back to auto so it reflows if the viewport or content changes. Nothing ever tweens toward the string auto, which is what produces the jump most accordions ship with.
The sliding rail
The rail keeps left: 0 in CSS and takes its entire offset from a measurement, y and height from the active link's rectangle relative to the nav, so a CSS offset can never be added twice. It re-measures on the height tween's onUpdate, on resize, and on document.fonts.ready, and fades out when the active link's section is collapsed.
Keyboard and state
Each section header is a real button carrying aria-expanded, so screen readers get the state for free; arrow keys, Home and End move between the headers. The trigger label colour is read from the --trigger-ink-open custom property at the moment the tween runs, so a variant swap needs no JavaScript.