This module provides a field type called "Horizontal Tabs" which consists of tab label and tab body elements. The number of allowed tabs can be set when adding the field to an entity. Tab labels can be set to display as either traditional tabs or as pill buttons.

Screencast of horizontal tab behavior

This module depends on the Bootstrap framework. It does not prescribe how Bootstrap should be integrated with the site, but presumes that it is integrated and that the tab JavaScript utility is loaded on all pages.

This implementation is compliant with WAI-ARIA guidelines for tab accessibility.

Options/Features

Display settings for the field formatter (i.e., "Manage Display") include:

  • Tab style: "Tabs" (default) or "Pills"
  • Tab orientation: "Horizontal" (default) or "Vertical"

Compatibility

  • Bootstrap 3, 4 or 5

The simplest way to integrate the required Bootstrap components is to use or sub-theme the Bootstrap Drupal theme (whose current stable version uses Bootstrap version 3).

If using with Bootstrap 4, you will need to include the `util.js` and `tab.js`
components. See https://getbootstrap.com/docs/4.0/components/navs/#javascript-behavior.

Installation & configuration

  1. After enabling this module, go an entity's "Manage fields" page and click "Add field."
  2. A new field type, "Horizontal Tabs," will be available.
  3. Follow standard Drupal field steps for adding the field.
  4. Under the "Manage Display" page, choose whether the tab headers should display as standard "Tabs" or "Pill buttons". See examples at https://getbootstrap.com/docs/4.0/components/navs/#javascript-behavior
Supporting organizations: 
Development & maintenance
AttachmentSize
bootstrap-horizontal-tabs.gif625.03 KB

Project information

Releases