DesignDevelop

TabNav🔗

The TabNav is a wrapper container for building second level tabbed-navigation bars

Example🔗

With Line Transition🔗

Props - TabNav🔗

Name	Description	Type	Default Value
`aria-label`		`string ｜ undefined`	n/a
`backButton`	Back button text, href, click handler	`BackButtonConfig ｜ undefined`	n/a
`duration`	Set duration of lineTransition animation	`number ｜ undefined`	`160`
`enableLineTransition`	Enable fancy transition when changing active tabs	`boolean ｜ undefined`	`false`
`showBackButtonOn`	Which viewports to show the back button on	`("s" ｜ "m" ｜ "l" ｜ null ｜ undefined)[] ｜ undefined`	`['s', 'm', 'l']`
`stickyChildrenLeft`	A JSX node sticky to the left	`ReactNode`	`null`
`stickyChildrenRight`	A JSX node sticky to the right	`ReactNode`	`null`
`textAlign`	Text-align: left or center	`"center" ｜ "left" ｜ undefined`	`center`

TabNavItem🔗

Navigational items used in the TabNav component

Example🔗

Props - TabNavItem🔗

Name	Description	Type	Default Value
`children`		`node`	n/a
`isActive`	Indicate if the TabNavItem is in an active state	`bool`	n/a
`isDropdown`	Indicate if the TabNavItem will open a dropdown menu	`bool`	n/a
`onClick`	Onclick function	`func`	n/a

TabNav
Example
With Line Transition
Props - TabNav
TabNavItem
Example
Props - TabNavItem

TabNav
Example
With Line Transition
Props - TabNav
TabNavItem
Example
Props - TabNavItem