React Navs & Tabs Components API

Navs & Tabs API

New Year sale. Skyrocket your business in 2025!

Extra 25% off for all sale items + Free CoreUI Icons PRO with every order!
Limited-time offer for the first 100 customers in 2025. Use code 2025SKY25 at checkout.

Get offer!

Explore the API reference for the React Navs & Tabs components and discover how to effectively utilize its props for customization.

On this page

CNav#

import { CNav } from '@coreui/react'
// or
import CNav from '@coreui/react/src/components/nav/CNav'

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 base component.
layout#	-	`'fill'`, `'justified'`
Specify a layout type for component.
variant#	-	`'pills'`, `'tabs'`, `'underline'`, `'underline-border'`
Set the nav variant to tabs or pills.

CNavItem#

import { CNavItem } from '@coreui/react'
// or
import CNavItem from '@coreui/react/src/components/nav/CNavItem'

Property	Default	Type
active#	-	`boolean`
Toggle the active state for the component.
as#5.0.0+	-	`(ElementType & 'symbol')`, `(ElementType & 'object')`, `(ElementType & 'li')`, `(ElementType & 'cite')`, `(ElementType & 'data')`, `... 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.
disabled#	-	`boolean`
Toggle the disabled state for the component.
href#	-	`string`
The href attribute specifies the URL of the page the link goes to.

CNavLink#

import { CNavLink } from '@coreui/react'
// or
import CNavLink from '@coreui/react/src/components/nav/CNavLink'

Property	Default	Type
active#	-	`boolean`
Toggle the active state for the component.
as#	-	`(ElementType & 'symbol')`, `(ElementType & 'object')`, `(ElementType & 'a')`, `(ElementType & 'cite')`, `(ElementType & 'data')`, `... 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.
disabled#	-	`boolean`
Toggle the disabled state for the component.
href#	-	`string`
The href attribute specifies the URL of the page the link goes to.

CTabContent#

import { CTabContent } from '@coreui/react'
// or
import CTabContent from '@coreui/react/src/components/tabs/CTabContent'

Property	Default	Type
className#	-	`string`
A string of all className you want applied to the base component.

CTabPane#

import { CTabPane } from '@coreui/react'
// or
import CTabPane from '@coreui/react/src/components/tabs/CTabPane'

Property	Default	Type
className#	-	`string`
A string of all className you want applied to the base component.
onHide#	-	`() => void`
Callback fired when the component requests to be hidden.
onShow#	-	`() => void`
Callback fired when the component requests to be shown.
transition#5.1.0+	`true`	`boolean`
Enable fade in and fade out transition.
visible#	-	`boolean`
Toggle the visibility of component.