# React Bootstrap Sidebar Component

> Learn how to use the React Bootstrap Sidebar component from CoreUI to build customizable side navigation panels with support for branding, dropdowns, dark mode, and responsive behavior.

## React Bootstrap Sidebar Component

The React Bootstrap Sidebar component provides a flexible vertical navigation layout with support for branding, navigation links, toggling, and theming. It’s perfect for admin panels, dashboards, and mobile navigation.

## Supported sub-components

The sidebar includes built-in support for these components:

- `<CSidebarHeader>` – optional top section.
- `<CSidebarBrand>` – brand or logo section.
- `<CSidebarNav>` – main vertical navigation area.
- `<CSidebarFooter>` – optional bottom section.
- `<CSidebarToggler>` – toggler for sidebar minimization or expansion.

## React Bootstrap Sidebar examples

### Standard sidebar

By default, the sidebar is shown on desktop viewports and hidden on mobile.

```html
import React, { useState } from 'react'
import {
  CAvatar,
  CBadge,
  CDropdown,
  CDropdownDivider,
  CDropdownItem,
  CDropdownMenu,
  CDropdownToggle,
  CSidebar,
  CSidebarBrand,
  CSidebarFooter,
  CSidebarHeader,
  CSidebarNav,
  CNavGroup,
  CNavItem,
  CNavTitle,
  CButton,
} from '@coreui/react'

import CIcon from '@coreui/icons-react'
import {
  cilAccountLogout,
  cilCloudDownload,
  cilCreditCard,
  cilMinus,
  cilOptions,
  cilPlus,
  cilPuzzle,
  cilSettings,
  cilSidebarClose,
  cilSidebarOpen,
  cilSpeedometer,
  cilUser,
} from '@coreui/icons'

export const SidebarExample = () => {
  const [unfoldable, setUnfoldable] = useState(false)

  return (
    <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>lena@acme.com</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>lena@acme.com</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

Use the `narrow` prop to collapse the sidebar into a compact version, showing only icons.

```html
import React from 'react'
import {
  CSidebar,
  CSidebarBrand,
  CSidebarHeader,
  CSidebarNav,
  CNavItem,
  CTooltip,
} from '@coreui/react'

import CIcon from '@coreui/icons-react'
import { cilCart, cilCloudDownload, cilSpeedometer } from '@coreui/icons'

export const SidebarNarrowExample = () => {
  return (
    <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 `unfoldable` to create a narrow sidebar that expands on hover.

```html
import React from 'react'
import {
  CBadge,
  CSidebar,
  CSidebarBrand,
  CSidebarHeader,
  CSidebarNav,
  CNavGroup,
  CNavItem,
  CNavTitle,
} from '@coreui/react'

import CIcon from '@coreui/icons-react'
import { cilCloudDownload, cilLayers, cilPuzzle, cilSpeedometer } from '@coreui/icons'

export const SidebarUnfoldableExample = () => {
  return (
    <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>
  )
}
```

## Dark mode sidebar

Apply `colorScheme="dark"` to match your sidebar to a dark theme.

```html
import React from 'react'
import {
  CBadge,
  CSidebar,
  CSidebarBrand,
  CSidebarHeader,
  CSidebarNav,
  CNavGroup,
  CNavItem,
  CNavTitle,
} from '@coreui/react'

import CIcon from '@coreui/icons-react'
import { cilCloudDownload, cilLayers, cilPuzzle, cilSpeedometer } from '@coreui/icons'

export const SidebarDarkExample = () => {
  return (
    <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>
  )
}
```

## Sidebar placement

By default, the React Bootstrap Sidebar appears on the left. Use the `placement` prop to change this:

- `placement="start"` – left side (default)
- `placement="end"` – right side

## API reference

Explore the available props for the React Bootstrap Sidebar component and its subcomponents:

- [&lt;CSidebar /&gt;](../api/#csidebar)
- [&lt;CSidebarBrand /&gt;](../api/#csidebarbrand)
- [&lt;CSidebarFooter /&gt;](../api/#csidebarfooter)
- [&lt;CSidebarHeader /&gt;](../api/#csidebarheader)
- [&lt;CSidebarNav /&gt;](../api/#csidebarnav)
- [&lt;CSidebarToggler /&gt;](../api/#csidebartoggler)