# 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
Project information
- Project categories: Administration tools, Content editing experience, Site structure
- Ecosystem: Drupal core, Layout Builder
- Created by eyad alanati on , updated
Stable releases for this project are covered by the security advisory policy.
There are currently no supported stable releases.

