Tabs are used to segment sections of content or features. Tabs may also display content on different pages/URLs.
Example
⌘ Cmd + ⌥ Option + 1
Properties
"TabNav.Tab" Component
| property | propType | required | default | description |
|---|---|---|---|---|
| children | node | - | - | Text or element that appears within the component |
| isActive | bool | - | - | Should the `TabNav.Tab` visually appear to be active |
| isDisabled | bool | - | - | Boolean for whether the tab should be given the disabled class |
| onClick | func | yes | - | Function to perform when tab is clicked |
| tabId | string | yes | - | String to identify tab, used in conjunction with activeTab |
| testSection | string | - | - | Hook for automated JavaScript tests |
"TabNav" Component
| property | propType | required | default | description |
|---|---|---|---|---|
| activeTab | string | yes | - | Id corresponding to which tab should be given the active class |
| children | node | yes | - | Set of Tab components |
| style | [oneOf 'center' | 'dashboard' | 'header' | 'left-pad' | 'plain' | 'small' | 'sub'] | - | - | Various styles that can be given to the navigation |
| testSection | string | - | - | Hook for automated JavaScript tests |