Tenon-UI Documentation

Tabbed interface

Rendering accessible tabbed interfaces is not simple. There are a number of features that you need to implement if you want all users to be able to easily interact with your tabs.

You can read more about this on the W3C ARIA design patterns page for tabs or the tabbed interfaces page of the Inclusive Components website.

With Tenon-UI this become very easy as all the hard work has been done for you.

Usage

The Tabs component is a compound component that also gives you access to the Tabs.Tab component.

You then get:

You are free to render any view you'd like inside the tabs.

Please note: True tabs are not site navigation elements. If you are rendering large views inside your tabs, rather consider doing it with routing and navigation elements. Tenon-UI uses styles to hide and show the tabs, so rendering very large content in many tabs will incur a performance hit.

Tabs.Tab component props

title

This prop is required.

The title of the panel. This is the text that is rendered as the text inside the tabs. By default, it is also rendered as heading of the tab panel.

noHeading

This boolean prop can be used if you do not want to render the title texts as a heading inside the tab panel.

className

This prop is passed through to the wrapping <section> element of the tab panel.

headingLevel

The Tabs component makes use of the Tenon-UI Heading component to automatically render the correct heading level.

If your application does not use this component you can override the default level by giving the desired heading level in this prop.

name

A string name prop that can be used to identify the tabs by name. This can be useful in the toggle render function described next.

If no name prop is given the tabs are named by index: tab0, tab1, tab3 ... etc.

toggleRender

Should you also want to customise the HTML that is rendered inside the tab toggle elements, you can pass a render function into this prop. This will then override the default HTML inside the toggles.

The render function is called with:

title

The text title of the tab so that you can render that text into your own JSX.

name

The name given to the tab in question. This can be handy in some cases where generic render functions are used.

isActive

A boolean value indicating if the tab is currently active.