Dashboard UI Kit

Apps PreviewDownload Design Package

TabItem

import { Tabs, TabItem } from '@duik/it'
import Tabs, { TabItem } from '@duik/tabs'

Prestyled tab item for your tab navigation. TabItem renders "a" by default with tabindex="0" You can check more examples (e.g. with react-router-dom) on Building Tab Navigation page.

Basic Usage Within Widget

Compose with Component Property

By default, TabItem renders "a" tag, simply override this behaviour with "Component property" like so:
<TabItem Component={NavLink} to="/docs/react/tab-item">React Router Link</TabItem>.

See react-router-dom usage here or explore more about "Component" property here.

Prop table

className

false

type: string
className, e.g. "my-custom-styling"
children

false

type: React.ReactNode
Children nodes, e.g. TabItem(s)
Component

false

type: React.Component | React.FunctionalComponent | string

default value: "a"

Renders the component with a given react element. By default, the component renders <a />. This is usefull when you want to use a same style but render a different HTML element or your custom component. Read and see more examples here.
leftEl

false

type: React.ReactNode
Renders node on the left side with some styling
rightEl

false

type: React.ReactNode
Renders node on the right side with some styling
...rest

false

type: any
Other properties are passed down to the wrapping element