Skip to main content

Here's how you can create nested vertical or horizontal tabs in Drupal Form API:

  1. Define your configuration form using the Drupal Form API by creating a new form class that extends ConfigFormBase or FormBase.

  2. Add a vertical_tabs element to your form using the Drupal\Core\Render\Element\VerticalTabs class. This will create the top-level vertical tabs.

  3. Inside each top-level vertical tab, add another vertical_tabs element to create the nested vertical tabs.

  4. Add the form elements you want to appear inside each nested vertical tab.

Here's an example code snippet that demonstrates how to create nested vertical tabs:

use Drupal\Core\Form\ConfigFormBase;
use Drupal\Core\Form\FormStateInterface;
use Drupal\Core\Render\Element\VerticalTabs;

class MyConfigForm extends ConfigFormBase {

  public function getFormId() {
    return 'my_config_form';

  public function buildForm(array $form, FormStateInterface $form_state) {
    $form['top_level_tab_1'] = [
      '#type' => 'vertical_tabs',
      '#title' => $this->t('Top Level Tab 1'),

    $form['top_level_tab_1']['nested_tab_1'] = [
      '#type' => 'vertical_tabs',
      '#title' => $this->t('Nested Tab 1'),

    $form['top_level_tab_1']['nested_tab_1']['element_1'] = [
      '#type' => 'textfield',
      '#title' => $this->t('Element 1'),

    $form['top_level_tab_2'] = [
      '#type' => 'vertical_tabs',
      '#title' => $this->t('Top Level Tab 2'),

    // ... add more top-level tabs and nested tabs as needed ...

    return parent::buildForm($form, $form_state);

  public function submitForm(array &$form, FormStateInterface $form_state) {
    // Implement submit logic as needed


In this example, we create two top-level vertical tabs (top_level_tab_1 and top_level_tab_2). Inside top_level_tab_1, we create a nested vertical tab (nested_tab_1) and add a textfield element (element_1) inside it.

You can add more top-level tabs and nested tabs as needed to create the desired nested vertical tab structure for your configuration form.




Therefore logo
80 Atlantic Ave, Toronto, ON Canada
Call us: +1 4166405376

Let us know how we can help!