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-labelstring | undefinedn/a
backButtonBack button text, href, click handlerBackButtonConfig | undefinedn/a
durationSet duration of lineTransition animationnumber | undefined160
enableLineTransitionEnable fancy transition when changing active tabsboolean | undefinedfalse
showBackButtonOnWhich viewports to show the back button on("s" | "m" | "l" | null | undefined)[] | undefined['s', 'm', 'l']
stickyChildrenLeftA JSX node sticky to the leftReactNodenull
stickyChildrenRightA JSX node sticky to the rightReactNodenull
textAlignText-align: left or center"center" | "left" | undefinedcenter

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