Watch this and you can turn any Drupal View into a keyboard-accessible tab group without writing a line of JavaScript or touching your theme.
What gets built on screen
The walkthrough starts in the Views UI: set Format to Views Vanilla JavaScript Tabs and Show to Fields. From there the first field of every row becomes the tab button and all remaining fields render inside that tab's pane. The plugin enforces the Fields row itself, and shows a status note pointing at the bundled vvjt_example view when you pick anything else.
The format settings the video walks through
- Tabs Position — Top, Right, Bottom or Left. Top is the shipped default.
- Wrap Tabs When Exceeded — unchecked by default, so a long button row auto-scrolls instead of wrapping.
- Max Width (px) for Tabs — 300 out of the box; zero means auto.
- Animation Type — seven presets, including an Opacity preset that only the tabs format offers.
- Tabs Buttons Background Color (#ECECEC) and Tabs Panes Background Color (#F7F7F7), plus a checkbox that disables both.
- Responsive Breakpoint for Vertical Tabs — 576, 768, 992 (default), 1200 or 1400 px, the width at which Left and Right tabs fold back to horizontal.
Deep links and keyboard handling
Open Deep Linking Settings, tick Enable Deep Linking and type a short URL Identifier. An identifier of products produces shareable fragments in the shape #tabs-products-1; the validator rejects the reserved words tabs, tab, vvjt and vvj. Keyboard handling follows the W3C ARIA APG tab pattern — arrow keys, Home, End, Enter and Space — and Drupal behaviours are re-attached on a newly revealed pane, which is what keeps nested views and field-group tabs alive.
What the module needs
Read straight from vvjt.info.yml: core_version_requirement: ^11.3 || ^12 and php: 8.3. Its declared dependencies are core Views, core Filter and the shared VVJ Core module, which Composer installs for you when you run composer require drupal/vvjt:^2.0. A Drupal 10 site cannot run the 2.x branch at all.
Where to go next
The complete option reference lives on the Views Tabs module page. If you are curious why hidden panes still need care, read Display: None vs Visibility: Hidden.
Need this built into your own site? See Drupal development services, or request a quote.
