A dumb, styled sidebar shell — sticky, full-height, scrollable flex container. It renders an `<aside>` and applies no internal structure; the consumer is responsible for composing whatever goes inside (logo, nav, `NavItem`s, etc.).
A dumb, styled sidebar shell — sticky, full-height, scrollable flex
container. It renders an <aside> and applies no internal structure; the
consumer is responsible for composing whatever goes inside (logo, nav,
NavItems, etc.).
Usage
1import { Sidebar } from "@behivetech/atoms.sidebar";2import { NavItem } from "@behivetech/atoms.nav-item";34<Sidebar>5 <div>My Logo</div>6 <nav>7 <NavItem href="/pages" icon="☰" active>8 Pages9 </NavItem>10 </nav>11</Sidebar>;
Examples
Open all 1 →Basic Sidebar
1const BasicSidebar = () => <Sidebar>Sidebar content</Sidebar>;23render(<BasicSidebar />);
Properties
Sidebar props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Content to render inside the sidebar |
className | string | — | Additional class names to merge with the component root element |
Also accepts the native attributes of its root element (className, aria-*, event handlers, …).