Toggle theme

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-labelstringn/a
backButtonBack button text, href, click handlerBackButtonConfign/a
durationSet duration of lineTransition animationnumber160
enableLineTransitionEnable fancy transition when changing active tabsbooleanfalse
showBackButtonOnWhich viewports to show the back button on("s" | "m" | "l")[]['s', 'm', 'l']
stickyChildrenLeftA JSX node sticky to the leftReactNodenull
stickyChildrenRightA JSX node sticky to the rightReactNodenull
textAlignText-align: left or center"center" | "left"center

TabNavItem🔗

Navigational items used in the TabNav component

Example🔗

Props - TabNavItem🔗

Name
Description
Type
Default Value
childrennoden/a
isActiveIndicate if the TabNavItem is in an active statebooln/a
isDropdownIndicate if the TabNavItem will open a dropdown menubooln/a
onClickOnclick functionfuncn/a
2022 © Volvo Car Corporation