
```jsx
import { CNavbar } from '@coreui/react'
// or
import CNavbar from '@coreui/react/src/components/navbar/CNavbar'
```

<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="cnavbar-as">
        <td className="text-primary fw-semibold">as<a href="#cnavbar-as" aria-label="CNavbar as permalink" className="anchor-link after">#</a></td>
        <td><code>{`nav`}</code></td>
        <td><code>{`(ElementType & 'symbol')`}</code>, <code>{`(ElementType & 'object')`}</code>, <code>{`(ElementType & 'nav')`}</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="cnavbar-class-name">
        <td className="text-primary fw-semibold">className<a href="#cnavbar-class-name" aria-label="CNavbar 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="cnavbar-color">
        <td className="text-primary fw-semibold">color<a href="#cnavbar-color" aria-label="CNavbar color permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`'primary'`}</code>, <code>{`'secondary'`}</code>, <code>{`'success'`}</code>, <code>{`'danger'`}</code>, <code>{`'warning'`}</code>, <code>{`'info'`}</code>, <code>{`'dark'`}</code>, <code>{`'light'`}</code>, <code>{`string`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Sets the color context of the component to one of CoreUI’s themed colors.</p>
        </td>
      </tr>
      <tr id="cnavbar-color-scheme">
        <td className="text-primary fw-semibold">colorScheme<a href="#cnavbar-color-scheme" aria-label="CNavbar 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 background.</p>
        </td>
      </tr>
      <tr id="cnavbar-container">
        <td className="text-primary fw-semibold">container<a href="#cnavbar-container" aria-label="CNavbar container permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`boolean`}</code>, <code>{`'sm'`}</code>, <code>{`'md'`}</code>, <code>{`'lg'`}</code>, <code>{`'xl'`}</code>, <code>{`'xxl'`}</code>, <code>{`'fluid'`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Defines optional container wrapping children elements.</p>
        </td>
      </tr>
      <tr id="cnavbar-expand">
        <td className="text-primary fw-semibold">expand<a href="#cnavbar-expand" aria-label="CNavbar expand permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`boolean`}</code>, <code>{`'sm'`}</code>, <code>{`'md'`}</code>, <code>{`'lg'`}</code>, <code>{`'xl'`}</code>, <code>{`'xxl'`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Defines the responsive breakpoint to determine when content collapses.</p>
        </td>
      </tr>
      <tr id="cnavbar-placement">
        <td className="text-primary fw-semibold">placement<a href="#cnavbar-placement" aria-label="CNavbar placement permalink" className="anchor-link after">#</a></td>
        <td>-</td>
        <td><code>{`'fixed-top'`}</code>, <code>{`'fixed-bottom'`}</code>, <code>{`'sticky-top'`}</code></td>
      </tr>
      <tr>
        <td colSpan="3">
          <p>Place component in non-static positions.</p>
        </td>
      </tr>
    </tbody>
  </table>
</div>
