# 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: - `` for an optional header. - `` for your company, product, or project name. - `` for a full-height and lightweight navigation, including nested groups. - `` for an optional footer. - `` 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. ```html import React, { useState } from 'react' import { CAvatar, CBadge, CDropdown, CDropdownDivider, CDropdownItem, CDropdownMenu, CDropdownToggle, CSidebar, CSidebarBrand, CSidebarFooter, CSidebarHeader, CSidebarNav, CNavGroup, CNavItem, CNavTitle, CButton, } from '@coreui/react' import CIcon from '@coreui/icons-react' import { cilAccountLogout, cilCloudDownload, cilCreditCard, cilMinus, cilOptions, cilPlus, cilPuzzle, cilSettings, cilSidebarClose, cilSidebarOpen, cilSpeedometer, cilUser, } from '@coreui/icons' export const SidebarExample = () => { const [unfoldable, setUnfoldable] = useState(false) return ( setUnfoldable(!unfoldable)} > Nav Title Nav item Nav item With badge{' '} NEW ( <> Items group )} compact visible > Item Item ( <> {' '} Items group 2 )} visible > Item Item ( <> {' '} Items group 3 )} > Item Item ( <> Settings group )} > Item Item ( <> {' '} Nested group )} > Item Item Download CoreUI
Lena Scaffold
lena@acme.com
Lena Scaffold
lena@acme.com
Account
Billing
Settings
Logout
) } ``` ### 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. ```html import React from 'react' import { CSidebar, CSidebarBrand, CSidebarHeader, CSidebarNav, CNavItem, CTooltip, } from '@coreui/react' import CIcon from '@coreui/icons-react' import { cilCart, cilCloudDownload, cilSpeedometer } from '@coreui/icons' export const SidebarNarrowExample = () => { return ( ) } ``` ### 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. ```html import React from 'react' import { CBadge, CSidebar, CSidebarBrand, CSidebarHeader, CSidebarNav, CNavGroup, CNavItem, CNavTitle, } from '@coreui/react' import CIcon from '@coreui/icons-react' import { cilCloudDownload, cilLayers, cilPuzzle, cilSpeedometer } from '@coreui/icons' export const SidebarUnfoldableExample = () => { return ( Nav Title Nav item With badge{' '} NEW Items group } visible > {' '} Items group item {' '} Items group item Download CoreUI Try CoreUI PRO ) } ``` ### 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`: - `` for section headings. - `` for each navigation entry. - `` for standalone navigation links. - `CIcon` with `customClassName="nav-icon"` for optional leading icons. - `` or utility classes such as `ms-auto` for trailing metadata. ### Navigation groups Use `` 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. ```html import React from 'react' import { CSidebar, CSidebarNav, CNavGroup, CNavItem, CNavTitle } from '@coreui/react' import CIcon from '@coreui/icons-react' import { cilLayers, cilPuzzle, cilSpeedometer } from '@coreui/icons' export const SidebarCompactExample = () => { return ( Compact nav Dashboard Components Nested group } visible > Compact item Compact item ) } ``` ### 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. ```html import React from 'react' import { CSidebar, CSidebarNav, CNavGroup, CNavItem } from '@coreui/react' import CIcon from '@coreui/icons-react' import { cilFolder } from '@coreui/icons' export const SidebarTreeExample = () => { return ( Parent item } visible > {' '} Child item {' '} Nested group } visible > {' '} Nested child {' '} Nested child ) } ``` ### Group indicator By default, `CNavGroup` renders the standard group indicator through the `.nav-group-toggle` styles, so no additional markup is required. ```html import React from 'react' import { CSidebar, CSidebarNav, CNavGroup, CNavItem } from '@coreui/react' import CIcon from '@coreui/icons-react' import { cilPuzzle } from '@coreui/icons' export const SidebarGroupIndicatorExample = () => { return ( Items group } visible > Items group item Items group item ) } ``` ### 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. ```html import React from 'react' import { CSidebar, CSidebarNav, CNavGroup, CNavItem } from '@coreui/react' import CIcon from '@coreui/icons-react' import { cilChevronCircleDownAlt, cilChevronCircleUpAlt, cilMinus, cilPlus, cilPuzzle, } from '@coreui/icons' export const SidebarCustomIndicatorExample = () => { return ( ( <> Items group )} visible > Items group item Items group item ( <> Alternate indicator )} > Items group item Items group item ) } ``` ### Controlled navigation group _Added in 5.12.0._ `CNavGroup` works uncontrolled by default—clicking the toggler expands and collapses it. To control it from the parent, set `visible` and handle `onVisibleChange`. In controlled mode the toggler only requests a change through `onVisibleChange`; the group follows the `visible` prop, so the parent has the final say. This makes it possible to keep a section open even when the user clicks to collapse it—useful for a route-aware sidebar that must keep the active section expanded. Toggle the lock and try to collapse the group: while locked, the parent rejects the change and the group stays open. ```html import React, { useState } from 'react' import { CButton, CNavGroup, CNavItem, CSidebar, CSidebarFooter, CSidebarNav } from '@coreui/react' import CIcon from '@coreui/icons-react' import { cilCloudDownload, cilLayers, cilPuzzle, cilSettings, cilSpeedometer } from '@coreui/icons' export const SidebarControlledGroupExample = () => { const [visible, setVisible] = useState(true) const [locked, setLocked] = useState(true) const handleVisibleChange = (value: boolean) => { if (!value && locked) { return } setVisible(value) } return ( Dashboard Active section } visible={visible} > Overview Settings Components } > Base Buttons {' '} Forms } > Inputs Selects Settings } > Profile Security Download CoreUI setLocked(!locked)}> {locked ? 'Unlock collapsing' : 'Lock the active section open'} ) } ``` ## Dark sidebar Change the appearance of sidebars with `colorScheme="dark"`. ```html import React from 'react' import { CBadge, CSidebar, CSidebarBrand, CSidebarHeader, CSidebarNav, CNavGroup, CNavItem, CNavTitle, } from '@coreui/react' import CIcon from '@coreui/icons-react' import { cilCloudDownload, cilLayers, cilPuzzle, cilSpeedometer } from '@coreui/icons' export const SidebarDarkExample = () => { return ( Nav Title Nav item With badge{' '} NEW Nav dropdown } > {' '} Nav dropdown item {' '} Nav dropdown item Download CoreUI Try CoreUI PRO ) } ``` ## 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 />](./api/#csidebar) - [<CSidebarBrand />](./api/#csidebarbrand) - [<CSidebarFooter />](./api/#csidebarfooter) - [<CSidebarHeader />](./api/#csidebarheader) - [<CSidebarNav />](./api/#csidebarnav) - [<CSidebarToggler />](./api/#csidebartoggler)