Quick Tabs
Create tabbed content blocks by combining views, nodes, blocks, or other QuickTabs instances as tab content with multiple rendering styles.
quicktabs
Install
composer require 'drupal/quicktabs:^4.0'
Overview
Quick Tabs provides a flexible system for creating tabbed content blocks in Drupal. Administrators can easily create blocks of tabbed content by selecting various content sources for each tab, including Views, nodes, blocks, or even nested QuickTabs instances.
The module features multiple rendering styles out of the box: a lightweight classic quicktabs renderer with built-in CSS themes (Pamela, On the Gray, Tabs Bar, Material Tabs), jQuery UI Tabs, and jQuery UI Accordion. Content can be loaded via AJAX for improved initial page load performance, and the module includes tab memory functionality using cookies to remember the user's last selected tab.
For developers, Quick Tabs offers a robust plugin architecture that allows extending both the types of content that can be displayed in tabs (TabType plugins) and the way tabs are rendered (TabRenderer plugins). The module also includes a Views style plugin that can render view results as tabbed content, grouping rows by a specified field.
Features
- Create tabbed content blocks combining multiple content sources (Views, nodes, blocks, other QuickTabs)
- Three rendering options: Classic QuickTabs, jQuery UI Tabs, and jQuery UI Accordion
- AJAX loading option - load tab content on-demand for faster initial page loads
- Four built-in CSS themes: Pamela, On the Gray, Tabs Bar, and Material Tabs
- Tab memory using cookies to remember user's last selected tab across page loads
- Hide empty tabs option to automatically hide tabs without content
- Views style plugin to render view rows as tabs grouped by a field
- Duplicate functionality to quickly create copies of existing QuickTabs instances
- Accessible tab interface with keyboard navigation support (arrow keys)
- Extensible plugin architecture for custom tab types and renderers
- Nested QuickTabs support - embed one QuickTabs instance inside another
- Custom CSS class support for individual tabs
Use Cases
Product Information Tabs
Create a block with tabs for different product information sections: Description, Specifications, Reviews, and Related Products. Each tab can pull from different Views or node fields, presenting organized product information without overwhelming the page.
User Dashboard with Ajax Loading
Build a user dashboard with tabs for Account Settings, Order History, Saved Items, and Notifications. Enable Ajax loading so only the active tab content loads, improving performance for pages with heavy content.
Multi-View Data Display
Use the Views style plugin to display a single view's results grouped by category, date, or any field. Each group automatically becomes a tab, useful for displaying events by month or articles by topic.
Accordion FAQ Section
Create an FAQ section using the accordion renderer where each question is a collapsible panel. Enable the collapsible option so users can expand multiple questions or collapse all for easier scanning.
Regional Content Blocks
Display location-specific content in tabs, with each tab showing content filtered by region using Views. Users can quickly switch between regional information without page reloads.
Nested Tab Navigation
Create a complex navigation structure by nesting QuickTabs instances. A main QuickTabs can contain other QuickTabs as tab content, enabling multi-level tabbed organization for detailed content hierarchies.
Tips
- Use the machine name wisely as it becomes part of the CSS ID and cannot be changed after creation. Choose descriptive, semantic names.
- For better performance with content-heavy tabs, enable Ajax loading to defer loading until users click each tab.
- The Views style plugin is powerful for dynamic tab content - group by any field to automatically create tabs from your data.
- Custom CSS classes can be added per-tab through the Custom Tab Class option, useful for applying specific styling to individual tabs.
- When using nested QuickTabs, ensure proper caching strategies as complex nesting can impact performance.
- Tab titles support limited HTML (img, em, strong, h2-h6, small, span, i, br) for adding icons or formatting to tab labels.
Technical Details
Admin Pages 5
/admin/structure/quicktabs
Main administration page listing all QuickTabs instances. From here you can view, edit, delete, or duplicate existing instances, and create new ones. Each row displays the instance name and storage type with available operations.
/admin/structure/quicktabs/add
Form to create a new QuickTabs instance. Configure the name, rendering style, tab content, and various options. Each instance creates a corresponding block for placement.
/admin/structure/quicktabs/{quicktabs_instance}/edit
Edit an existing QuickTabs instance. Same form as the add form but pre-populated with existing configuration.
/admin/structure/quicktabs/{quicktabs_instance}/delete
Confirmation form to delete a QuickTabs instance. This will also remove the associated block.
/admin/structure/quicktabs/{quicktabs_instance}/duplicate
Creates a copy of an existing QuickTabs instance with a new machine name.
Permissions 1
Hooks 3
hook_quicktabs_tab_type_info_alter
Alter the tab type plugin definitions. Allows modules to modify or extend the available tab content types.
hook_quicktabs_tab_renderer_info_alter
Alter the tab renderer plugin definitions. Allows modules to modify or extend the available rendering options.
hook_quicktabs_instance_alter
Alter a QuickTabs instance before it is rendered. Allows modifying tabs, options, or other properties at render time.
Troubleshooting 5
When Ajax mode is enabled, the content is loaded via a menu callback that only checks basic 'access content' permission. For sensitive content, either disable Ajax mode or ensure field-level access controls are properly configured in the content type display settings.
Ensure the js_cookie module is installed and enabled. Check that JavaScript is loading properly and no JS errors appear in the browser console. The cookie is set per QuickTabs instance based on its machine name.
The 'Hide empty tabs' option does not work in Ajax mode because content is loaded dynamically. To hide empty tabs with Ajax, content must be checked server-side before rendering, or disable Ajax mode.
Use the format %0, %1, %2, etc. to reference URL path segments in the arguments field. %0 is the first segment after the domain. Ensure the URL structure matches your argument placeholders.
Verify that the corresponding submodule (quicktabs_accordion or quicktabs_jqueryui) is enabled, and that the required dependency module (jquery_ui_accordion or jquery_ui_tabs) is also installed and enabled.
Security Notes 3
- Ajax mode security warning: When Ajax is enabled, tab content is accessible via a menu callback (/quicktabs/ajax/...) to any user with 'access content' permission, regardless of block-level access restrictions. Do not use Ajax mode for blocks containing sensitive information.
- Node content loaded via Ajax uses standard node_access checks, but field-level restrictions from modules like Panels may not apply. Configure field visibility at the content type display settings level.
- The module sanitizes tab titles using Xss::filter() with a whitelist of allowed HTML tags to prevent XSS attacks.