Sidebar
A collapsible side bar: on desktop, collapsed narrows it to an icon strip; on mobile (narrower than mobile-breakpoint, default 768px) it automatically becomes an overlay drawer with a backdrop. Clicking outside, the close button or Esc collapses it.
Basic usage
Pass menu JSON via the items attribute ([{label, value, icon?}]); the default slot holds custom content.
Default sidebar
Collapsing
Clicking the bottom「«」button toggles collapsed (a controlled attribute; fires oas-collapse). In the collapsed state only icons are shown, and menu items without an icon are hidden automatically.
collapsed icon state
Mobile drawer
On narrow screens the sidebar automatically becomes an overlay drawer: the floating ☰ button at the top-left opens it, and the backdrop / close button / Esc collapses it. Tune the breakpoint with mobile-breakpoint (this demo uses 700px so it can be observed on a wide screen).
Mobile drawer (breakpoint 700)
Controlled mobile drawer
drawer-open is a controlled attribute: setting/removing it externally opens/closes the mobile drawer (no need to click the floating ☰). This demo raises the breakpoint to force the mobile form so it can be observed on a wide screen.
Controlled drawer-open
drawer-open to control the drawer; after it is closed via the mask / ✕ / Esc, the attribute is removed. Custom width
The width attribute overrides the expanded width (defaults to the --oas-sidebar-width token); the collapsed state still narrows to an icon strip.
width attribute
Combining with oas-layout
oas-sidebar can be used directly as the sider of oas-layout (slot="sider").
sidebar as the sider
Main content area.
API
Attributes
| Attribute | Description | Type | Default |
|---|---|---|---|
collapsed | Controlled collapse to an icon strip (present means collapsed) | boolean | — |
drawer-open | — | boolean | — |
items | Menu items JSON [{label, value, icon?}] | SidebarItem[] | string | [] |
mobile-breakpoint | Mobile breakpoint (px); narrower than this becomes an overlay drawer | — | — |
width | Expanded width; defaults to the --oas-sidebar-width token | — | — |
Events
| Event | Description |
|---|---|
oas-collapse | detail: { collapsed: boolean }; When fired: Desktop collapse button toggled |
oas-select | detail: { value: string, label: string }; When fired: A menu item was selected (also collapses the drawer on mobile) |
Slots
| Name | Description |
|---|---|
| default | — |
footer | — |
header | — |
Parts
root / panel / head / close / nav / body / foot / toggle (desktop collapse) / trigger (mobile trigger) / mask / item; the header and footer content are injected via slot="header", the default slot and slot="footer" respectively.