Simple, accessible, unstyled tabs built entirely in vanilla JavaScript. Based on the [APG Tabs pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/).
npm install @acab/tabsSimple, accessible, unstyled tabs built entirely in vanilla JavaScript. Based on the APG Tabs pattern.
```
npm add @acab/tabs
Import the tabs and register it.
`js
import TheTabs from '@acab/tabs';
window.customElements.define('the-tabs', TheTabs);
`
Inside the custom element, define the initial markup consisting of role=tablist, role=tab and role=tabpanel. Add aria-selected='true' to the tab you initially want to be active, and add hidden to the panels of the other tabs.
`html
Now style it however you want! The
[role=tablist]/[role=tab]/[role=tabpanel] and [aria-selected=true] selectors can be referenced in CSS.`css
[role='tablist'] {
/ … /
}[role='tab'] {
/ … /
&[aria-selected='true'] {
border-bottom: 2px solid;
/ … /
}
}
[role='tabpanel'] {
/ … /
}
``