Component reference
Sidebar
Grouped navigation that can collapse without losing its controls.
Preview
Live previewOptional six-digit hex. Clear to restore the preset. Check contrast with your brand color.
Changes apply to this preview only.
Width adapts to the available space
"use client";
import { useState } from "react";
import {
Sidebar,
SidebarContent,
SidebarFooter,
SidebarGroup,
SidebarGroupLabel,
SidebarHeader,
SidebarItem
} from "@pimolu/react";
export function SidebarExample() {
const [active, setActive] = useState("Overview");
return (
<div className="space-y-5">
<Sidebar collapsible collapseOnMobile={false} aria-label="Example sidebar">
<SidebarHeader>Orbit workspace</SidebarHeader>
<SidebarContent aria-label="Workspace sections">
<SidebarGroup>
<SidebarGroupLabel>Workspace</SidebarGroupLabel>
{
[
"Overview",
"Projects",
"Members"
].map((label, index) => <SidebarItem
key={label}
icon={<span
aria-hidden="true"
>{
index + 1
}</span>}
href="#sidebar-example"
active={active === label}
onClick={(event) => { event.preventDefault(); setActive(label); }}
>
{
label
}
</SidebarItem>)
}
</SidebarGroup>
</SidebarContent>
<SidebarFooter>Personal workspace</SidebarFooter>
</Sidebar>
<p id="sidebar-example" role="status">Current section: {active}.</p>
</div>
);
}More examples
Different configurations and compositions using the real Pimolu API. Each preview runs independently and follows the site appearance.
External collapse control
Icon navigation keeps accessible item names when collapsed; expand to reveal labels.
Start as an icon rail
Icon navigation keeps accessible item names when collapsed; expand to reveal labels.
Dashboard
Collapse the navigation to give the content more room. On narrow screens, the navigation stacks above the content.
Usage
Compose header, content, groups, items and footer. Enable collapsible to expose the built-in toggle; use collapsed/onCollapsedChange to own its state.
collapseOnMobile supplies a responsive default at 720px and below until an uncontrolled sidebar is explicitly toggled. Provide icons for an informative collapsed rail, and decide how navigation should behave in the surrounding layout.
API reference
Generated from the public TypeScript declarations. Native HTML attributes are inherited where the component extends them; this reference includes Pimolu props and selected common native attributes.
PimoluSidebarProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
sticky | boolean | undefined | false | Stick to the top of the scroll container. |
collapsible | boolean | undefined | false | Show a built-in control to collapse and expand the navigation. |
collapsed | boolean | undefined | — | Controlled collapsed state. |
defaultCollapsed | boolean | undefined | — | Initial collapsed state when uncontrolled. |
collapseOnMobile | boolean | undefined | true | Start collapsed below 720px unless the state is controlled or explicitly set. |
onCollapsedChange | ((collapsed: boolean) => void) | undefined | — | Public Pimolu prop; see the source declaration for details. |
collapseLabel | string | undefined | "Collapse sidebar" | Public Pimolu prop; see the source declaration for details. |
expandLabel | string | undefined | "Expand sidebar" | Public Pimolu prop; see the source declaration for details. |
childrenRequired | ReactNode | — | Public Pimolu prop; see the source declaration for details. |
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
onChange | ChangeEventHandler<HTMLElement, Element> | undefined | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLElement> | undefined | — | Standard React/HTML attribute. |
stickyboolean | undefinedDefault: false
Stick to the top of the scroll container.
collapsibleboolean | undefinedDefault: false
Show a built-in control to collapse and expand the navigation.
collapsedboolean | undefinedNo default extracted.
Controlled collapsed state.
defaultCollapsedboolean | undefinedNo default extracted.
Initial collapsed state when uncontrolled.
collapseOnMobileboolean | undefinedDefault: true
Start collapsed below 720px unless the state is controlled or explicitly set.
onCollapsedChange((collapsed: boolean) => void) | undefinedNo default extracted.
Public Pimolu prop; see the source declaration for details.
collapseLabelstring | undefinedDefault: "Collapse sidebar"
Public Pimolu prop; see the source declaration for details.
expandLabelstring | undefinedDefault: "Expand sidebar"
Public Pimolu prop; see the source declaration for details.
childrenRequiredReactNodeNo default extracted.
Public Pimolu prop; see the source declaration for details.
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
onChangeChangeEventHandler<HTMLElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLElement> | undefinedNo default extracted.
Standard React/HTML attribute.
PimoluSidebarHeaderProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
childrenRequired | ReactNode | — | Public Pimolu prop; see the source declaration for details. |
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
onChange | ChangeEventHandler<HTMLDivElement, Element> | undefined | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLDivElement> | undefined | — | Standard React/HTML attribute. |
childrenRequiredReactNodeNo default extracted.
Public Pimolu prop; see the source declaration for details.
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
onChangeChangeEventHandler<HTMLDivElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLDivElement> | undefinedNo default extracted.
Standard React/HTML attribute.
PimoluSidebarContentProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
aria-label | string | undefined | — | Defines a string value that labels the current element. |
childrenRequired | ReactNode | — | Public Pimolu prop; see the source declaration for details. |
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
onChange | ChangeEventHandler<HTMLElement, Element> | undefined | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLElement> | undefined | — | Standard React/HTML attribute. |
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
childrenRequiredReactNodeNo default extracted.
Public Pimolu prop; see the source declaration for details.
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
onChangeChangeEventHandler<HTMLElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLElement> | undefinedNo default extracted.
Standard React/HTML attribute.
PimoluSidebarGroupProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
childrenRequired | ReactNode | — | Public Pimolu prop; see the source declaration for details. |
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
onChange | ChangeEventHandler<HTMLDivElement, Element> | undefined | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLDivElement> | undefined | — | Standard React/HTML attribute. |
childrenRequiredReactNodeNo default extracted.
Public Pimolu prop; see the source declaration for details.
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
onChangeChangeEventHandler<HTMLDivElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLDivElement> | undefinedNo default extracted.
Standard React/HTML attribute.
PimoluSidebarGroupLabelProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
childrenRequired | ReactNode | — | Public Pimolu prop; see the source declaration for details. |
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
onChange | ChangeEventHandler<HTMLSpanElement, Element> | undefined | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLSpanElement> | undefined | — | Standard React/HTML attribute. |
childrenRequiredReactNodeNo default extracted.
Public Pimolu prop; see the source declaration for details.
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
onChangeChangeEventHandler<HTMLSpanElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLSpanElement> | undefinedNo default extracted.
Standard React/HTML attribute.
PimoluSidebarItemProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
active | boolean | undefined | false | Public Pimolu prop; see the source declaration for details. |
disabled | boolean | undefined | false | Public Pimolu prop; see the source declaration for details. |
icon | ReactNode | — | Decorative icon shown before the label. |
childrenRequired | ReactNode | — | Public Pimolu prop; see the source declaration for details. |
type | string | undefined | — | Standard React/HTML attribute. |
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
onChange | ChangeEventHandler<HTMLAnchorElement, Element> | undefined | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLAnchorElement> | undefined | — | Standard React/HTML attribute. |
activeboolean | undefinedDefault: false
Public Pimolu prop; see the source declaration for details.
disabledboolean | undefinedDefault: false
Public Pimolu prop; see the source declaration for details.
iconReactNodeNo default extracted.
Decorative icon shown before the label.
childrenRequiredReactNodeNo default extracted.
Public Pimolu prop; see the source declaration for details.
typestring | undefinedNo default extracted.
Standard React/HTML attribute.
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
onChangeChangeEventHandler<HTMLAnchorElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLAnchorElement> | undefinedNo default extracted.
Standard React/HTML attribute.
PimoluSidebarFooterProps
Type source| Name | Type | Default | Description |
|---|---|---|---|
childrenRequired | ReactNode | — | Public Pimolu prop; see the source declaration for details. |
defaultValue | string | number | readonly string[] | undefined | — | Standard React/HTML attribute. |
className | string | undefined | — | Standard React/HTML attribute. |
style | CSSProperties | undefined | — | Standard React/HTML attribute. |
aria-label | string | undefined | — | Defines a string value that labels the current element. |
onChange | ChangeEventHandler<HTMLDivElement, Element> | undefined | — | Standard React/HTML attribute. |
onClick | MouseEventHandler<HTMLDivElement> | undefined | — | Standard React/HTML attribute. |
childrenRequiredReactNodeNo default extracted.
Public Pimolu prop; see the source declaration for details.
defaultValuestring | number | readonly string[] | undefinedNo default extracted.
Standard React/HTML attribute.
classNamestring | undefinedNo default extracted.
Standard React/HTML attribute.
styleCSSProperties | undefinedNo default extracted.
Standard React/HTML attribute.
aria-labelstring | undefinedNo default extracted.
Defines a string value that labels the current element.
onChangeChangeEventHandler<HTMLDivElement, Element> | undefinedNo default extracted.
Standard React/HTML attribute.
onClickMouseEventHandler<HTMLDivElement> | undefinedNo default extracted.
Standard React/HTML attribute.
Accessibility
- Name SidebarContent and keep visible labels for expanded navigation.
- Test collapse/expand with the keyboard. Icons supplement link names; they do not replace accessible text.