Skip to content

Properties

PropertiesDescription
selected_key(optional) in case one of the tabs should be opened by a key.
align(optional) to align the tab list on the right side align="right". Default to left.
content_style(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_spacing(optional) to modify the spacing onto the content wrapper. Use a supported modifier from the Section component. Defaults to large.
tabs_style(optional) to enable the visual helper .dnb-section inside the tabs list. Use a supported modifier from the Section component. Defaults to null.
tabs_spacing(optional) to modify the spacing inside the tab list. Defaults to null.
tab_element(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>.
data(required) defines the data structure to load as a JSON. e.g. [{title: '...', content: 'Current tab', key: '...', hash: '...'}]
children or content(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'}.
prerender(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_rerender(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.
scroll(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_border(optional) if set to true, the default horizontal border line under the tablist will be removed. Defaults to false.
nav_button_edge(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.
skeleton(optional) if set to true, an overlaying skeleton with animation will be shown.
Space(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.