
```jsx
import { CSidebar } from '@coreui/react'
// or
import CSidebar from '@coreui/react/src/components/sidebar/CSidebar'
```

<div className="table-responsive table-api border rounded mb-3">
  <table className="table">
    <thead>
      <tr>
        <th>Property</th>
        <th>Default</th>
        <th>Type</th>
      </tr>
    </thead>
    <tbody>
      <tr id="csidebar-as">
        <td className="text-primary fw-semibold">as<a href="#csidebar-as" aria-label="CSidebar as permalink" className="anchor-link after">#</a></td>
        <td><code>{`div`}</code></td>
        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'div')`}</code>, <code>{`(ElementType & 'slot')`}</code>, <code>{`(ElementType & 'style')`}</code>, <code>{`... 174 more ...`}</code>, <code>{`(ElementType & FunctionComponent<...>)`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Component used for the root node. Either a string to use a HTML element or a component.</p>
        </td>
      </tr>
      <tr id="csidebar-class-name">
        <td className="text-primary fw-semibold">className<a href="#csidebar-class-name" aria-label="CSidebar className permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`string`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>A string of all className you want applied to the component.</p>
        </td>
      </tr>
      <tr id="csidebar-color-scheme">
        <td className="text-primary fw-semibold">colorScheme<a href="#csidebar-color-scheme" aria-label="CSidebar colorScheme permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`'dark'`}</code>, <code>{`'light'`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Sets if the color of text should be colored for a light or dark dark background.</p>
        </td>
      </tr>
      <tr id="csidebar-narrow">
        <td className="text-primary fw-semibold">narrow<a href="#csidebar-narrow" aria-label="CSidebar narrow permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`boolean`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Make sidebar narrow.</p>
        </td>
      </tr>
      <tr id="csidebar-on-hide">
        <td className="text-primary fw-semibold">onHide<a href="#csidebar-on-hide" aria-label="CSidebar onHide permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`() => void`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Callback fired when the component requests to be hidden.</p>
        </td>
      </tr>
      <tr id="csidebar-on-show">
        <td className="text-primary fw-semibold">onShow<a href="#csidebar-on-show" aria-label="CSidebar onShow permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`() => void`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Callback fired when the component requests to be shown.</p>
        </td>
      </tr>
      <tr id="csidebar-on-visible-change">
        <td className="text-primary fw-semibold">onVisibleChange<a href="#csidebar-on-visible-change" aria-label="CSidebar onVisibleChange permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`(visible: boolean) => void`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Event emitted after visibility of component changed.</p>
        </td>
      </tr>
      <tr id="csidebar-overlaid">
        <td className="text-primary fw-semibold">overlaid<a href="#csidebar-overlaid" aria-label="CSidebar overlaid permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`boolean`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Set sidebar to overlaid variant.</p>
        </td>
      </tr>
      <tr id="csidebar-placement">
        <td className="text-primary fw-semibold">placement<a href="#csidebar-placement" aria-label="CSidebar placement permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`'start'`}</code>, <code>{`'end'`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Components placement, there’s no default placement.</p>
        </td>
      </tr>
      <tr id="csidebar-position">
        <td className="text-primary fw-semibold">position<a href="#csidebar-position" aria-label="CSidebar position permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`'fixed'`}</code>, <code>{`'sticky'`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Place sidebar in non-static positions.</p>
        </td>
      </tr>
      <tr id="csidebar-size">
        <td className="text-primary fw-semibold">size<a href="#csidebar-size" aria-label="CSidebar size permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`'sm'`}</code>, <code>{`'lg'`}</code>, <code>{`'xl'`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Size the component small, large, or extra large.</p>
        </td>
      </tr>
      <tr id="csidebar-unfoldable">
        <td className="text-primary fw-semibold">unfoldable<a href="#csidebar-unfoldable" aria-label="CSidebar unfoldable permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`boolean`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Expand narrowed sidebar on hover.</p>
        </td>
      </tr>
      <tr id="csidebar-visible">
        <td className="text-primary fw-semibold">visible<a href="#csidebar-visible" aria-label="CSidebar visible permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`boolean`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Toggle the visibility of sidebar component.</p>
        </td>
      </tr>
    </tbody>
  </table>
</div>
