React Navs & Tabs Components API

Navs & Tabs API

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

On this page

jsx

import { CNav } from '@coreui/react'

Property	Default	Type
as	`ul`	`(ElementType & 'symbol') \| (ElementType & 'object') \| (ElementType & 'ul') \| (ElementType & 'slot') \| (ElementType & 'style') \| ... 175 more ...`
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	-	`'enclosed'`, `'enclosed-pills'`, `'pills'`, `'tabs'`, `'underline'`, `'underline-border'`
Set the nav variant to tabs or pills.

jsx

import { CNavItem } from '@coreui/react'

Property	Default	Type
active	-	`boolean`
Toggle the active state for the component.
as5.0.0+	`li`	`(ElementType & 'symbol') \| (ElementType & 'object') \| (ElementType & 'li') \| (ElementType & 'cite') \| (ElementType & 'data') \| ... 175 more ...`
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.

jsx

import { CNavLink } from '@coreui/react'

Property	Default	Type
active	-	`boolean`
Toggle the active state for the component.
as	-	`(ElementType & 'symbol') \| (ElementType & 'object') \| (ElementType & 'a') \| (ElementType & 'cite') \| (ElementType & 'data') \| ... 175 more ...`
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.

jsx

import { CTabContent } from '@coreui/react'

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

jsx

import { CTabPane } from '@coreui/react'

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.
transition5.1.0+	`true`	`boolean`
Enable fade in and fade out transition.
visible	-	`boolean`
Toggle the visibility of component.