SideNav

Importing

import { SideNav, SideNavGroup } from '@customerio/pluma-components/react';

Usage

SideNav is a vertical navigation component that contains NavItem, optionally wrapped in groups. The SideNav can be collapsed and expanded.

Default Collapsed State

Use defaultIsCollapsed to render the side navigation in a collapsed state initially. The user can still expand and collapse it using the toggle button.

Controlled Collapse State

For full control over the collapse state, use isCollapsed together with onCollapseChange.

Not Collapsible

Set isCollapsible to false to hide the collapse/expand toggle button.

Groups

Use SideNavGroup to organize nav items into labeled sections. The title prop is optional — groups without a title still provide visual spacing between sections. Use isTitleVisible when a titled group needs to remain mounted while its items animate in or out, but its title should collapse.

Provider

SideNavProvider manages the side navigation's collapse state at the top of your layout, making it accessible to any nested component via context. This is useful when components outside the SideNav itself need to read or control the collapse state.

When a SideNav is rendered inside a SideNavProvider, it automatically inherits the provider's state instead of managing its own.

The provider accepts the same state props as SideNav: isCollapsed, onCollapseChange, defaultIsCollapsed, and isCollapsible.

import {
  SideNavProvider,
  useSideNavState,
  useSetSideNavState,
  useToggleSideNav,
} from '@customerio/pluma-components/react';

Usage

In this example, the SideNavProvider wraps the entire layout. A button in the main content area uses useToggleSideNav to control the side navigation without needing direct access to the SideNav component.