Drupal is a registered trademark of Dries Buytaert
drupal 10.6.8 Update released for Drupal core (10.6.8)! drupal 11.3.9 Update released for Drupal core (11.3.9)! drupal 11.3.8 Update released for Drupal core (11.3.8)! drupal 11.3.7 Update released for Drupal core (11.3.7)! drupal 11.2.11 Update released for Drupal core (11.2.11)! drupal 10.6.7 Update released for Drupal core (10.6.7)! drupal 10.5.9 Update released for Drupal core (10.5.9)! cms 2.1.1 Update released for Drupal core (2.1.1)! drupal 11.3.6 Update released for Drupal core (11.3.6)! drupal 10.6.6 Update released for Drupal core (10.6.6)! cms 2.1.0 Update released for Drupal core (2.1.0)! linkit 7.0.14 Minor update available for module linkit (7.0.14). diff 2.0.0 Major update available for module diff (2.0.0). masquerade 8.x-2.2 Minor update available for module masquerade (8.x-2.2). video_embed_field 3.1.0 Minor update available for module video_embed_field (3.1.0). bootstrap 8.x-3.40 Minor update available for theme bootstrap (8.x-3.40). menu_link_attributes 8.x-1.7 Minor update available for module menu_link_attributes (8.x-1.7). leaflet 10.4.8 Minor update available for module leaflet (10.4.8). single_content_sync 1.4.15 Minor update available for module single_content_sync (1.4.15). eca 3.1.2 Minor update available for module eca (3.1.2).

adv_lb_tabs

No security coverage
View on drupal.org

# 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

Activity

Total releases
1
First release
May 2026
Latest release
15 hours ago
Release cadence
Stability
0% stable

Releases

Version Type Release date
1.0.x-dev Dev May 7, 2026