Navigation · Sidebar
SSR NativeAccessibleSidebar
Provides responsive workspace navigation with a mobile drawer.
Astro
---
import { Sidebar } from '@charvesta/cetha';
---
<Button data-cetha-sidebar-toggle="workspace-nav">Menu</Button>
<Sidebar id="workspace-nav" label="Workspace" closeLabel="Close navigation" collapsible="all">
<strong slot="header">Acme</strong>
<a href="/">Overview</a>
</Sidebar>API reference
| Prop | Type | Default | Description |
|---|---|---|---|
id* | string | — | Target used by sidebar toggle controls. |
label* | string | — | Navigation landmark label. |
open | boolean | false | Initial open state. |
closeLabel | string | — | Adds an accessible close control. |
collapsible | 'desktop' | 'mobile' | 'all' | 'mobile' | Viewport modes where the sidebar behaves as a drawer. |
width | 'sm' | 'md' | 'lg' | 'md' | Panel width. |
side | 'left' | 'right' | 'left' | Panel edge. |
class | string | — | Additional classes forwarded to the rendered element. |
Accessibility
The trigger exposes its expanded state; Escape closes the drawer and returns focus.