CleenUI · Navigation · Sidebar

Sidebar

Collapsible side navigation with nested sections, active-state tracking, and overflow scroll.

storybook.cleenui.com · navigation-sidebar--controlled
Open in new window

About Sidebar

Sidebar is the primary nav-rail primitive. Configure section groups, items within each section, and the component handles collapsed/expanded states, nested-item indentation, and active-route highlighting via React Router.

The rail can collapse to icons-only on demand or via a media query for narrow screens. Section headings stick to the top of the visible area when scrolled past.

When to use it

  • Admin application primary navigation.
  • Documentation site sidebars with nested chapters.
  • Settings panel navigation.
  • Dashboard module switchers.

Common props

Prop
Type
Description
sections
Section[]
Section groups with items inside each.
collapsed
boolean
Render in collapsed (icons-only) mode.
onCollapseChange
(collapsed: boolean) => void
Fires on collapse toggle.
activeRoute
string
Currently active route for highlighting.
footer
ReactNode
Optional footer content.
⚡ Already in an AI editor?

Set up CleenUI in your tool.

Skip the manual import — ask your AI agent to build with this component. The Builder skill knows its props, variants, and idioms.

Live demo

See CleenUI running before you talk to us.

Configure a demo environment in about twenty seconds — theme, spacing, the modules you care about, sample data for your industry — then launch the full dashboard in your browser. Nothing to install, no signup.

  • 20 sec setup
  • 15 themes
  • 20 modules
  • 80 industries
Pick a theme to start with