Advanced Layout Builder Tabs
This module allows you to create tabbed sections within Layout Builder, giving you the flexibility to organize multiple blocks within each tab. It provides a user-friendly interface to define the number and labels of your tabs, with each tab acting as its own distinct region for content.
# Advanced Layout Builder Tabs
Provides a Layout Builder section layout where you define the number of tabs
(1–10) and their labels. Each tab is its own Layout Builder region, so you can
place multiple blocks per tab — not just one block per tab like the
`layout_builder_tabs` module.
## Requirements
- Drupal 10 or 11
- `layout_discovery` (Drupal core)
- `layout_builder` (Drupal core, for the Layout Builder UI)
No contrib module dependencies.
## Installation
1. Copy the `adv_lb_tabs` folder into your `modules/contrib/`
(or `modules/custom/`) directory.
2. Enable the module: `drush en adv_lb_tabs`
3. Go to a content type's **Manage Display** → **Layout Builder**, add a new
section, and choose **"Advanced Layout Builder Tabs"** from the **Tabs** category.
## Usage
1. Click **+ Add section** in the Layout Builder.
2. Select **Advanced Layout Builder Tabs** from the **Tabs** category.
3. Set the **number of tabs** (1–10) and a **label for each tab**.
4. Save the section. Each tab appears as a labelled drop zone.
5. Add as many blocks as you want into each tab's region.
6. Save the layout.
## How it works
- In **Layout Builder edit mode**, each tab is shown as a clearly labelled
dashed box so the editor can see exactly which column they are dropping into.
- On the **front end**, a tab navigation bar is rendered and switching is
handled by lightweight vanilla JavaScript (no extra framework required). The
template uses Bootstrap grid classes (`col-lg-*`) for column layout, so a
Bootstrap-aware theme is recommended.
- The active tab and keyboard navigation (← →) are fully accessible via ARIA
attributes (`role="tab"`, `aria-selected`, `aria-controls`).
## Maintainers
- Eyad AlAnati