Available in Other JavaScript Frameworks
CoreUI React Sidebar Component is also available for Angular, Bootstrap, and Vue. Explore framework-specific implementations below:
On this page
How it works
Here’s what you need to know before getting started with the React Sidebar component:
CSidebarrenders the.sidebarcontainer.- On mobile devices, the sidebar is hidden by default. Control it with the
showprop. - On desktop devices, the sidebar is shown by default. Hide it with
show={false}— see Controlled and uncontrolled. - Use
narrowto switch the sidebar to the narrow variant. - Use
unfoldableto switch the sidebar to the narrow-unfoldable variant. CSidebarNavrenders.sidebar-navand supports nested groups throughCNavGroup.- For accessibility, prefer semantic elements such as
nav, or addrole="navigation"when usingas="div"onCSidebarNav.
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 menu.
import React, { useState } from 'react'
import {
CAvatar,
CBadge,
CMenu,
CMenuContent,
CMenuDivider,
CMenuItem,
CMenuText,
CMenuToggle,
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 (
<CSidebar className="border-end h-100" unfoldable={unfoldable}>
<CSidebarHeader className="position-relative">
<CSidebarBrand>
<svg
role="img"
aria-label="CoreUI Logo Full"
className="d-sidebar-narrow-none"
width="88"
height="32"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 312 115"
>
<g style={{ fill: 'currentColor' }}>
<path d="M96 24.124 57 1.608a12 12 0 0 0-12 0L6 24.124a12.034 12.034 0 0 0-6 10.393V79.55a12.033 12.033 0 0 0 6 10.392l39 22.517a12 12 0 0 0 12 0l39-22.517a12.033 12.033 0 0 0 6-10.392V34.517a12.034 12.034 0 0 0-6-10.393ZM94 79.55a4 4 0 0 1-2 3.464l-39 22.517a4 4 0 0 1-4 0L10 83.014a4 4 0 0 1-2-3.464V34.517a4 4 0 0 1 2-3.464L49 8.536a4 4 0 0 1 4 0l39 22.517a4 4 0 0 1 2 3.464V79.55Z"></path>
<path d="M74.022 70.071h-2.866a4 4 0 0 0-1.925.494L51.95 80.05 32 68.531V45.554l19.95-11.519 17.29 9.455a4 4 0 0 0 1.919.49h2.863a2 2 0 0 0 2-2v-2.71a2 2 0 0 0-1.04-1.756L55.793 27.02a8.04 8.04 0 0 0-7.843.09L28 38.626a8.025 8.025 0 0 0-4 6.929V68.53a8 8 0 0 0 4 6.928l19.95 11.519a8.043 8.043 0 0 0 7.843.088l19.19-10.532a2 2 0 0 0 1.038-1.753v-2.71a2 2 0 0 0-2-2Z"></path>
<g transform="translate(118 33)">
<path d="M50.745.428c-8.28.01-14.99 6.72-15 15v17.277c0 8.285 6.715 15 15 15 8.284 0 15-6.715 15-15V15.428c-.01-8.28-6.72-14.99-15-15Zm7 32.277a7 7 0 0 1-14 0V15.428a7 7 0 0 1 14 0v17.277ZM14.079 8.488a7.01 7.01 0 0 1 7.868 6.075.99.99 0 0 0 .984.865h6.03a1.01 1.01 0 0 0 1-1.097C29.354 6.206 22.38.046 14.243.447 6.161 1-.086 7.762 0 15.864V32.27c-.087 8.101 6.161 14.864 14.244 15.416 8.137.401 15.11-5.759 15.716-13.883a1.01 1.01 0 0 0-.999-1.098h-6.03a.99.99 0 0 0-.985.865 7.01 7.01 0 0 1-7.868 6.076A7.164 7.164 0 0 1 8 32.461V15.672a7.164 7.164 0 0 1 6.079-7.184ZM96.922 27.994a12.158 12.158 0 0 0 7.184-11.077v-3.7c0-6.71-5.44-12.15-12.149-12.15H75a1 1 0 0 0-1 1v44a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-17h6.621l7.916 17.413a1 1 0 0 0 .91.587h6.591a1 1 0 0 0 .91-1.414l-8.026-17.659Zm-.816-11.077a4.154 4.154 0 0 1-4.148 4.15h-9.852v-12h9.852a4.154 4.154 0 0 1 4.148 4.15v3.7ZM139 1.067h-26a1 1 0 0 0-1 1v44a1 1 0 0 0 1 1h26a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-19v-12h13a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-13v-10h19a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1ZM177 1.067h-6a1 1 0 0 0-1 1v22.647a7.007 7.007 0 1 1-14 0V2.067a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v22.647a15.003 15.003 0 1 0 30 0V2.067a1 1 0 0 0-1-1Z"></path>
<rect width="8" height="38" x="186" y="1.067" rx="1"></rect>
</g>
</g>
</svg>
<svg
role="img"
aria-label="CoreUI Logo Signet"
className="d-sidebar-narrow"
width="88"
height="32"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 102 115"
>
<g style={{ fill: 'currentColor' }}>
<path d="M96 24.124 57 1.608a12 12 0 0 0-12 0L6 24.124a12.034 12.034 0 0 0-6 10.393V79.55a12.033 12.033 0 0 0 6 10.392l39 22.517a12 12 0 0 0 12 0l39-22.517a12.033 12.033 0 0 0 6-10.392V34.517a12.034 12.034 0 0 0-6-10.393ZM94 79.55a4 4 0 0 1-2 3.464l-39 22.517a4 4 0 0 1-4 0L10 83.014a4 4 0 0 1-2-3.464V34.517a4 4 0 0 1 2-3.464L49 8.536a4 4 0 0 1 4 0l39 22.517a4 4 0 0 1 2 3.464V79.55Z"></path>
<path d="M74.022 70.071h-2.866a4 4 0 0 0-1.925.494L51.95 80.05 32 68.531V45.554l19.95-11.519 17.29 9.455a4 4 0 0 0 1.919.49h2.863a2 2 0 0 0 2-2v-2.71a2 2 0 0 0-1.04-1.756L55.793 27.02a8.04 8.04 0 0 0-7.843.09L28 38.626a8.025 8.025 0 0 0-4 6.929V68.53a8 8 0 0 0 4 6.928l19.95 11.519a8.043 8.043 0 0 0 7.843.088l19.19-10.532a2 2 0 0 0 1.038-1.753v-2.71a2 2 0 0 0-2-2Z"></path>
</g>
</svg>
</CSidebarBrand>
<CButton
className="d-flex d-sidebar-narrow-none"
size="sm"
variant="ghost"
onClick={() => setUnfoldable(!unfoldable)}
>
<CIcon className="icon icon-lg d-sidebar-narrow-unfoldable" icon={cilSidebarOpen} />
<CIcon className="icon icon-lg d-sidebar-narrow-unfoldable-none" icon={cilSidebarClose} />
</CButton>
</CSidebarHeader>
<CSidebarNav variant="tree">
<CNavTitle>Nav Title</CNavTitle>
<CNavItem href="#">
<CIcon customClassName="nav-icon" icon={cilSpeedometer} /> Nav item
</CNavItem>
<CNavItem disabled href="#">
<CIcon customClassName="nav-icon" icon={cilSpeedometer} /> Nav item
</CNavItem>
<CNavItem href="#">
<CIcon customClassName="nav-icon" icon={cilSpeedometer} /> With badge{' '}
<CBadge theme="primary" className="ms-auto">
NEW
</CBadge>
</CNavItem>
<CNavGroup
toggler={({ visible }) => (
<>
<CIcon customClassName="nav-icon" icon={cilPuzzle} /> Items group
<span className="nav-group-toggle-indicator">
<CIcon className="icon icon-sm" icon={visible ? cilMinus : cilPlus} />
</span>
</>
)}
compact
defaultShow
>
<CNavItem href="#">Item</CNavItem>
<CNavItem href="#">Item</CNavItem>
<CNavGroup
toggler={({ visible }) => (
<>
<span className="nav-icon">
<span className="nav-icon-bullet"></span>
</span>{' '}
Items group 2
<span className="nav-group-toggle-indicator">
<CIcon className="icon icon-sm" icon={visible ? cilMinus : cilPlus} />
</span>
</>
)}
defaultShow
>
<CNavItem href="#">Item</CNavItem>
<CNavItem href="#">Item</CNavItem>
<CNavGroup
toggler={({ visible }) => (
<>
<span className="nav-icon">
<span className="nav-icon-bullet"></span>
</span>{' '}
Items group 3
<span className="nav-group-toggle-indicator">
<CIcon className="icon icon-sm" icon={visible ? cilMinus : cilPlus} />
</span>
</>
)}
>
<CNavItem href="#">Item</CNavItem>
<CNavItem href="#">Item</CNavItem>
</CNavGroup>
</CNavGroup>
</CNavGroup>
<CNavGroup
toggler={({ visible }) => (
<>
<CIcon customClassName="nav-icon" icon={cilSettings} /> Settings group
<span className="nav-group-toggle-indicator">
<CIcon className="icon icon-sm" icon={visible ? cilMinus : cilPlus} />
</span>
</>
)}
>
<CNavItem href="#">Item</CNavItem>
<CNavItem href="#">Item</CNavItem>
<CNavGroup
toggler={({ visible }) => (
<>
<span className="nav-icon">
<span className="nav-icon-bullet"></span>
</span>{' '}
Nested group
<span className="nav-group-toggle-indicator">
<CIcon className="icon icon-sm" icon={visible ? cilMinus : cilPlus} />
</span>
</>
)}
>
<CNavItem href="#">Item</CNavItem>
<CNavItem href="#">Item</CNavItem>
</CNavGroup>
</CNavGroup>
<CNavItem href="https://coreui.io">
<CIcon customClassName="nav-icon" icon={cilCloudDownload} /> Download CoreUI
</CNavItem>
</CSidebarNav>
<CSidebarFooter>
<CMenu placement="right-end">
<CMenuToggle className="w-100 d-flex gap-3 p-1 align-items-center" variant="ghost">
<CAvatar shape="rounded" size="md" src="/assets/img/avatars/7.jpg" />
<div className="small text-start d-sidebar-narrow-none">
<div className="fw-semibold">Lena Scaffold</div>
<div>[email protected]</div>
</div>
<CIcon className="nav-icon ms-auto d-sidebar-narrow-none" icon={cilOptions} />
</CMenuToggle>
<CMenuContent>
<CMenuText className="d-flex gap-3">
<CAvatar shape="rounded" size="md" src="/assets/img/avatars/7.jpg" />
<div className="small text-start">
<div className="fw-semibold">Lena Scaffold</div>
<div>[email protected]</div>
</div>
</CMenuText>
<CMenuDivider />
<CMenuItem href="#">
<CIcon className="menu-item-icon" icon={cilUser} />
Account
</CMenuItem>
<CMenuItem href="#">
<CIcon className="menu-item-icon" icon={cilCreditCard} />
Billing
</CMenuItem>
<CMenuItem href="#">
<CIcon className="menu-item-icon" icon={cilSettings} />
Settings
</CMenuItem>
<CMenuDivider />
<CMenuItem href="#">
<CIcon className="menu-item-icon" icon={cilAccountLogout} />
Logout
</CMenuItem>
</CMenuContent>
</CMenu>
</CSidebarFooter>
</CSidebar>
)
}import React, { useState } from 'react'
import {
CAvatar,
CBadge,
CMenu,
CMenuContent,
CMenuDivider,
CMenuItem,
CMenuText,
CMenuToggle,
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 (
<CSidebar className="border-end h-100" unfoldable={unfoldable}>
<CSidebarHeader className="position-relative">
<CSidebarBrand>
<svg
role="img"
aria-label="CoreUI Logo Full"
className="d-sidebar-narrow-none"
width="88"
height="32"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 312 115"
>
<g style={{ fill: 'currentColor' }}>
<path d="M96 24.124 57 1.608a12 12 0 0 0-12 0L6 24.124a12.034 12.034 0 0 0-6 10.393V79.55a12.033 12.033 0 0 0 6 10.392l39 22.517a12 12 0 0 0 12 0l39-22.517a12.033 12.033 0 0 0 6-10.392V34.517a12.034 12.034 0 0 0-6-10.393ZM94 79.55a4 4 0 0 1-2 3.464l-39 22.517a4 4 0 0 1-4 0L10 83.014a4 4 0 0 1-2-3.464V34.517a4 4 0 0 1 2-3.464L49 8.536a4 4 0 0 1 4 0l39 22.517a4 4 0 0 1 2 3.464V79.55Z"></path>
<path d="M74.022 70.071h-2.866a4 4 0 0 0-1.925.494L51.95 80.05 32 68.531V45.554l19.95-11.519 17.29 9.455a4 4 0 0 0 1.919.49h2.863a2 2 0 0 0 2-2v-2.71a2 2 0 0 0-1.04-1.756L55.793 27.02a8.04 8.04 0 0 0-7.843.09L28 38.626a8.025 8.025 0 0 0-4 6.929V68.53a8 8 0 0 0 4 6.928l19.95 11.519a8.043 8.043 0 0 0 7.843.088l19.19-10.532a2 2 0 0 0 1.038-1.753v-2.71a2 2 0 0 0-2-2Z"></path>
<g transform="translate(118 33)">
<path d="M50.745.428c-8.28.01-14.99 6.72-15 15v17.277c0 8.285 6.715 15 15 15 8.284 0 15-6.715 15-15V15.428c-.01-8.28-6.72-14.99-15-15Zm7 32.277a7 7 0 0 1-14 0V15.428a7 7 0 0 1 14 0v17.277ZM14.079 8.488a7.01 7.01 0 0 1 7.868 6.075.99.99 0 0 0 .984.865h6.03a1.01 1.01 0 0 0 1-1.097C29.354 6.206 22.38.046 14.243.447 6.161 1-.086 7.762 0 15.864V32.27c-.087 8.101 6.161 14.864 14.244 15.416 8.137.401 15.11-5.759 15.716-13.883a1.01 1.01 0 0 0-.999-1.098h-6.03a.99.99 0 0 0-.985.865 7.01 7.01 0 0 1-7.868 6.076A7.164 7.164 0 0 1 8 32.461V15.672a7.164 7.164 0 0 1 6.079-7.184ZM96.922 27.994a12.158 12.158 0 0 0 7.184-11.077v-3.7c0-6.71-5.44-12.15-12.149-12.15H75a1 1 0 0 0-1 1v44a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-17h6.621l7.916 17.413a1 1 0 0 0 .91.587h6.591a1 1 0 0 0 .91-1.414l-8.026-17.659Zm-.816-11.077a4.154 4.154 0 0 1-4.148 4.15h-9.852v-12h9.852a4.154 4.154 0 0 1 4.148 4.15v3.7ZM139 1.067h-26a1 1 0 0 0-1 1v44a1 1 0 0 0 1 1h26a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-19v-12h13a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-13v-10h19a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1ZM177 1.067h-6a1 1 0 0 0-1 1v22.647a7.007 7.007 0 1 1-14 0V2.067a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v22.647a15.003 15.003 0 1 0 30 0V2.067a1 1 0 0 0-1-1Z"></path>
<rect width="8" height="38" x="186" y="1.067" rx="1"></rect>
</g>
</g>
</svg>
<svg
role="img"
aria-label="CoreUI Logo Signet"
className="d-sidebar-narrow"
width="88"
height="32"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 102 115"
>
<g style={{ fill: 'currentColor' }}>
<path d="M96 24.124 57 1.608a12 12 0 0 0-12 0L6 24.124a12.034 12.034 0 0 0-6 10.393V79.55a12.033 12.033 0 0 0 6 10.392l39 22.517a12 12 0 0 0 12 0l39-22.517a12.033 12.033 0 0 0 6-10.392V34.517a12.034 12.034 0 0 0-6-10.393ZM94 79.55a4 4 0 0 1-2 3.464l-39 22.517a4 4 0 0 1-4 0L10 83.014a4 4 0 0 1-2-3.464V34.517a4 4 0 0 1 2-3.464L49 8.536a4 4 0 0 1 4 0l39 22.517a4 4 0 0 1 2 3.464V79.55Z"></path>
<path d="M74.022 70.071h-2.866a4 4 0 0 0-1.925.494L51.95 80.05 32 68.531V45.554l19.95-11.519 17.29 9.455a4 4 0 0 0 1.919.49h2.863a2 2 0 0 0 2-2v-2.71a2 2 0 0 0-1.04-1.756L55.793 27.02a8.04 8.04 0 0 0-7.843.09L28 38.626a8.025 8.025 0 0 0-4 6.929V68.53a8 8 0 0 0 4 6.928l19.95 11.519a8.043 8.043 0 0 0 7.843.088l19.19-10.532a2 2 0 0 0 1.038-1.753v-2.71a2 2 0 0 0-2-2Z"></path>
</g>
</svg>
</CSidebarBrand>
<CButton
className="d-flex d-sidebar-narrow-none"
size="sm"
variant="ghost"
onClick={() => setUnfoldable(!unfoldable)}
>
<CIcon className="icon icon-lg d-sidebar-narrow-unfoldable" icon={cilSidebarOpen} />
<CIcon className="icon icon-lg d-sidebar-narrow-unfoldable-none" icon={cilSidebarClose} />
</CButton>
</CSidebarHeader>
<CSidebarNav variant="tree">
<CNavTitle>Nav Title</CNavTitle>
<CNavItem href="#">
<CIcon customClassName="nav-icon" icon={cilSpeedometer} /> Nav item
</CNavItem>
<CNavItem disabled href="#">
<CIcon customClassName="nav-icon" icon={cilSpeedometer} /> Nav item
</CNavItem>
<CNavItem href="#">
<CIcon customClassName="nav-icon" icon={cilSpeedometer} /> With badge{' '}
<CBadge theme="primary" className="ms-auto">
NEW
</CBadge>
</CNavItem>
<CNavGroup
toggler={({ visible }) => (
<>
<CIcon customClassName="nav-icon" icon={cilPuzzle} /> Items group
<span className="nav-group-toggle-indicator">
<CIcon className="icon icon-sm" icon={visible ? cilMinus : cilPlus} />
</span>
</>
)}
compact
defaultShow
>
<CNavItem href="#">Item</CNavItem>
<CNavItem href="#">Item</CNavItem>
<CNavGroup
toggler={({ visible }) => (
<>
<span className="nav-icon">
<span className="nav-icon-bullet"></span>
</span>{' '}
Items group 2
<span className="nav-group-toggle-indicator">
<CIcon className="icon icon-sm" icon={visible ? cilMinus : cilPlus} />
</span>
</>
)}
defaultShow
>
<CNavItem href="#">Item</CNavItem>
<CNavItem href="#">Item</CNavItem>
<CNavGroup
toggler={({ visible }) => (
<>
<span className="nav-icon">
<span className="nav-icon-bullet"></span>
</span>{' '}
Items group 3
<span className="nav-group-toggle-indicator">
<CIcon className="icon icon-sm" icon={visible ? cilMinus : cilPlus} />
</span>
</>
)}
>
<CNavItem href="#">Item</CNavItem>
<CNavItem href="#">Item</CNavItem>
</CNavGroup>
</CNavGroup>
</CNavGroup>
<CNavGroup
toggler={({ visible }) => (
<>
<CIcon customClassName="nav-icon" icon={cilSettings} /> Settings group
<span className="nav-group-toggle-indicator">
<CIcon className="icon icon-sm" icon={visible ? cilMinus : cilPlus} />
</span>
</>
)}
>
<CNavItem href="#">Item</CNavItem>
<CNavItem href="#">Item</CNavItem>
<CNavGroup
toggler={({ visible }) => (
<>
<span className="nav-icon">
<span className="nav-icon-bullet"></span>
</span>{' '}
Nested group
<span className="nav-group-toggle-indicator">
<CIcon className="icon icon-sm" icon={visible ? cilMinus : cilPlus} />
</span>
</>
)}
>
<CNavItem href="#">Item</CNavItem>
<CNavItem href="#">Item</CNavItem>
</CNavGroup>
</CNavGroup>
<CNavItem href="https://coreui.io">
<CIcon customClassName="nav-icon" icon={cilCloudDownload} /> Download CoreUI
</CNavItem>
</CSidebarNav>
<CSidebarFooter>
<CMenu placement="right-end">
<CMenuToggle className="w-100 d-flex gap-3 p-1 align-items-center" variant="ghost">
<CAvatar shape="rounded" size="md" src="/assets/img/avatars/7.jpg" />
<div className="small text-start d-sidebar-narrow-none">
<div className="fw-semibold">Lena Scaffold</div>
<div>[email protected]</div>
</div>
<CIcon className="nav-icon ms-auto d-sidebar-narrow-none" icon={cilOptions} />
</CMenuToggle>
<CMenuContent>
<CMenuText className="d-flex gap-3">
<CAvatar shape="rounded" size="md" src="/assets/img/avatars/7.jpg" />
<div className="small text-start">
<div className="fw-semibold">Lena Scaffold</div>
<div>[email protected]</div>
</div>
</CMenuText>
<CMenuDivider />
<CMenuItem href="#">
<CIcon className="menu-item-icon" icon={cilUser} />
Account
</CMenuItem>
<CMenuItem href="#">
<CIcon className="menu-item-icon" icon={cilCreditCard} />
Billing
</CMenuItem>
<CMenuItem href="#">
<CIcon className="menu-item-icon" icon={cilSettings} />
Settings
</CMenuItem>
<CMenuDivider />
<CMenuItem href="#">
<CIcon className="menu-item-icon" icon={cilAccountLogout} />
Logout
</CMenuItem>
</CMenuContent>
</CMenu>
</CSidebarFooter>
</CSidebar>
)
}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.
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 (
<CSidebar className="border-end" narrow>
<CSidebarHeader className="border-bottom">
<CSidebarBrand>
<svg
role="img"
aria-label="CoreUI Logo Signet"
width="88"
height="32"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 102 115"
>
<g style={{ fill: 'currentColor' }}>
<path d="M96 24.124 57 1.608a12 12 0 0 0-12 0L6 24.124a12.034 12.034 0 0 0-6 10.393V79.55a12.033 12.033 0 0 0 6 10.392l39 22.517a12 12 0 0 0 12 0l39-22.517a12.033 12.033 0 0 0 6-10.392V34.517a12.034 12.034 0 0 0-6-10.393ZM94 79.55a4 4 0 0 1-2 3.464l-39 22.517a4 4 0 0 1-4 0L10 83.014a4 4 0 0 1-2-3.464V34.517a4 4 0 0 1 2-3.464L49 8.536a4 4 0 0 1 4 0l39 22.517a4 4 0 0 1 2 3.464V79.55Z"></path>
<path d="M74.022 70.071h-2.866a4 4 0 0 0-1.925.494L51.95 80.05 32 68.531V45.554l19.95-11.519 17.29 9.455a4 4 0 0 0 1.919.49h2.863a2 2 0 0 0 2-2v-2.71a2 2 0 0 0-1.04-1.756L55.793 27.02a8.04 8.04 0 0 0-7.843.09L28 38.626a8.025 8.025 0 0 0-4 6.929V68.53a8 8 0 0 0 4 6.928l19.95 11.519a8.043 8.043 0 0 0 7.843.088l19.19-10.532a2 2 0 0 0 1.038-1.753v-2.71a2 2 0 0 0-2-2Z"></path>
</g>
</svg>
</CSidebarBrand>
</CSidebarHeader>
<CSidebarNav>
<CTooltip content="Nav item" placement="right">
<CNavItem href="#">
<CIcon customClassName="nav-icon" icon={cilSpeedometer} />
</CNavItem>
</CTooltip>
<CTooltip content="Nav item" placement="right">
<CNavItem href="#">
<CIcon customClassName="nav-icon" icon={cilSpeedometer} />
</CNavItem>
</CTooltip>
<CTooltip content="Download" placement="right">
<CNavItem href="https://coreui.io">
<CIcon customClassName="nav-icon" icon={cilCloudDownload} />
</CNavItem>
</CTooltip>
<CTooltip content="Get CoreUI PRO" placement="right">
<CNavItem href="https://coreui.io/pricing/">
<CIcon customClassName="nav-icon" icon={cilCart} />
</CNavItem>
</CTooltip>
</CSidebarNav>
</CSidebar>
)
}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 (
<CSidebar className="border-end" narrow>
<CSidebarHeader className="border-bottom">
<CSidebarBrand>
<svg
role="img"
aria-label="CoreUI Logo Signet"
width="88"
height="32"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 102 115"
>
<g style={{ fill: 'currentColor' }}>
<path d="M96 24.124 57 1.608a12 12 0 0 0-12 0L6 24.124a12.034 12.034 0 0 0-6 10.393V79.55a12.033 12.033 0 0 0 6 10.392l39 22.517a12 12 0 0 0 12 0l39-22.517a12.033 12.033 0 0 0 6-10.392V34.517a12.034 12.034 0 0 0-6-10.393ZM94 79.55a4 4 0 0 1-2 3.464l-39 22.517a4 4 0 0 1-4 0L10 83.014a4 4 0 0 1-2-3.464V34.517a4 4 0 0 1 2-3.464L49 8.536a4 4 0 0 1 4 0l39 22.517a4 4 0 0 1 2 3.464V79.55Z"></path>
<path d="M74.022 70.071h-2.866a4 4 0 0 0-1.925.494L51.95 80.05 32 68.531V45.554l19.95-11.519 17.29 9.455a4 4 0 0 0 1.919.49h2.863a2 2 0 0 0 2-2v-2.71a2 2 0 0 0-1.04-1.756L55.793 27.02a8.04 8.04 0 0 0-7.843.09L28 38.626a8.025 8.025 0 0 0-4 6.929V68.53a8 8 0 0 0 4 6.928l19.95 11.519a8.043 8.043 0 0 0 7.843.088l19.19-10.532a2 2 0 0 0 1.038-1.753v-2.71a2 2 0 0 0-2-2Z"></path>
</g>
</svg>
</CSidebarBrand>
</CSidebarHeader>
<CSidebarNav>
<CTooltip content="Nav item" placement="right">
<CNavItem href="#">
<CIcon customClassName="nav-icon" icon={cilSpeedometer} />
</CNavItem>
</CTooltip>
<CTooltip content="Nav item" placement="right">
<CNavItem href="#">
<CIcon customClassName="nav-icon" icon={cilSpeedometer} />
</CNavItem>
</CTooltip>
<CTooltip content="Download" placement="right">
<CNavItem href="https://coreui.io">
<CIcon customClassName="nav-icon" icon={cilCloudDownload} />
</CNavItem>
</CTooltip>
<CTooltip content="Get CoreUI PRO" placement="right">
<CNavItem href="https://coreui.io/pricing/">
<CIcon customClassName="nav-icon" icon={cilCart} />
</CNavItem>
</CTooltip>
</CSidebarNav>
</CSidebar>
)
}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.
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 (
<CSidebar className="border-end" unfoldable>
<CSidebarHeader className="border-bottom">
<CSidebarBrand>
<svg
role="img"
aria-label="CoreUI Logo Full"
className="d-sidebar-narrow-none"
width="88"
height="32"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 312 115"
>
<g style={{ fill: 'currentColor' }}>
<path d="M96 24.124 57 1.608a12 12 0 0 0-12 0L6 24.124a12.034 12.034 0 0 0-6 10.393V79.55a12.033 12.033 0 0 0 6 10.392l39 22.517a12 12 0 0 0 12 0l39-22.517a12.033 12.033 0 0 0 6-10.392V34.517a12.034 12.034 0 0 0-6-10.393ZM94 79.55a4 4 0 0 1-2 3.464l-39 22.517a4 4 0 0 1-4 0L10 83.014a4 4 0 0 1-2-3.464V34.517a4 4 0 0 1 2-3.464L49 8.536a4 4 0 0 1 4 0l39 22.517a4 4 0 0 1 2 3.464V79.55Z"></path>
<path d="M74.022 70.071h-2.866a4 4 0 0 0-1.925.494L51.95 80.05 32 68.531V45.554l19.95-11.519 17.29 9.455a4 4 0 0 0 1.919.49h2.863a2 2 0 0 0 2-2v-2.71a2 2 0 0 0-1.04-1.756L55.793 27.02a8.04 8.04 0 0 0-7.843.09L28 38.626a8.025 8.025 0 0 0-4 6.929V68.53a8 8 0 0 0 4 6.928l19.95 11.519a8.043 8.043 0 0 0 7.843.088l19.19-10.532a2 2 0 0 0 1.038-1.753v-2.71a2 2 0 0 0-2-2Z"></path>
<g transform="translate(118 33)">
<path d="M50.745.428c-8.28.01-14.99 6.72-15 15v17.277c0 8.285 6.715 15 15 15 8.284 0 15-6.715 15-15V15.428c-.01-8.28-6.72-14.99-15-15Zm7 32.277a7 7 0 0 1-14 0V15.428a7 7 0 0 1 14 0v17.277ZM14.079 8.488a7.01 7.01 0 0 1 7.868 6.075.99.99 0 0 0 .984.865h6.03a1.01 1.01 0 0 0 1-1.097C29.354 6.206 22.38.046 14.243.447 6.161 1-.086 7.762 0 15.864V32.27c-.087 8.101 6.161 14.864 14.244 15.416 8.137.401 15.11-5.759 15.716-13.883a1.01 1.01 0 0 0-.999-1.098h-6.03a.99.99 0 0 0-.985.865 7.01 7.01 0 0 1-7.868 6.076A7.164 7.164 0 0 1 8 32.461V15.672a7.164 7.164 0 0 1 6.079-7.184ZM96.922 27.994a12.158 12.158 0 0 0 7.184-11.077v-3.7c0-6.71-5.44-12.15-12.149-12.15H75a1 1 0 0 0-1 1v44a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-17h6.621l7.916 17.413a1 1 0 0 0 .91.587h6.591a1 1 0 0 0 .91-1.414l-8.026-17.659Zm-.816-11.077a4.154 4.154 0 0 1-4.148 4.15h-9.852v-12h9.852a4.154 4 0 0 1 4.148 4.15v3.7ZM139 1.067h-26a1 1 0 0 0-1 1v44a1 1 0 0 0 1 1h26a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-19v-12h13a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-13v-10h19a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1ZM177 1.067h-6a1 1 0 0 0-1 1v22.647a7.007 7.007 0 1 1-14 0V2.067a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v22.647a15.003 15.003 0 1 0 30 0V2.067a1 1 0 0 0-1-1Z"></path>
<rect width="8" height="38" x="186" y="1.067" rx="1"></rect>
</g>
</g>
</svg>
<svg
role="img"
aria-label="CoreUI Logo Signet"
className="d-sidebar-narrow"
width="88"
height="32"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 102 115"
>
<g style={{ fill: 'currentColor' }}>
<path d="M96 24.124 57 1.608a12 12 0 0 0-12 0L6 24.124a12.034 12.034 0 0 0-6 10.393V79.55a12.033 12.033 0 0 0 6 10.392l39 22.517a12 12 0 0 0 12 0l39-22.517a12.033 12.033 0 0 0 6-10.392V34.517a12.034 12.034 0 0 0-6-10.393ZM94 79.55a4 4 0 0 1-2 3.464l-39 22.517a4 4 0 0 1-4 0L10 83.014a4 4 0 0 1-2-3.464V34.517a4 4 0 0 1 2-3.464L49 8.536a4 4 0 0 1 4 0l39 22.517a4 4 0 0 1 2 3.464V79.55Z"></path>
<path d="M74.022 70.071h-2.866a4 4 0 0 0-1.925.494L51.95 80.05 32 68.531V45.554l19.95-11.519 17.29 9.455a4 4 0 0 0 1.919.49h2.863a2 2 0 0 0 2-2v-2.71a2 2 0 0 0-1.04-1.756L55.793 27.02a8.04 8.04 0 0 0-7.843.09L28 38.626a8.025 8.025 0 0 0-4 6.929V68.53a8 8 0 0 0 4 6.928l19.95 11.519a8.043 8.043 0 0 0 7.843.088l19.19-10.532a2 2 0 0 0 1.038-1.753v-2.71a2 2 0 0 0-2-2Z"></path>
</g>
</svg>
</CSidebarBrand>
</CSidebarHeader>
<CSidebarNav>
<CNavTitle>Nav Title</CNavTitle>
<CNavItem href="#">
<CIcon customClassName="nav-icon" icon={cilSpeedometer} /> Nav item
</CNavItem>
<CNavItem href="#">
<CIcon customClassName="nav-icon" icon={cilSpeedometer} /> With badge{' '}
<CBadge theme="primary" className="ms-auto">
NEW
</CBadge>
</CNavItem>
<CNavGroup
toggler={
<>
<CIcon customClassName="nav-icon" icon={cilPuzzle} /> Items group
</>
}
defaultShow
>
<CNavItem href="#">
<span className="nav-icon">
<span className="nav-icon-bullet"></span>
</span>{' '}
Items group item
</CNavItem>
<CNavItem href="#">
<span className="nav-icon">
<span className="nav-icon-bullet"></span>
</span>{' '}
Items group item
</CNavItem>
</CNavGroup>
<CNavItem className="mt-auto" href="https://coreui.io">
<CIcon customClassName="nav-icon" icon={cilCloudDownload} /> Download CoreUI
</CNavItem>
<CNavItem href="https://coreui.io/pricing/">
<CIcon customClassName="nav-icon" icon={cilLayers} /> Try CoreUI <strong>PRO</strong>
</CNavItem>
</CSidebarNav>
</CSidebar>
)
}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 (
<CSidebar className="border-end" unfoldable>
<CSidebarHeader className="border-bottom">
<CSidebarBrand>
<svg
role="img"
aria-label="CoreUI Logo Full"
className="d-sidebar-narrow-none"
width="88"
height="32"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 312 115"
>
<g style={{ fill: 'currentColor' }}>
<path d="M96 24.124 57 1.608a12 12 0 0 0-12 0L6 24.124a12.034 12.034 0 0 0-6 10.393V79.55a12.033 12.033 0 0 0 6 10.392l39 22.517a12 12 0 0 0 12 0l39-22.517a12.033 12.033 0 0 0 6-10.392V34.517a12.034 12.034 0 0 0-6-10.393ZM94 79.55a4 4 0 0 1-2 3.464l-39 22.517a4 4 0 0 1-4 0L10 83.014a4 4 0 0 1-2-3.464V34.517a4 4 0 0 1 2-3.464L49 8.536a4 4 0 0 1 4 0l39 22.517a4 4 0 0 1 2 3.464V79.55Z"></path>
<path d="M74.022 70.071h-2.866a4 4 0 0 0-1.925.494L51.95 80.05 32 68.531V45.554l19.95-11.519 17.29 9.455a4 4 0 0 0 1.919.49h2.863a2 2 0 0 0 2-2v-2.71a2 2 0 0 0-1.04-1.756L55.793 27.02a8.04 8.04 0 0 0-7.843.09L28 38.626a8.025 8.025 0 0 0-4 6.929V68.53a8 8 0 0 0 4 6.928l19.95 11.519a8.043 8.043 0 0 0 7.843.088l19.19-10.532a2 2 0 0 0 1.038-1.753v-2.71a2 2 0 0 0-2-2Z"></path>
<g transform="translate(118 33)">
<path d="M50.745.428c-8.28.01-14.99 6.72-15 15v17.277c0 8.285 6.715 15 15 15 8.284 0 15-6.715 15-15V15.428c-.01-8.28-6.72-14.99-15-15Zm7 32.277a7 7 0 0 1-14 0V15.428a7 7 0 0 1 14 0v17.277ZM14.079 8.488a7.01 7.01 0 0 1 7.868 6.075.99.99 0 0 0 .984.865h6.03a1.01 1.01 0 0 0 1-1.097C29.354 6.206 22.38.046 14.243.447 6.161 1-.086 7.762 0 15.864V32.27c-.087 8.101 6.161 14.864 14.244 15.416 8.137.401 15.11-5.759 15.716-13.883a1.01 1.01 0 0 0-.999-1.098h-6.03a.99.99 0 0 0-.985.865 7.01 7.01 0 0 1-7.868 6.076A7.164 7.164 0 0 1 8 32.461V15.672a7.164 7.164 0 0 1 6.079-7.184ZM96.922 27.994a12.158 12.158 0 0 0 7.184-11.077v-3.7c0-6.71-5.44-12.15-12.149-12.15H75a1 1 0 0 0-1 1v44a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-17h6.621l7.916 17.413a1 1 0 0 0 .91.587h6.591a1 1 0 0 0 .91-1.414l-8.026-17.659Zm-.816-11.077a4.154 4.154 0 0 1-4.148 4.15h-9.852v-12h9.852a4.154 4 0 0 1 4.148 4.15v3.7ZM139 1.067h-26a1 1 0 0 0-1 1v44a1 1 0 0 0 1 1h26a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-19v-12h13a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-13v-10h19a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1ZM177 1.067h-6a1 1 0 0 0-1 1v22.647a7.007 7.007 0 1 1-14 0V2.067a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v22.647a15.003 15.003 0 1 0 30 0V2.067a1 1 0 0 0-1-1Z"></path>
<rect width="8" height="38" x="186" y="1.067" rx="1"></rect>
</g>
</g>
</svg>
<svg
role="img"
aria-label="CoreUI Logo Signet"
className="d-sidebar-narrow"
width="88"
height="32"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 102 115"
>
<g style={{ fill: 'currentColor' }}>
<path d="M96 24.124 57 1.608a12 12 0 0 0-12 0L6 24.124a12.034 12.034 0 0 0-6 10.393V79.55a12.033 12.033 0 0 0 6 10.392l39 22.517a12 12 0 0 0 12 0l39-22.517a12.033 12.033 0 0 0 6-10.392V34.517a12.034 12.034 0 0 0-6-10.393ZM94 79.55a4 4 0 0 1-2 3.464l-39 22.517a4 4 0 0 1-4 0L10 83.014a4 4 0 0 1-2-3.464V34.517a4 4 0 0 1 2-3.464L49 8.536a4 4 0 0 1 4 0l39 22.517a4 4 0 0 1 2 3.464V79.55Z"></path>
<path d="M74.022 70.071h-2.866a4 4 0 0 0-1.925.494L51.95 80.05 32 68.531V45.554l19.95-11.519 17.29 9.455a4 4 0 0 0 1.919.49h2.863a2 2 0 0 0 2-2v-2.71a2 2 0 0 0-1.04-1.756L55.793 27.02a8.04 8.04 0 0 0-7.843.09L28 38.626a8.025 8.025 0 0 0-4 6.929V68.53a8 8 0 0 0 4 6.928l19.95 11.519a8.043 8.043 0 0 0 7.843.088l19.19-10.532a2 2 0 0 0 1.038-1.753v-2.71a2 2 0 0 0-2-2Z"></path>
</g>
</svg>
</CSidebarBrand>
</CSidebarHeader>
<CSidebarNav>
<CNavTitle>Nav Title</CNavTitle>
<CNavItem href="#">
<CIcon customClassName="nav-icon" icon={cilSpeedometer} /> Nav item
</CNavItem>
<CNavItem href="#">
<CIcon customClassName="nav-icon" icon={cilSpeedometer} /> With badge{' '}
<CBadge theme="primary" className="ms-auto">
NEW
</CBadge>
</CNavItem>
<CNavGroup
toggler={
<>
<CIcon customClassName="nav-icon" icon={cilPuzzle} /> Items group
</>
}
defaultShow
>
<CNavItem href="#">
<span className="nav-icon">
<span className="nav-icon-bullet"></span>
</span>{' '}
Items group item
</CNavItem>
<CNavItem href="#">
<span className="nav-icon">
<span className="nav-icon-bullet"></span>
</span>{' '}
Items group item
</CNavItem>
</CNavGroup>
<CNavItem className="mt-auto" href="https://coreui.io">
<CIcon customClassName="nav-icon" icon={cilCloudDownload} /> Download CoreUI
</CNavItem>
<CNavItem href="https://coreui.io/pricing/">
<CIcon customClassName="nav-icon" icon={cilLayers} /> Try CoreUI <strong>PRO</strong>
</CNavItem>
</CSidebarNav>
</CSidebar>
)
}Narrow visibility helpers
Use the sidebar visibility helpers to swap content between regular, narrow, and narrow-unfoldable variants:
.d-sidebar-narrowshows content only in the narrow state..d-sidebar-narrow-nonehides content in the narrow state..d-sidebar-narrow-unfoldableshows content only when the sidebar uses the unfoldable variant..d-sidebar-narrow-unfoldable-nonehides content when the sidebar uses the unfoldable variant.
Sizes
The default width is --cui-sidebar-width. Set size="sm", size="lg" or size="xl" for the other widths from the $sidebar-widths map; each size also sets the space the sidebar reserves for the content next to it, so the layout follows the width.
import React from 'react'
import { CSidebar, CSidebarNav, CNavItem } from '@coreui/react'
import CIcon from '@coreui/icons-react'
import { cilPuzzle, cilSpeedometer } from '@coreui/icons'
export const SidebarSizeExample = () => {
return (
<CSidebar className="border-end" size="lg">
<CSidebarNav>
<CNavItem active href="#">
<CIcon customClassName="nav-icon" icon={cilSpeedometer} /> Dashboard
</CNavItem>
<CNavItem href="#">
<CIcon customClassName="nav-icon" icon={cilPuzzle} /> Components
</CNavItem>
</CSidebarNav>
</CSidebar>
)
}import React from 'react'
import { CSidebar, CSidebarNav, CNavItem } from '@coreui/react'
import CIcon from '@coreui/icons-react'
import { cilPuzzle, cilSpeedometer } from '@coreui/icons'
export const SidebarSizeExample = () => {
return (
<CSidebar className="border-end" size="lg">
<CSidebarNav>
<CNavItem active href="#">
<CIcon customClassName="nav-icon" icon={cilSpeedometer} /> Dashboard
</CNavItem>
<CNavItem href="#">
<CIcon customClassName="nav-icon" icon={cilPuzzle} /> Components
</CNavItem>
</CSidebarNav>
</CSidebar>
)
}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.CIconwithcustomClassName="nav-icon"for optional leading icons.<CBadge>or utility classes such asms-autofor 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 defaultShow on CNavGroup when the group should be expanded by default; show is the controlled form — see Controlled and uncontrolled groups.
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.
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 (
<CSidebar className="border-end">
<CSidebarNav compact>
<CNavTitle>Compact nav</CNavTitle>
<CNavItem href="#">
<CIcon customClassName="nav-icon" icon={cilSpeedometer} /> Dashboard
</CNavItem>
<CNavItem href="#">
<CIcon customClassName="nav-icon" icon={cilLayers} /> Components
</CNavItem>
<CNavGroup
toggler={
<>
<CIcon customClassName="nav-icon" icon={cilPuzzle} /> Nested group
</>
}
defaultShow
>
<CNavItem href="#">Compact item</CNavItem>
<CNavItem href="#">Compact item</CNavItem>
</CNavGroup>
</CSidebarNav>
</CSidebar>
)
}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 (
<CSidebar className="border-end">
<CSidebarNav compact>
<CNavTitle>Compact nav</CNavTitle>
<CNavItem href="#">
<CIcon customClassName="nav-icon" icon={cilSpeedometer} /> Dashboard
</CNavItem>
<CNavItem href="#">
<CIcon customClassName="nav-icon" icon={cilLayers} /> Components
</CNavItem>
<CNavGroup
toggler={
<>
<CIcon customClassName="nav-icon" icon={cilPuzzle} /> Nested group
</>
}
defaultShow
>
<CNavItem href="#">Compact item</CNavItem>
<CNavItem href="#">Compact item</CNavItem>
</CNavGroup>
</CSidebarNav>
</CSidebar>
)
}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.
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 (
<CSidebar className="border-end">
<CSidebarNav variant="tree">
<CNavGroup
toggler={
<>
<CIcon customClassName="nav-icon" icon={cilFolder} /> Parent item
</>
}
defaultShow
>
<CNavItem href="#">
<span className="nav-icon">
<span className="nav-icon-bullet"></span>
</span>{' '}
Child item
</CNavItem>
<CNavGroup
toggler={
<>
<span className="nav-icon">
<span className="nav-icon-bullet"></span>
</span>{' '}
Nested group
</>
}
defaultShow
>
<CNavItem href="#">
<span className="nav-icon">
<span className="nav-icon-bullet"></span>
</span>{' '}
Nested child
</CNavItem>
<CNavItem href="#">
<span className="nav-icon">
<span className="nav-icon-bullet"></span>
</span>{' '}
Nested child
</CNavItem>
</CNavGroup>
</CNavGroup>
</CSidebarNav>
</CSidebar>
)
}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 (
<CSidebar className="border-end">
<CSidebarNav variant="tree">
<CNavGroup
toggler={
<>
<CIcon customClassName="nav-icon" icon={cilFolder} /> Parent item
</>
}
defaultShow
>
<CNavItem href="#">
<span className="nav-icon">
<span className="nav-icon-bullet"></span>
</span>{' '}
Child item
</CNavItem>
<CNavGroup
toggler={
<>
<span className="nav-icon">
<span className="nav-icon-bullet"></span>
</span>{' '}
Nested group
</>
}
defaultShow
>
<CNavItem href="#">
<span className="nav-icon">
<span className="nav-icon-bullet"></span>
</span>{' '}
Nested child
</CNavItem>
<CNavItem href="#">
<span className="nav-icon">
<span className="nav-icon-bullet"></span>
</span>{' '}
Nested child
</CNavItem>
</CNavGroup>
</CNavGroup>
</CSidebarNav>
</CSidebar>
)
}Group indicator
By default, CNavGroup renders the standard group indicator through the .nav-group-toggle styles, so no additional markup is required.
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 (
<CSidebar className="border-end">
<CSidebarNav>
<CNavGroup
toggler={
<>
<CIcon customClassName="nav-icon" icon={cilPuzzle} /> Items group
</>
}
defaultShow
>
<CNavItem href="#">Items group item</CNavItem>
<CNavItem href="#">Items group item</CNavItem>
</CNavGroup>
</CSidebarNav>
</CSidebar>
)
}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 (
<CSidebar className="border-end">
<CSidebarNav>
<CNavGroup
toggler={
<>
<CIcon customClassName="nav-icon" icon={cilPuzzle} /> Items group
</>
}
defaultShow
>
<CNavItem href="#">Items group item</CNavItem>
<CNavItem href="#">Items group item</CNavItem>
</CNavGroup>
</CSidebarNav>
</CSidebar>
)
}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.
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 (
<CSidebar className="border-end">
<CSidebarNav>
<CNavGroup
toggler={({ visible }) => (
<>
<CIcon customClassName="nav-icon" icon={cilPuzzle} /> Items group
<span className="nav-group-toggle-indicator">
<CIcon className="icon icon-sm" icon={visible ? cilMinus : cilPlus} />
</span>
</>
)}
defaultShow
>
<CNavItem href="#">Items group item</CNavItem>
<CNavItem href="#">Items group item</CNavItem>
</CNavGroup>
<CNavGroup
toggler={({ visible }) => (
<>
<CIcon customClassName="nav-icon" icon={cilPuzzle} /> Alternate indicator
<span className="nav-group-toggle-indicator">
<CIcon
className="icon icon-sm"
icon={visible ? cilChevronCircleUpAlt : cilChevronCircleDownAlt}
/>
</span>
</>
)}
>
<CNavItem href="#">Items group item</CNavItem>
<CNavItem href="#">Items group item</CNavItem>
</CNavGroup>
</CSidebarNav>
</CSidebar>
)
}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 (
<CSidebar className="border-end">
<CSidebarNav>
<CNavGroup
toggler={({ visible }) => (
<>
<CIcon customClassName="nav-icon" icon={cilPuzzle} /> Items group
<span className="nav-group-toggle-indicator">
<CIcon className="icon icon-sm" icon={visible ? cilMinus : cilPlus} />
</span>
</>
)}
defaultShow
>
<CNavItem href="#">Items group item</CNavItem>
<CNavItem href="#">Items group item</CNavItem>
</CNavGroup>
<CNavGroup
toggler={({ visible }) => (
<>
<CIcon customClassName="nav-icon" icon={cilPuzzle} /> Alternate indicator
<span className="nav-group-toggle-indicator">
<CIcon
className="icon icon-sm"
icon={visible ? cilChevronCircleUpAlt : cilChevronCircleDownAlt}
/>
</span>
</>
)}
>
<CNavItem href="#">Items group item</CNavItem>
<CNavItem href="#">Items group item</CNavItem>
</CNavGroup>
</CSidebarNav>
</CSidebar>
)
}Controlled and uncontrolled groups
Added in v6.0.0CNavGroup works uncontrolled by default — clicking the toggler expands and collapses it, and defaultShow seeds the group expanded on mount.
<CNavGroup toggler="Components" defaultShow>To control a group from the parent, set show and handle onShowChange. show is purely controlled: the group renders what the prop says, and the toggler — or an accordion close request when a sibling opens — only requests a change through onShowChange, so the parent has the final say. onShowChange fires in both modes.
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.
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 (
<CSidebar className="border-end">
<CSidebarNav>
<CNavItem href="#">
<CIcon customClassName="nav-icon" icon={cilSpeedometer} /> Dashboard
</CNavItem>
<CNavGroup
onShowChange={handleVisibleChange}
toggler={
<>
<CIcon customClassName="nav-icon" icon={cilPuzzle} /> Active section
</>
}
visible={visible}
>
<CNavItem href="#">Overview</CNavItem>
<CNavItem href="#">Settings</CNavItem>
</CNavGroup>
<CNavGroup
toggler={
<>
<CIcon customClassName="nav-icon" icon={cilLayers} /> Components
</>
}
>
<CNavItem href="#">Base</CNavItem>
<CNavItem href="#">Buttons</CNavItem>
<CNavGroup
toggler={
<>
<span className="nav-icon">
<span className="nav-icon-bullet"></span>
</span>{' '}
Forms
</>
}
>
<CNavItem href="#">Inputs</CNavItem>
<CNavItem href="#">Selects</CNavItem>
</CNavGroup>
</CNavGroup>
<CNavGroup
toggler={
<>
<CIcon customClassName="nav-icon" icon={cilSettings} /> Settings
</>
}
>
<CNavItem href="#">Profile</CNavItem>
<CNavItem href="#">Security</CNavItem>
</CNavGroup>
<CNavItem href="https://coreui.io">
<CIcon customClassName="nav-icon" icon={cilCloudDownload} /> Download CoreUI
</CNavItem>
</CSidebarNav>
<CSidebarFooter className="border-top">
<CButton theme="primary" size="sm" onClick={() => setLocked(!locked)}>
{locked ? 'Unlock collapsing' : 'Lock the active section open'}
</CButton>
</CSidebarFooter>
</CSidebar>
)
}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 (
<CSidebar className="border-end">
<CSidebarNav>
<CNavItem href="#">
<CIcon customClassName="nav-icon" icon={cilSpeedometer} /> Dashboard
</CNavItem>
<CNavGroup
onShowChange={handleVisibleChange}
toggler={
<>
<CIcon customClassName="nav-icon" icon={cilPuzzle} /> Active section
</>
}
visible={visible}
>
<CNavItem href="#">Overview</CNavItem>
<CNavItem href="#">Settings</CNavItem>
</CNavGroup>
<CNavGroup
toggler={
<>
<CIcon customClassName="nav-icon" icon={cilLayers} /> Components
</>
}
>
<CNavItem href="#">Base</CNavItem>
<CNavItem href="#">Buttons</CNavItem>
<CNavGroup
toggler={
<>
<span className="nav-icon">
<span className="nav-icon-bullet"></span>
</span>{' '}
Forms
</>
}
>
<CNavItem href="#">Inputs</CNavItem>
<CNavItem href="#">Selects</CNavItem>
</CNavGroup>
</CNavGroup>
<CNavGroup
toggler={
<>
<CIcon customClassName="nav-icon" icon={cilSettings} /> Settings
</>
}
>
<CNavItem href="#">Profile</CNavItem>
<CNavItem href="#">Security</CNavItem>
</CNavGroup>
<CNavItem href="https://coreui.io">
<CIcon customClassName="nav-icon" icon={cilCloudDownload} /> Download CoreUI
</CNavItem>
</CSidebarNav>
<CSidebarFooter className="border-top">
<CButton theme="primary" size="sm" onClick={() => setLocked(!locked)}>
{locked ? 'Unlock collapsing' : 'Lock the active section open'}
</CButton>
</CSidebarFooter>
</CSidebar>
)
}Color schemes
A sidebar follows the page’s color scheme. colorScheme="dark" and colorScheme="light" pin it to one scheme whatever the page uses — the same switch as data-coreui-theme="dark" or "light" on the element — so a dark navigation column can sit on a light page.
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 (
<CSidebar className="border-end" colorScheme="dark">
<CSidebarHeader className="border-bottom">
<CSidebarBrand>
<svg
role="img"
aria-label="CoreUI Logo Full"
width="88"
height="32"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 312 115"
>
<g style={{ fill: 'currentColor' }}>
<path d="M96 24.124 57 1.608a12 12 0 0 0-12 0L6 24.124a12.034 12.034 0 0 0-6 10.393V79.55a12.033 12.033 0 0 0 6 10.392l39 22.517a12 12 0 0 0 12 0l39-22.517a12.033 12.033 0 0 0 6-10.392V34.517a12.034 12.034 0 0 0-6-10.393ZM94 79.55a4 4 0 0 1-2 3.464l-39 22.517a4 4 0 0 1-4 0L10 83.014a4 4 0 0 1-2-3.464V34.517a4 4 0 0 1 2-3.464L49 8.536a4 4 0 0 1 4 0l39 22.517a4 4 0 0 1 2 3.464V79.55Z"></path>
<path d="M74.022 70.071h-2.866a4 4 0 0 0-1.925.494L51.95 80.05 32 68.531V45.554l19.95-11.519 17.29 9.455a4 4 0 0 0 1.919.49h2.863a2 2 0 0 0 2-2v-2.71a2 2 0 0 0-1.04-1.756L55.793 27.02a8.04 8.04 0 0 0-7.843.09L28 38.626a8.025 8.025 0 0 0-4 6.929V68.53a8 8 0 0 0 4 6.928l19.95 11.519a8.043 8.043 0 0 0 7.843.088l19.19-10.532a2 2 0 0 0 1.038-1.753v-2.71a2 2 0 0 0-2-2Z"></path>
<g transform="translate(118 33)">
<path d="M50.745.428c-8.28.01-14.99 6.72-15 15v17.277c0 8.285 6.715 15 15 15 8.284 0 15-6.715 15-15V15.428c-.01-8.28-6.72-14.99-15-15Zm7 32.277a7 7 0 0 1-14 0V15.428a7 7 0 0 1 14 0v17.277ZM14.079 8.488a7.01 7.01 0 0 1 7.868 6.075.99.99 0 0 0 .984.865h6.03a1.01 1.01 0 0 0 1-1.097C29.354 6.206 22.38.046 14.243.447 6.161 1-.086 7.762 0 15.864V32.27c-.087 8.101 6.161 14.864 14.244 15.416 8.137.401 15.11-5.759 15.716-13.883a1.01 1.01 0 0 0-.999-1.098h-6.03a.99.99 0 0 0-.985.865 7.01 7.01 0 0 1-7.868 6.076A7.164 7.164 0 0 1 8 32.461V15.672a7.164 7.164 0 0 1 6.079-7.184ZM96.922 27.994a12.158 12.158 0 0 0 7.184-11.077v-3.7c0-6.71-5.44-12.15-12.149-12.15H75a1 1 0 0 0-1 1v44a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-17h6.621l7.916 17.413a1 1 0 0 0 .91.587h6.591a1 1 0 0 0 .91-1.414l-8.026-17.659Zm-.816-11.077a4.154 4.154 0 0 1-4.148 4.15h-9.852v-12h9.852a4.154 4 0 0 1 4.148 4.15v3.7ZM139 1.067h-26a1 1 0 0 0-1 1v44a1 1 0 0 0 1 1h26a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-19v-12h13a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-13v-10h19a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1ZM177 1.067h-6a1 1 0 0 0-1 1v22.647a7.007 7.007 0 1 1-14 0V2.067a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v22.647a15.003 15.003 0 1 0 30 0V2.067a1 1 0 0 0-1-1Z"></path>
<rect width="8" height="38" x="186" y="1.067" rx="1"></rect>
</g>
</g>
</svg>
</CSidebarBrand>
</CSidebarHeader>
<CSidebarNav>
<CNavTitle>Nav Title</CNavTitle>
<CNavItem href="#">
<CIcon customClassName="nav-icon" icon={cilSpeedometer} /> Nav item
</CNavItem>
<CNavItem href="#">
<CIcon customClassName="nav-icon" icon={cilSpeedometer} /> With badge{' '}
<CBadge theme="primary" className="ms-auto">
NEW
</CBadge>
</CNavItem>
<CNavGroup
toggler={
<>
<CIcon customClassName="nav-icon" icon={cilPuzzle} /> Nav dropdown
</>
}
>
<CNavItem href="#">
<span className="nav-icon">
<span className="nav-icon-bullet"></span>
</span>{' '}
Nav dropdown item
</CNavItem>
<CNavItem href="#">
<span className="nav-icon">
<span className="nav-icon-bullet"></span>
</span>{' '}
Nav dropdown item
</CNavItem>
</CNavGroup>
<CNavItem href="https://coreui.io">
<CIcon customClassName="nav-icon" icon={cilCloudDownload} /> Download CoreUI
</CNavItem>
<CNavItem href="https://coreui.io/pricing/">
<CIcon customClassName="nav-icon" icon={cilLayers} /> Try CoreUI <strong>PRO</strong>
</CNavItem>
</CSidebarNav>
</CSidebar>
)
}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 (
<CSidebar className="border-end" colorScheme="dark">
<CSidebarHeader className="border-bottom">
<CSidebarBrand>
<svg
role="img"
aria-label="CoreUI Logo Full"
width="88"
height="32"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 312 115"
>
<g style={{ fill: 'currentColor' }}>
<path d="M96 24.124 57 1.608a12 12 0 0 0-12 0L6 24.124a12.034 12.034 0 0 0-6 10.393V79.55a12.033 12.033 0 0 0 6 10.392l39 22.517a12 12 0 0 0 12 0l39-22.517a12.033 12.033 0 0 0 6-10.392V34.517a12.034 12.034 0 0 0-6-10.393ZM94 79.55a4 4 0 0 1-2 3.464l-39 22.517a4 4 0 0 1-4 0L10 83.014a4 4 0 0 1-2-3.464V34.517a4 4 0 0 1 2-3.464L49 8.536a4 4 0 0 1 4 0l39 22.517a4 4 0 0 1 2 3.464V79.55Z"></path>
<path d="M74.022 70.071h-2.866a4 4 0 0 0-1.925.494L51.95 80.05 32 68.531V45.554l19.95-11.519 17.29 9.455a4 4 0 0 0 1.919.49h2.863a2 2 0 0 0 2-2v-2.71a2 2 0 0 0-1.04-1.756L55.793 27.02a8.04 8.04 0 0 0-7.843.09L28 38.626a8.025 8.025 0 0 0-4 6.929V68.53a8 8 0 0 0 4 6.928l19.95 11.519a8.043 8.043 0 0 0 7.843.088l19.19-10.532a2 2 0 0 0 1.038-1.753v-2.71a2 2 0 0 0-2-2Z"></path>
<g transform="translate(118 33)">
<path d="M50.745.428c-8.28.01-14.99 6.72-15 15v17.277c0 8.285 6.715 15 15 15 8.284 0 15-6.715 15-15V15.428c-.01-8.28-6.72-14.99-15-15Zm7 32.277a7 7 0 0 1-14 0V15.428a7 7 0 0 1 14 0v17.277ZM14.079 8.488a7.01 7.01 0 0 1 7.868 6.075.99.99 0 0 0 .984.865h6.03a1.01 1.01 0 0 0 1-1.097C29.354 6.206 22.38.046 14.243.447 6.161 1-.086 7.762 0 15.864V32.27c-.087 8.101 6.161 14.864 14.244 15.416 8.137.401 15.11-5.759 15.716-13.883a1.01 1.01 0 0 0-.999-1.098h-6.03a.99.99 0 0 0-.985.865 7.01 7.01 0 0 1-7.868 6.076A7.164 7.164 0 0 1 8 32.461V15.672a7.164 7.164 0 0 1 6.079-7.184ZM96.922 27.994a12.158 12.158 0 0 0 7.184-11.077v-3.7c0-6.71-5.44-12.15-12.149-12.15H75a1 1 0 0 0-1 1v44a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-17h6.621l7.916 17.413a1 1 0 0 0 .91.587h6.591a1 1 0 0 0 .91-1.414l-8.026-17.659Zm-.816-11.077a4.154 4.154 0 0 1-4.148 4.15h-9.852v-12h9.852a4.154 4 0 0 1 4.148 4.15v3.7ZM139 1.067h-26a1 1 0 0 0-1 1v44a1 1 0 0 0 1 1h26a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-19v-12h13a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-13v-10h19a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1ZM177 1.067h-6a1 1 0 0 0-1 1v22.647a7.007 7.007 0 1 1-14 0V2.067a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v22.647a15.003 15.003 0 1 0 30 0V2.067a1 1 0 0 0-1-1Z"></path>
<rect width="8" height="38" x="186" y="1.067" rx="1"></rect>
</g>
</g>
</svg>
</CSidebarBrand>
</CSidebarHeader>
<CSidebarNav>
<CNavTitle>Nav Title</CNavTitle>
<CNavItem href="#">
<CIcon customClassName="nav-icon" icon={cilSpeedometer} /> Nav item
</CNavItem>
<CNavItem href="#">
<CIcon customClassName="nav-icon" icon={cilSpeedometer} /> With badge{' '}
<CBadge theme="primary" className="ms-auto">
NEW
</CBadge>
</CNavItem>
<CNavGroup
toggler={
<>
<CIcon customClassName="nav-icon" icon={cilPuzzle} /> Nav dropdown
</>
}
>
<CNavItem href="#">
<span className="nav-icon">
<span className="nav-icon-bullet"></span>
</span>{' '}
Nav dropdown item
</CNavItem>
<CNavItem href="#">
<span className="nav-icon">
<span className="nav-icon-bullet"></span>
</span>{' '}
Nav dropdown item
</CNavItem>
</CNavGroup>
<CNavItem href="https://coreui.io">
<CIcon customClassName="nav-icon" icon={cilCloudDownload} /> Download CoreUI
</CNavItem>
<CNavItem href="https://coreui.io/pricing/">
<CIcon customClassName="nav-icon" icon={cilLayers} /> Try CoreUI <strong>PRO</strong>
</CNavItem>
</CSidebarNav>
</CSidebar>
)
}Theme variants
Add a theme-{color} class to the sidebar and it paints its surface, text, icons and the hover and active links from that colour’s slots — the background from --cui-theme-bg, the text from --cui-theme-contrast, the hovered and active links from --cui-theme-hover and --cui-theme-active. Combine it with colorScheme when the colour needs a fixed scheme.
import React from 'react'
import {
CBadge,
CSidebar,
CSidebarBrand,
CSidebarFooter,
CSidebarHeader,
CSidebarNav,
CSidebarToggler,
CNavGroup,
CNavItem,
CNavTitle,
} from '@coreui/react'
import CIcon from '@coreui/icons-react'
import { cilCloudDownload, cilLayers, cilPuzzle, cilSpeedometer } from '@coreui/icons'
const themes = ['primary', 'secondary', 'success', 'info', 'warning', 'danger', 'inverse']
export const SidebarThemeVariantsExample = () => {
return (
<>
{themes.map((theme) => (
<CSidebar
className={`theme-${theme} border-end border-bottom`}
key={theme}
style={{ '--cui-sidebar-width': '13rem' } as React.CSSProperties}
>
<CSidebarHeader>
<CSidebarBrand>
<svg
role="img"
aria-label="CoreUI Logo Full"
width="88"
height="32"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 312 115"
>
<g style={{ fill: 'currentColor' }}>
<path d="M96 24.124 57 1.608a12 12 0 0 0-12 0L6 24.124a12.034 12.034 0 0 0-6 10.393V79.55a12.033 12.033 0 0 0 6 10.392l39 22.517a12 12 0 0 0 12 0l39-22.517a12.033 12.033 0 0 0 6-10.392V34.517a12.034 12.034 0 0 0-6-10.393ZM94 79.55a4 4 0 0 1-2 3.464l-39 22.517a4 4 0 0 1-4 0L10 83.014a4 4 0 0 1-2-3.464V34.517a4 4 0 0 1 2-3.464L49 8.536a4 4 0 0 1 4 0l39 22.517a4 4 0 0 1 2 3.464V79.55Z"></path>
<path d="M74.022 70.071h-2.866a4 4 0 0 0-1.925.494L51.95 80.05 32 68.531V45.554l19.95-11.519 17.29 9.455a4 4 0 0 0 1.919.49h2.863a2 2 0 0 0 2-2v-2.71a2 2 0 0 0-1.04-1.756L55.793 27.02a8.04 8.04 0 0 0-7.843.09L28 38.626a8.025 8.025 0 0 0-4 6.929V68.53a8 8 0 0 0 4 6.928l19.95 11.519a8.043 8.043 0 0 0 7.843.088l19.19-10.532a2 2 0 0 0 1.038-1.753v-2.71a2 2 0 0 0-2-2Z"></path>
<g transform="translate(118 33)">
<path d="M50.745.428c-8.28.01-14.99 6.72-15 15v17.277c0 8.285 6.715 15 15 15 8.284 0 15-6.715 15-15V15.428c-.01-8.28-6.72-14.99-15-15Zm7 32.277a7 7 0 0 1-14 0V15.428a7 7 0 0 1 14 0v17.277ZM14.079 8.488a7.01 7.01 0 0 1 7.868 6.075.99.99 0 0 0 .984.865h6.03a1.01 1.01 0 0 0 1-1.097C29.354 6.206 22.38.046 14.243.447 6.161 1-.086 7.762 0 15.864V32.27c-.087 8.101 6.161 14.864 14.244 15.416 8.137.401 15.11-5.759 15.716-13.883a1.01 1.01 0 0 0-.999-1.098h-6.03a.99.99 0 0 0-.985.865 7.01 7.01 0 0 1-7.868 6.076A7.164 7.164 0 0 1 8 32.461V15.672a7.164 7.164 0 0 1 6.079-7.184ZM96.922 27.994a12.158 12.158 0 0 0 7.184-11.077v-3.7c0-6.71-5.44-12.15-12.149-12.15H75a1 1 0 0 0-1 1v44a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-17h6.621l7.916 17.413a1 1 0 0 0 .91.587h6.591a1 1 0 0 0 .91-1.414l-8.026-17.659Zm-.816-11.077a4.154 4.154 0 0 1-4.148 4.15h-9.852v-12h9.852a4.154 4.154 0 0 1 4.148 4.15v3.7ZM139 1.067h-26a1 1 0 0 0-1 1v44a1 1 0 0 0 1 1h26a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-19v-12h13a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-13v-10h19a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1ZM177 1.067h-6a1 1 0 0 0-1 1v22.647a7.007 7.007 0 1 1-14 0V2.067a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v22.647a15.003 15.003 0 1 0 30 0V2.067a1 1 0 0 0-1-1Z"></path>
<rect width="8" height="38" x="186" y="1.067" rx="1"></rect>
</g>
</g>
</svg>
</CSidebarBrand>
</CSidebarHeader>
<CSidebarNav>
<CNavTitle>Nav Title</CNavTitle>
<CNavItem active href="#">
<CIcon customClassName="nav-icon" icon={cilSpeedometer} /> Nav item
</CNavItem>
<CNavItem href="#">
<CIcon customClassName="nav-icon" icon={cilSpeedometer} /> With badge{' '}
<CBadge className="theme-inverse ms-auto">NEW</CBadge>
</CNavItem>
<CNavGroup
defaultShow
toggler={
<>
<CIcon customClassName="nav-icon" icon={cilPuzzle} /> Items group
</>
}
>
<CNavItem href="#">
<span className="nav-icon">
<span className="nav-icon-bullet"></span>
</span>{' '}
Items group item
</CNavItem>
<CNavItem href="#">
<span className="nav-icon">
<span className="nav-icon-bullet"></span>
</span>{' '}
Items group item
</CNavItem>
</CNavGroup>
<CNavItem href="https://coreui.io">
<CIcon customClassName="nav-icon" icon={cilCloudDownload} /> Download CoreUI
</CNavItem>
<CNavItem href="https://coreui.io/pricing/">
<CIcon customClassName="nav-icon" icon={cilLayers} /> Try CoreUI <strong>PRO</strong>
</CNavItem>
</CSidebarNav>
<CSidebarFooter className="border-top d-flex">
<CSidebarToggler />
</CSidebarFooter>
</CSidebar>
))}
</>
)
}import React from 'react'
import {
CBadge,
CSidebar,
CSidebarBrand,
CSidebarFooter,
CSidebarHeader,
CSidebarNav,
CSidebarToggler,
CNavGroup,
CNavItem,
CNavTitle,
} from '@coreui/react'
import CIcon from '@coreui/icons-react'
import { cilCloudDownload, cilLayers, cilPuzzle, cilSpeedometer } from '@coreui/icons'
const themes = ['primary', 'secondary', 'success', 'info', 'warning', 'danger', 'inverse']
export const SidebarThemeVariantsExample = () => {
return (
<>
{themes.map((theme) => (
<CSidebar
className={`theme-${theme} border-end border-bottom`}
key={theme}
style={{ '--cui-sidebar-width': '13rem' } as React.CSSProperties}
>
<CSidebarHeader>
<CSidebarBrand>
<svg
role="img"
aria-label="CoreUI Logo Full"
width="88"
height="32"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
viewBox="0 0 312 115"
>
<g style={{ fill: 'currentColor' }}>
<path d="M96 24.124 57 1.608a12 12 0 0 0-12 0L6 24.124a12.034 12.034 0 0 0-6 10.393V79.55a12.033 12.033 0 0 0 6 10.392l39 22.517a12 12 0 0 0 12 0l39-22.517a12.033 12.033 0 0 0 6-10.392V34.517a12.034 12.034 0 0 0-6-10.393ZM94 79.55a4 4 0 0 1-2 3.464l-39 22.517a4 4 0 0 1-4 0L10 83.014a4 4 0 0 1-2-3.464V34.517a4 4 0 0 1 2-3.464L49 8.536a4 4 0 0 1 4 0l39 22.517a4 4 0 0 1 2 3.464V79.55Z"></path>
<path d="M74.022 70.071h-2.866a4 4 0 0 0-1.925.494L51.95 80.05 32 68.531V45.554l19.95-11.519 17.29 9.455a4 4 0 0 0 1.919.49h2.863a2 2 0 0 0 2-2v-2.71a2 2 0 0 0-1.04-1.756L55.793 27.02a8.04 8.04 0 0 0-7.843.09L28 38.626a8.025 8.025 0 0 0-4 6.929V68.53a8 8 0 0 0 4 6.928l19.95 11.519a8.043 8.043 0 0 0 7.843.088l19.19-10.532a2 2 0 0 0 1.038-1.753v-2.71a2 2 0 0 0-2-2Z"></path>
<g transform="translate(118 33)">
<path d="M50.745.428c-8.28.01-14.99 6.72-15 15v17.277c0 8.285 6.715 15 15 15 8.284 0 15-6.715 15-15V15.428c-.01-8.28-6.72-14.99-15-15Zm7 32.277a7 7 0 0 1-14 0V15.428a7 7 0 0 1 14 0v17.277ZM14.079 8.488a7.01 7.01 0 0 1 7.868 6.075.99.99 0 0 0 .984.865h6.03a1.01 1.01 0 0 0 1-1.097C29.354 6.206 22.38.046 14.243.447 6.161 1-.086 7.762 0 15.864V32.27c-.087 8.101 6.161 14.864 14.244 15.416 8.137.401 15.11-5.759 15.716-13.883a1.01 1.01 0 0 0-.999-1.098h-6.03a.99.99 0 0 0-.985.865 7.01 7.01 0 0 1-7.868 6.076A7.164 7.164 0 0 1 8 32.461V15.672a7.164 7.164 0 0 1 6.079-7.184ZM96.922 27.994a12.158 12.158 0 0 0 7.184-11.077v-3.7c0-6.71-5.44-12.15-12.149-12.15H75a1 1 0 0 0-1 1v44a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-17h6.621l7.916 17.413a1 1 0 0 0 .91.587h6.591a1 1 0 0 0 .91-1.414l-8.026-17.659Zm-.816-11.077a4.154 4.154 0 0 1-4.148 4.15h-9.852v-12h9.852a4.154 4.154 0 0 1 4.148 4.15v3.7ZM139 1.067h-26a1 1 0 0 0-1 1v44a1 1 0 0 0 1 1h26a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-19v-12h13a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1h-13v-10h19a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1ZM177 1.067h-6a1 1 0 0 0-1 1v22.647a7.007 7.007 0 1 1-14 0V2.067a1 1 0 0 0-1-1h-6a1 1 0 0 0-1 1v22.647a15.003 15.003 0 1 0 30 0V2.067a1 1 0 0 0-1-1Z"></path>
<rect width="8" height="38" x="186" y="1.067" rx="1"></rect>
</g>
</g>
</svg>
</CSidebarBrand>
</CSidebarHeader>
<CSidebarNav>
<CNavTitle>Nav Title</CNavTitle>
<CNavItem active href="#">
<CIcon customClassName="nav-icon" icon={cilSpeedometer} /> Nav item
</CNavItem>
<CNavItem href="#">
<CIcon customClassName="nav-icon" icon={cilSpeedometer} /> With badge{' '}
<CBadge className="theme-inverse ms-auto">NEW</CBadge>
</CNavItem>
<CNavGroup
defaultShow
toggler={
<>
<CIcon customClassName="nav-icon" icon={cilPuzzle} /> Items group
</>
}
>
<CNavItem href="#">
<span className="nav-icon">
<span className="nav-icon-bullet"></span>
</span>{' '}
Items group item
</CNavItem>
<CNavItem href="#">
<span className="nav-icon">
<span className="nav-icon-bullet"></span>
</span>{' '}
Items group item
</CNavItem>
</CNavGroup>
<CNavItem href="https://coreui.io">
<CIcon customClassName="nav-icon" icon={cilCloudDownload} /> Download CoreUI
</CNavItem>
<CNavItem href="https://coreui.io/pricing/">
<CIcon customClassName="nav-icon" icon={cilLayers} /> Try CoreUI <strong>PRO</strong>
</CNavItem>
</CSidebarNav>
<CSidebarFooter className="border-top d-flex">
<CSidebarToggler />
</CSidebarFooter>
</CSidebar>
))}
</>
)
}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.
Controlled and uncontrolled
Added in v6.0.0The sidebar works either way, and the prop you reach for is what picks the mode.
| prop | who owns the open state | |
|---|---|---|
| Uncontrolled | defaultShow | the sidebar, from that starting point |
| Controlled | show | your component |
onShowChange fires in both modes whenever the sidebar requests an open-state change — a close gesture (the mobile backdrop click, an outside click or a nav link selection on mobile) or, in uncontrolled mode, any internal toggle. The deprecated visible prop keeps its old behavior and is ignored when defaultShow or show is set.
Uncontrolled
Seed the starting state and let the sidebar manage itself — on mobile it still closes on the backdrop click.
<CSidebar defaultShow={false}>Controlled
Pass show and the sidebar renders what you pass — close gestures only call onShowChange, so feed the change back, or nothing closes. This is the classic app-shell case: a header toggler owns the state, and the sidebar follows.
import React, { useState } from 'react'
import { CButton, CNavItem, CNavTitle, CSidebar, CSidebarNav } from '@coreui/react'
import CIcon from '@coreui/icons-react'
import { cilCloudDownload, cilPuzzle, cilSpeedometer } from '@coreui/icons'
export const SidebarControlledExample = () => {
const [show, setShow] = useState(true)
return (
<div className="d-flex align-items-start">
<CSidebar className="border-end" show={show} onShowChange={setShow}>
<CSidebarNav>
<CNavTitle>Navigation</CNavTitle>
<CNavItem href="#">
<CIcon customClassName="nav-icon" icon={cilSpeedometer} /> Dashboard
</CNavItem>
<CNavItem href="#">
<CIcon customClassName="nav-icon" icon={cilPuzzle} /> Components
</CNavItem>
<CNavItem href="https://coreui.io">
<CIcon customClassName="nav-icon" icon={cilCloudDownload} /> Download CoreUI
</CNavItem>
</CSidebarNav>
</CSidebar>
<CButton className="m-4" theme="primary" onClick={() => setShow(!show)}>
{show ? 'Hide sidebar' : 'Show sidebar'}
</CButton>
</div>
)
}import React, { useState } from 'react'
import { CButton, CNavItem, CNavTitle, CSidebar, CSidebarNav } from '@coreui/react'
import CIcon from '@coreui/icons-react'
import { cilCloudDownload, cilPuzzle, cilSpeedometer } from '@coreui/icons'
export const SidebarControlledExample = () => {
const [show, setShow] = useState(true)
return (
<div className="d-flex align-items-start">
<CSidebar className="border-end" show={show} onShowChange={setShow}>
<CSidebarNav>
<CNavTitle>Navigation</CNavTitle>
<CNavItem href="#">
<CIcon customClassName="nav-icon" icon={cilSpeedometer} /> Dashboard
</CNavItem>
<CNavItem href="#">
<CIcon customClassName="nav-icon" icon={cilPuzzle} /> Components
</CNavItem>
<CNavItem href="https://coreui.io">
<CIcon customClassName="nav-icon" icon={cilCloudDownload} /> Download CoreUI
</CNavItem>
</CSidebarNav>
</CSidebar>
<CButton className="m-4" theme="primary" onClick={() => setShow(!show)}>
{show ? 'Hide sidebar' : 'Show sidebar'}
</CButton>
</div>
)
}API
Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.