Vertical Tabs Responsive

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:

• Seven
• Adminimal
• Shiny
• Commerce Kickstart Admin Theme
• AdaptiveTheme (AT Admin)
• Bootstrap

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!

Sponsorship