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-pro'

Property	Default	Type
as	`ul`	`(ElementType & 'symbol')`, `(ElementType & 'object')`, `(ElementType & 'ul')`, `(ElementType & 'slot')`, `(ElementType & 'style')`, `... 175 more ...`, `undefined`
Component used for the root node. Either a string to use a HTML element or a component.
className	-	`string`, `undefined`
A string of all className you want applied to the base component.
layout	-	`'fill'`, `'justified'`, `undefined`
Specify a layout type for component.
variant	-	`'enclosed'`, `'enclosed-pills'`, `'pills'`, `'tabs'`, `'underline'`, `'underline-border'`, `undefined`
Set the nav variant to tabs or pills.

jsx

import { CNavItem } from '@coreui/react-pro'

Property	Default	Type
active	-	`boolean`, `undefined`
Toggle the active state for the component.
as5.0.0+	`li`	`(ElementType & 'symbol')`, `(ElementType & 'object')`, `(ElementType & 'li')`, `(ElementType & 'cite')`, `(ElementType & 'data')`, `... 175 more ...`, `undefined`
Component used for the root node. Either a string to use a HTML element or a component.
className	-	`string`, `undefined`
A string of all className you want applied to the component.
disabled	-	`boolean`, `undefined`
Toggle the disabled state for the component.
href	-	`string`, `undefined`
The href attribute specifies the URL of the page the link goes to.

jsx

import { CNavLink } from '@coreui/react-pro'

Property	Default	Type
active	-	`boolean`, `undefined`
Toggle the active state for the component.
as	-	`(ElementType & 'symbol')`, `(ElementType & 'object')`, `(ElementType & 'a')`, `(ElementType & 'cite')`, `(ElementType & 'data')`, `... 175 more ...`, `undefined`
Component used for the root node. Either a string to use a HTML element or a component.
className	-	`string`, `undefined`
A string of all className you want applied to the component.
disabled	-	`boolean`, `undefined`
Toggle the disabled state for the component.
href	-	`string`, `undefined`
The href attribute specifies the URL of the page the link goes to.

jsx

import { CTabContent } from '@coreui/react-pro'

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

jsx

import { CTabPane } from '@coreui/react-pro'

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