Vertical Tabs Responsive module edit node
Vertical Tabs Responsive module manage display
Vertical Tabs Responsive configuration page

This module responsifies vertical tabs in admin pages. You will have Drupal 8 like vertical tabs with only enabling it:

  • For desktop resolutions vertical tabs will appear in a right sidebar. However, you can also choose vertical tabs to appear on left sidebar through module's administration page.
  • For mobile resolutions vertical tabs will appear at the bottom of the page.

You can choose following options on module's administration form:

  • Append show/hide button to vertical tabs top. This allows users to dynamically hide and show vertical tabs.
  • Collapse all vertical tabs by default.
  • Which side the vertical tabs will be on wider screens.
  • Width of content and vertical tabs (in percentage).
  • Width which sets the breakpoint between mobile and desktop versions of vertical tabs.
  • You can specify a blacklist of paths where this module should be disabled.
  • Restrict responsified vertical tabs per role.
  • Option to enable module on frontend
  • Whitelist to force vertical tabs to be responsive

It has been tested with these administration themes:

Integration with Field group module

This module is compatible with add/edit node forms that use "Fieldsets", "Horizontal tabs" and "Vertical tabs" created with Field Group module. Notice if you create your custom vertical tabs for a content type with Field group, Vertical Tabs Responsive will render all your custom vertical tabs together with drupal's standart vertical tabs!

Whitelisting & Blacklisting

This module tries to detect automatically forms where vertical tabs could be responsified with no side effects. If you have a form where vertical tabs are not responsified you could try whitelisting it. On the other hand, blacklisting is useful when this module automatically responsifies vertical tabs of a form you wouldn't want to be responsified.

Common blacklist paths:

  • admin/content/file*
  • admin/config/regional*
  • admin/structure/menu-position*
  • admin/config/development/jquery_update
  • admin/config/content/formats*
  • admin/config/content/ckeditor*
  • admin/config/content/biblio*
  • admin/config/media/flexslider*

Known issues

  • Don't use this module together with Role Theme Switcher module (won't fix).
  • Don't use this module together with Node form columns module because it may break a bit the style of node form pages (won't fix).

Similar modules

  • Responsive Vertical Tabs (sandbox): This module does the same as mine except that it doesn't allow configuration of content & vertical tabs width. However, this module is not compatible with fieldsets and horizontal tab groups. I tried to fix his code but finally I found it much easier to to do it from scratch. Some of this module's code is based on this module.
  • Node form columns: This module doesn't responsify vertical tabs but it allows you to put fields (including vertical tabs) on the right side or in the footer of node form pages.

Recommended modules

  • Vertical Tabs Config: This module allows you to decide vertical tabs order and to hide vertical tabs on add/edit node pages depending on content type and role.

IMPORTANT: If you find any bug, please let me know. Thank you!

Supporting organizations: 
developed the module

Project information

Releases