Sidebar
Collapsible navigation sidebar.
import { Sidebar } from '@ybouhjira/hyperkit';#Playground
Edit the code — the preview recompiles and re-renders as you type.
Loading preview…
#Props
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | — |
onToggle | () => void | — | — |
width | string | — | — |
header | JSX.Element | — | — |
footer | JSX.Element | — | — |
children * | JSX.Element | — | — |
class | string | — | — |
* required prop.
#Design Tokens
This component reads the following CSS custom properties. Override them globally or per-instance to restyle it — see the CSS Variables guide.
--sk-accent--sk-bg-secondary--sk-bg-tertiary--sk-border--sk-border-subtle--sk-duration-normal--sk-font-size-sm--sk-icon-xl--sk-space-sm--sk-text-primary--sk-text-secondary--sk-z-sticky