Sidebar

v0.4.5
Stable

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.).

pnpm add @behivetech/atoms.sidebar

This is the snapshot of v0.4.5, the current version, as recorded on 2026-11-10. The live page runs its examples →

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";
3

4<Sidebar>
5  <div>My Logo</div>
6  <nav>
7    <NavItem href="/pages" icon="☰" active>
8      Pages
9    </NavItem>
10  </nav>
11</Sidebar>;

Examples

Open all 1 →
Basic Sidebar
1const BasicSidebar = () => <Sidebar>Sidebar content</Sidebar>;
2

3render(<BasicSidebar />);

Properties

Sidebar props

PropTypeDefaultDescription
childrenReactNode—Content to render inside the sidebar
classNamestring—Additional class names to merge with the component root element

Also accepts the native attributes of its root element (className, aria-*, event handlers, …).