DocsSidebar Component

DocsSidebar

A collapsible sidebar navigation organism for documentation sites. Supports nested sections, active state tracking, icons, and smooth expand/collapse animations with Alpine.js.

Basic Sidebar

With Active State

Usage Example

<x-interface-frameworks.docs-sidebar
    :sections="$sections"
    activeItem="intro"
/>

Props

Prop	Type	Default	Description
sections	array	[]	Section objects with id, label, icon, items, open
activeItem	string\|null	null	ID of the currently active item
class	string	''	Additional CSS classes

Section Object Structure

[
    'id' => 'unique-id',          // Required: unique identifier
    'label' => 'Section Name',    // Required: display text
    'icon' => 'heart',            // Optional: icon name
    'href' => '/path',            // Optional: direct link (no items)
    'open' => true,               // Optional: initially expanded
    'items' => [                  // Optional: nested items
        [
            'id' => 'item-id',
            'label' => 'Item Name',
            'href' => '/path/to/item',
        ],
    ],
]

Accessibility Features

Semantic aside and nav elements
Section toggle buttons have aria-expanded
Active items marked with aria-current="page"
Keyboard navigation support (Tab, Enter, Space)
Smooth transitions for expand/collapse