Nested Tab Widgets

A tale of two Tab Widgets

My default heading

The tab for this tabpanel is created from a data-atabs-tab-label attribute which is on the data-atabs-panel.

The tab associated with this panel has it's own unique class, beyond the default one set by the script. This is done via the tabpanel having the data-atabs-tab-class with a single string value of the class to add. For example "test-class".


The data-atabs-panel has the value "default", which results in this tabpanel being opened by default.

While not necessarily condoned, this tabpanel contains a separate Tab Widget instance.


Hey. Apples are great, aren't they?

The default nested tabpanel

This Tab Widget has data-atabs-orientation="vertical" set to the widget wrapper. This attribute with the "vertical" value will convert a tablist to a stacked UI. aria-orientation="vertical" will be set to the tablist.

aria-orientation is not universally supported yet, so this is more for introducing announcements for future behavior, rather than for any unique functionality at this time.


This tabpanel also has data-atabs-panel="default", but as it is not the first tabpanel with "default" as its value, this one is ignored.

Also, there is no information about oranges here. Apologies.