This video ends with a tabbed section on your page — horizontal or vertical, with icon or text labels, and working keyboard navigation.
The two types you will add
paragraph_bundle_tabs provides Tabs (tabs_bundle) and Tab Section (tab_section_bundle). The container's Tab Section field accepts only tab sections. Each section carries a Tab Name Section for the label and a Tab Body Section for the panel.
Icon labels instead of words
Ticking Use icon changes how the label field is read: instead of visible text you enter icon markup. The field help gives the accepted forms — Font Awesome v4 as fa fa-home, v5 and later as fas fa-house, and Google Material icons as material-icons:home or material-symbols-outlined:home, where the colon separates the font class from the ligature.
Horizontal, vertical, animated
- Vertical Tabs — a checkbox that moves the tab strip to the side.
- Vertical Tabs Breakpoints — the width at which that vertical arrangement applies, from 576 px to 1400 px.
- Animated Tab — the opened panel slides in from a chosen direction, or zooms, or fades.
- Active Tab Background — the colour of the tab currently open.
Keyboard support you do not have to build
The markup follows the tabs pattern: role="tablist", role="tab", role="tabpanel" and aria-selected. The JavaScript handles arrow keys plus Home and End, so a keyboard user can reach every panel without a mouse.
Version note
The info file pins this to ^11.3 || ^12. Drupal 10 sites should use W3CSS Paragraphs instead, and move to Paragraphs Bundles after the core upgrade.
Planning something larger than a single feature — a rebuild, or a move off an older Drupal? Drupal architecture services, or request a quote.
