React Sidebar Component

How it works#

Here's what you need to know before getting started with the React Sidebar component:

• CSidebar renders the .sidebar container.
• On mobile devices, the sidebar is hidden by default. Control it with the visible prop.
• On desktop devices, the sidebar is shown by default. Hide it with visible={false}.
• Use narrow to switch the sidebar to the narrow variant.
• Use unfoldable to switch the sidebar to the narrow-unfoldable variant.
• CSidebarNav renders .sidebar-nav and supports nested groups through CNavGroup.
• For accessibility, prefer semantic elements such as nav, or add role="navigation" when using as="div" on CSidebarNav.

Supported content#

Sidebar comes with built-in support for a handful of sub-components. Choose from the following as needed:

• <CSidebarHeader> for an optional header.
• <CSidebarBrand> for your company, product, or project name.
• <CSidebarNav> for a full-height and lightweight navigation, including nested groups.
• <CSidebarFooter> for an optional footer.
• <CSidebarToggler> for toggling the sidebar state.

Examples#

Below is a more complete sidebar example shown by default on desktop devices. It combines several optional features in a single demo, including narrow visibility helpers, tree navigation, nested groups, a custom group indicator, badges, and a footer dropdown.

Narrow sidebar#

Add the narrow prop to make the sidebar narrow.

Use .d-sidebar-narrow to show content only in the narrow state and .d-sidebar-narrow-none to hide content in the narrow state. These utility classes replace older brand-specific visibility helpers.

Unfoldable sidebar#

Add the unfoldable prop to make the sidebar narrow and expand it on hover.

Use .d-sidebar-narrow-unfoldable and .d-sidebar-narrow-unfoldable-none to control content visibility for unfoldable sidebars.

Narrow visibility helpers#

Use the sidebar visibility helpers to swap content between regular, narrow, and narrow-unfoldable variants:

• .d-sidebar-narrow shows content only in the narrow state.
• .d-sidebar-narrow-none hides content in the narrow state.
• .d-sidebar-narrow-unfoldable shows content only when the sidebar uses the unfoldable variant.
• .d-sidebar-narrow-unfoldable-none hides content when the sidebar uses the unfoldable variant.

Navigation#

Use CSidebarNav as the main navigation container inside a sidebar. It supports plain links, section titles, nested groups, tree navigation, compact navigation, and custom group indicators.

Basic navigation#

Use the following building blocks inside CSidebarNav:

• <CNavTitle> for section headings.
• <CNavItem> for each navigation entry.
• <CNavLink> for standalone navigation links.
• CIcon with customClassName="nav-icon" for optional leading icons.
• <CBadge> or utility classes such as ms-auto for trailing metadata.

Navigation groups#

Use <CNavGroup> for expandable navigation sections. The toggler prop defines the clickable label, and nested CNavItem or CNavGroup components become the group content.

Set visible on CNavGroup when the group should be expanded by default.

Use the compact prop on CNavGroup to reduce spacing only for that nested group.

Compact navigation#

Add the compact prop to CSidebarNav to reduce the vertical padding across the entire navigation.

Use the compact prop on CNavGroup to compact only a nested section.

Tree navigation#

Add variant="tree" to CSidebarNav to render nested groups as a tree. Nested groups automatically keep their hierarchy, making deeper navigation levels easier to scan.

Group indicator#

By default, CNavGroup renders the standard group indicator through the .nav-group-toggle styles, so no additional markup is required.

Custom group indicator#

To replace the default indicator, pass custom indicator markup inside the toggler prop using a .nav-group-toggle-indicator element. The toggler prop can also be a render function, which receives { visible } so you can swap icons yourself.

Use .show and .hide classes inside .nav-group-toggle-indicator to control which icon is visible when the group is expanded or collapsed, or render a single icon conditionally from the visible state.

Dark sidebar#

Change the appearance of sidebars with colorScheme="dark".

Placement#

By default, placement for sidebar components is on the left side of the viewport, but you can change it with the placement prop:

• placement="start" places the sidebar on the left side of the viewport.
• placement="end" places the sidebar on the right side of the viewport.

API#

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

• <CSidebar />
• <CSidebarBrand />
• <CSidebarFooter />
• <CSidebarHeader />
• <CSidebarNav />
• <CSidebarToggler />