Hire Us Get CoreUI PRO all-access →

React Sidebar Component

Sidebar

Markdown ChatGPT Claude

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:

  • 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.

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 (
    <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 color="primary 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
          visible
        >
          <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>
              </>
            )}
            visible
          >
            <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>
        <CDropdown className="w-100" direction="dropup">
          <CDropdownToggle
            caret={false}
            className="w-100 d-flex gap-2 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} />
          </CDropdownToggle>
          <CDropdownMenu className="w-100">
            <div className="d-flex gap-2 px-2">
              <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>
            </div>
            <CDropdownDivider />
            <CDropdownItem href="#">
              <div className="d-flex align-items-center gap-2">
                <CIcon icon={cilUser} />
                Account
              </div>
            </CDropdownItem>
            <CDropdownItem href="#">
              <div className="d-flex align-items-center gap-2">
                <CIcon icon={cilCreditCard} />
                Billing
              </div>
            </CDropdownItem>
            <CDropdownItem href="#">
              <div className="d-flex align-items-center gap-2">
                <CIcon icon={cilSettings} />
                Settings
              </div>
            </CDropdownItem>
            <CDropdownDivider />
            <CDropdownItem href="#">
              <div className="d-flex align-items-center gap-2">
                <CIcon icon={cilAccountLogout} />
                Logout
              </div>
            </CDropdownItem>
          </CDropdownMenu>
        </CDropdown>
      </CSidebarFooter>
    </CSidebar>
  )
}
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 (
    <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 color="primary 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
          visible
        >
          <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>
              </>
            )}
            visible
          >
            <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>
        <CDropdown className="w-100" direction="dropup">
          <CDropdownToggle
            caret={false}
            className="w-100 d-flex gap-2 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} />
          </CDropdownToggle>
          <CDropdownMenu className="w-100">
            <div className="d-flex gap-2 px-2">
              <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>
            </div>
            <CDropdownDivider />
            <CDropdownItem href="#">
              <div className="d-flex align-items-center gap-2">
                <CIcon icon={cilUser} />
                Account
              </div>
            </CDropdownItem>
            <CDropdownItem href="#">
              <div className="d-flex align-items-center gap-2">
                <CIcon icon={cilCreditCard} />
                Billing
              </div>
            </CDropdownItem>
            <CDropdownItem href="#">
              <div className="d-flex align-items-center gap-2">
                <CIcon icon={cilSettings} />
                Settings
              </div>
            </CDropdownItem>
            <CDropdownDivider />
            <CDropdownItem href="#">
              <div className="d-flex align-items-center gap-2">
                <CIcon icon={cilAccountLogout} />
                Logout
              </div>
            </CDropdownItem>
          </CDropdownMenu>
        </CDropdown>
      </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 color="primary ms-auto">NEW</CBadge>
        </CNavItem>
        <CNavGroup
          toggler={
            <>
              <CIcon customClassName="nav-icon" icon={cilPuzzle} /> Items group
            </>
          }
          visible
        >
          <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 color="primary ms-auto">NEW</CBadge>
        </CNavItem>
        <CNavGroup
          toggler={
            <>
              <CIcon customClassName="nav-icon" icon={cilPuzzle} /> Items group
            </>
          }
          visible
        >
          <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-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.

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.

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.

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
            </>
          }
          visible
        >
          <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
            </>
          }
          visible
        >
          <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
            </>
          }
          visible
        >
          <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
              </>
            }
            visible
          >
            <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
            </>
          }
          visible
        >
          <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
              </>
            }
            visible
          >
            <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
            </>
          }
          visible
        >
          <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
            </>
          }
          visible
        >
          <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>
            </>
          )}
          visible
        >
          <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>
            </>
          )}
          visible
        >
          <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 navigation group

Added in v5.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.

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
          onVisibleChange={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 color="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
          onVisibleChange={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 color="primary" size="sm" onClick={() => setLocked(!locked)}>
          {locked ? 'Unlock collapsing' : 'Lock the active section open'}
        </CButton>
      </CSidebarFooter>
    </CSidebar>
  )
}

Dark sidebar

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

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 color="primary 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 color="primary 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>
  )
}

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.