See ARIA § Tabs
tabs.js as a module script to your page
and mark up your tabs with the appropriate ARIA roles.
Behavior will be added automatically.
The tabs behavior emits these custom events:
missing-switch-awayon a tab after switching away from it.
detail.to: the newly active tab
missing-switch-toon a tab when switching to it
detail.from: the previously active tab
missing-changeon the tablist element when changing tabs
§ Initializing dynamic content
For dynamically inserted content: initialize it as such:
Any elements that are inside a shadow DOM will also need to be initialized explicitly this way.
All of our components will find elements that need initialization within the subtree you pass in ---
you could pass the whole
document every time if you wanted to.
See ARIA § menu
All notes above about initializing dynamic content apply here.
§ Expand/collapse navbar
See Components § Navbar
Make sure to add:
data-overflow-navattribute to your navbar.
- inside that navbar, a button with a
The navbar will remain horizontally scrollable.
All notes above about initializing dynamic content apply here (for all those times you dynamically add navbars to your page).