Sidebar

A composable, responsive sidebar component with support for nested navigation, headers, and footers. Handles expanded state and active items automatically.

Installation

# Install @opencosmos/ui to use Sidebar
pnpm add @opencosmos/ui

Preview

Loading preview...

Customize

isOpen— Whether the sidebar is expanded (mobile) or visible

className— Additional CSS classes. Use "!relative" to force containment within a layout if needed.

Usage

Import

import { Sidebar } from '@opencosmos/ui';

Example

<Sidebar>
  Content
</Sidebar>

Eject

Copy this component into your project for full customization

API Reference

Prop	Type	Default	Description
isOpen	boolean	true	Whether the sidebar is expanded (mobile) or visible
className	text	"!relative !top-auto !left-auto !h-[500px] w-full max-w-[280px] border-r shadow-none"	Additional CSS classes. Use "!relative" to force containment within a layout if needed.

Accessibility

Uses semantically correct <aside> element for the root container.
Navigation items use <button> or Slot for keyboard interaction.

Code Examples

Basic Structure

Standard layout with header, content area, and footer.

import { Sidebar, SidebarHeader, SidebarContent, SidebarFooter, SidebarItem } from '@opencosmos/ui';

export default function AppSidebar() {
  return (
    <Sidebar>
      <SidebarHeader><h2>App Name</h2></SidebarHeader>
      <SidebarContent>
        <SidebarItem isActive>Dashboard</SidebarItem>
        <SidebarItem>Settings</SidebarItem>
      </SidebarContent>
      <SidebarFooter>
        <SidebarItem>Profile</SidebarItem>
      </SidebarFooter>
    </Sidebar>
  );
}