Here's how you can create nested vertical or horizontal tabs in Drupal Form API:
-
Define your configuration form using the Drupal Form API by creating a new form class that extends
ConfigFormBase
orFormBase
. -
Add a
vertical_tabs
element to your form using theDrupal\Core\Render\Element\VerticalTabs
class. This will create the top-level vertical tabs. -
Inside each top-level vertical tab, add another
vertical_tabs
element to create the nested vertical tabs. -
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.