Skip to content

Properties

PropertyTypeDescription
selected_keystring
number
(optional) In case one of the tabs should be opened by a key.
alignleft
center
right
(optional) To align the tab list on the right side align="right". Defaults to left.
content_styledivider
white
transparent
(optional) To enable the visual helper .dnb-section on to the content wrapper. Use a supported modifier from the Section component. Defaults to null.
content_spacingboolean
x-small
small
medium
large
x-large
xx-large
(optional) To modify the spacing onto the content wrapper. Use a supported modifier from the Section component. Defaults to large.
tabs_styledivider
white
transparent
(optional) To enable the visual helper .dnb-section inside the tabs list. Use a supported modifier from the Section component. Defaults to null.
tabs_spacingboolean(optional) To modify the spacing inside the tab list. Defaults to null.
tab_elementReact.ReactNode(optional) Define what HTML element should be used. You can provide e.g. tab_element={GatsbyLink} – you may then provide the to property inside every entry (data={[{ to: ';url';, ... }]}). Defaults to <button>.
datastring
{title: string | React.ReactNode, key: string | number, selected?: boolean, disabled?: boolean}
(required) defines the data structure to load as a JSON. e.g. [{title: '...', content: 'Current tab', key: '...', hash: '...'}]
childrenReact.ReactNode
object
(required) the content to render. Can be a function, returning the current tab content (key) => ('Current tab'), a React Component or an object with the keys and content {key1: 'Current tab'}.
contentReact.ReactNode
object
(required) the content to render. Can be a function, returning the current tab content (key) => ('Current tab'), a React Component or an object with the keys and content {key1: 'Current tab'}.
prerenderboolean(optional) If set to true, the Tabs content will pre-render all contents. The visibility will be handled by using the hidden and aria-hidden HTML attributes. Defaults to false.
prevent_rerenderboolean(optional) If set to true, the Tabs content will stay in the DOM. The visibility will be handled by using the hidden and aria-hidden HTML attributes. Similar to prerender, but in contrast, the content will render once the user is activating a tab. Defaults to false.
scrollboolean(optional) If set to true, the content will scroll on tab change, until all tabs will be visible on the upper side of the browser window view. Defaults to false.
no_borderboolean(optional) If set to true, the default horizontal border line under the tablist will be removed. Defaults to false.
nav_button_edgeboolean(optional) If set to true, the navigation icons will have a straight border at their outside. This feature is meant to be used when the Tabs component goes all the way to the browser window. Defaults to false.
skeletonboolean(optional) If set to true, an overlaying skeleton with animation will be shown.
breakoutboolean(optional) If set to false, the default horizontal border line under the tablist remains inside the parent boundaries. Defaults to true.
Spacestring
object
(optional) Spacing properties like top or bottom are supported.

Key

The key can be a string or a number. But if the key is a number (integer), we have to deliver the content directly in the tab item:

const tabsDataWithContent = [
{ title: 'First', key: 1, content: <H2>First</H2> },
{ title: 'Second', key: 2, content: () => <H2>Second</H2> },
]

Example Data

const tabsData = [
{ title: 'First', key: 'first' },
{ title: 'Second', key: 'second' },
{ title: 'Third', key: 'third', disabled: true },
{ title: 'Fourth', key: 'fourth' },
]

Current tab

The current Tab content can be a string, a function returning content or a React component.