React Navbar Component API
Navbar API
Limited-time offer for the first 100 customers in 2025. Use code 2025SKY25 at checkout.
Explore the API reference for the React Navbar component and discover how to effectively utilize its props for customization.
CNavbar#
import { CNavbar } from '@coreui/react'// orimport CNavbar from '@coreui/react/src/components/navbar/CNavbar'| Property | Default | Type |
|---|---|---|
| as# | - | (ElementType & 'symbol'), (ElementType & 'object'), (ElementType & 'nav'), (ElementType & 'slot'), (ElementType & 'style'), ... 174 more ..., (ElementType & FunctionComponent<...>) |
Component used for the root node. Either a string to use a HTML element or a component. | ||
| className# | - | string |
A string of all className you want applied to the component. | ||
| color# | - | 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'dark', 'light', string |
Sets the color context of the component to one of CoreUI’s themed colors. | ||
| colorScheme# | - | 'dark', 'light' |
Sets if the color of text should be colored for a light or dark background. | ||
| container# | - | boolean, 'sm', 'md', 'lg', 'xl', 'xxl', 'fluid' |
Defines optional container wrapping children elements. | ||
| expand# | - | boolean, 'sm', 'md', 'lg', 'xl', 'xxl' |
Defines the responsive breakpoint to determine when content collapses. | ||
| placement# | - | 'fixed-top', 'fixed-bottom', 'sticky-top' |
Place component in non-static positions. | ||
CNavbarBrand#
import { CNavbarBrand } from '@coreui/react'// orimport CNavbarBrand from '@coreui/react/src/components/navbar/CNavbarBrand'| Property | Default | Type |
|---|---|---|
| as# | - | (ElementType & 'symbol'), (ElementType & 'object'), (ElementType & 'a'), (ElementType & 'slot'), (ElementType & 'style'), ... 174 more ..., (ElementType & FunctionComponent<...>) |
Component used for the root node. Either a string to use a HTML element or a component. | ||
| className# | - | string |
A string of all className you want applied to the component. | ||
| href# | - | string |
The href attribute specifies the URL of the page the link goes to. | ||
CNavbarNav#
import { CNavbarNav } from '@coreui/react'// orimport CNavbarNav from '@coreui/react/src/components/navbar/CNavbarNav'| Property | Default | Type |
|---|---|---|
| as# | - | (ElementType & 'symbol'), (ElementType & 'object'), (ElementType & 'ul'), (ElementType & 'slot'), (ElementType & 'style'), ... 174 more ..., (ElementType & FunctionComponent<...>) |
Component used for the root node. Either a string to use a HTML element or a component. | ||
| className# | - | string |
A string of all className you want applied to the component. | ||
CNavbarText#
import { CNavbarText } from '@coreui/react'// orimport CNavbarText from '@coreui/react/src/components/navbar/CNavbarText'| Property | Default | Type |
|---|---|---|
| className# | - | string |
A string of all className you want applied to the base component. | ||
CNavbarToggler#
import { CNavbarToggler } from '@coreui/react'// orimport CNavbarToggler from '@coreui/react/src/components/navbar/CNavbarToggler'| Property | Default | Type |
|---|---|---|
| className# | - | string |
A string of all className you want applied to the base component. | ||