Dashboard UI Kit

Apps PreviewDownload Design Package

Building Tab Navigation

Easily build tabs with only two components. Easily control the size, content and more.

  1. Tabs (container)
  2. TabItem

Basic Usage

By default, wrapping Tabs component renders nav element and TabItem renders a element. NavItem has tabindex="0" property by default. Add class "active" to render active state.

Example with Widget (recommended) and react-router-dom

"active" class is added by NavLink from react-router-dom.

Prop table


Required: false

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

Required: false

type: string
Label text. Ideally you should pass "id" as well, TextField will automatically connect the label with "for"

Required: false

type: boolean
Renders without borders.

Required: false

type: React.ReactNode
Displays error message and renders input in error state.

Required: false

type: React.ReactNode
Displays success message and renders input in success state.

Required: false

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

Migration from Dashboard UI Kit 3

"icon" and "iconPosition" properties are now removed in favor to "leftEl" and "rightEl"