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

className

Required: false

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

Required: false

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

Required: false

type: boolean
Renders without borders.
errorMessage

Required: false

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

Required: false

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

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"