Sidebar
<ts-sidebar> vv0.6.3
The ts-sidebar component.
Open in Storybook for interactive demos.
Preview
Section titled “Preview”<ts-sidebar width="260px">Content</ts-sidebar>Properties
Section titled “Properties”| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
collapsed | collapsed | boolean | false | Whether the sidebar is collapsed. |
collapsible | collapsible | boolean | false | Whether the sidebar can be collapsed via a toggle button. |
width | width | string | '260px' | The expanded width of the sidebar. |
Events
Section titled “Events”| Event | Detail | Bubbles | Composed | Description |
|---|---|---|---|---|
tsToggle | \{ collapsed: boolean; \} | Yes | Yes | Emitted when the sidebar collapsed state changes. |
| Name | Description |
|---|---|
*(default)* | Default slot for navigation content (scrollable). |
footer | Content displayed at the bottom of the sidebar (sticky). |
header | Content displayed at the top of the sidebar (sticky). |
CSS Parts
Section titled “CSS Parts”Use ::part() to style internal elements:
| Part | Description |
|---|---|
container | The main sidebar container. |
content | The scrollable content area. |
footer | The footer slot wrapper. |
header | The header slot wrapper. |
toggle | The collapse toggle button. |
ts-sidebar::part(container) { /* your custom styles */}<ts-sidebar width="260px">Content</ts-sidebar>import { TsSidebar } from '@tessera-ui/react';
<TsSidebar width="260px">Content</TsSidebar>