Tabs

Tabs enable users to toggle through different chunks of content while staying in the same place on the page. Users can only view content in one tab at a time. The currently selected tab is highlighted.

Tabs that can be added to panel pages are called 'quicktabs' in Drupal. If your content isn't suited to a panel page, you can use the structured page content type to organise content into tabs.

Use tabs when:

• you have related information that can be split up into 2–4 clear sections
• users only need to view one tab at a time
• users don't need to read through all tabs or compare content across tabs
• you can give each tab a brief and meaningful title that allows users to easily choose between them.

Tabs shouldn't be used when:

• users would need to switch between or compare tabs to understand the content.

Tabs can be created by:

• site builders.

Tabs display content that is created elsewhere on your site, so first you'll need to:

• create a mini panel
• create a node page, or
• using taxonomy and tagging to enable existing content to display.

Once you've created or tagged your content, you'll need to:

• create the tabs structure
• create individual tabs
• add the tabs to a panel page.

Step 1: creating a tabs structure

1. From the black Drupal menu at the top of the page, go to 'Structure' > 'Quicktabs' > 'Add Quicktabs instance'.
2. Enter a title to help page editors identify the tabs. This title won't appear on the page. The recommended format for titles is Tabs: [Page the tabs will appear on]: [Purpose or topic of tabs]. For example, for tabs that will appear on a site homepage and list news and events, use the title Tabs: Home: News and events.
3. The 'Renderer' must be 'foundation_tabs'.
4. Make changes to the tabs appearance under 'Theme settings' as required.
5. Leave the default tab as 'None'. The content of the first tab will be visible when the page loads.
6. Tick 'Hide empty tabs' to ensure that tabs with no content will not display on the page.

Step 2: creating individual tabs

In the table at the bottom of the screen:

1. Enter a tab title. This title will appear on the page as clickable text that allows users to toggle between tabs.
2. Select the appropriate tab type for the content you want to display. You can use multiple tab types in one set of tabs. Choose from:
   • block to display a mini panel, which enables you to use more complex layouts for content
   • view to display a view, which lists information dynamically and can be filtered by a taxonomy term. If you need other filtering options, add the view to a mini panel and use the 'block' tab type to add the mini panel to a tab
   • node to display the content of any content type under the Drupal 'Content' menu.
3. Fill in all required fields for the tab type and as many optional fields as necessary.
4. Click 'Save.'

Step 3: adding tabs to a panel page

1. Click 'Customize this page' in the black Drupal menu at the bottom of the page, and then click the plus icon (+) in the blue box at the top of the page.
2. Select 'Miscellaneous' from the side menu, and then click on the title of the tabs you want to add.
3. Click 'Finish' to add the tabs to the page.
4. Click 'Save' in the black Drupal menu at the bottom of the page to publish the changes.

You may need to refresh the page to see the tab content.

Site builders can:

• edit the appearance and other settings of a tab's structure
• edit the title, type and selected content for individual tabs
• edit the source of tab content (mini panels, content types or views)
• reorder or delete individual tabs.

Editors and site coordinators can:

• edit content types that are used in tabs
• tag content with taxonomy terms to affect whether it appears in views used in tabs.

Editing tabs

1. From the black Drupal menu at the top of the page, go to 'Structure' > 'Quicktabs' > 'Add Quicktabs instance'.
2. Click the 'Edit' link for the relevant set of tabs.
3. Edit the tabs as required.
4. Click 'Save'.

Reordering tabs

1. From the black Drupal menu at the top of the page, go to 'Structure' > 'Quicktabs' > 'Add Quicktabs instance'.
2. In the table at the bottom of the screen, you can either:
   • click and hold the four-point axis icon at the left of the row, and drag and drop the rows into the order you want
   • click 'Show row weights' above the table and adjust the numbers in the 'Tab weight' column to reflect the order you want.
3. Click 'Save'.

Deleting tabs

1. From the black Drupal menu at the top of the page, go to 'Structure' > 'Quicktabs' > 'Add Quicktabs instance'.
2. In the table at the bottom of the screen, click the 'Delete' link for the relevant tab.
3. Click 'Save'.

Appearance and display options are controlled under 'Theme settings'.

To control the appearance of tabs, you can select one or more of:

• Full width extends the horizontal line between the tab titles and content to the full width of the panel – not just the width of the tabs. This won't work if the tabs are wrapped in a section style.
• Shaded adds a shaded background to the tabs.
• Centered centres the tabs within the panel instead of left-aligning them. Most tabs are displayed as centered.
• Boxed adds an outline around the sides and top of each tab title.

If you need to adjust the width of the tabs or space around tab content, you may also need to select:

• Makes the tabs__content behave as a .row forces tab content to be contained within the central page column instead of spreading full width of the screen. Used if the tab content does not have a section style applied.
• Vertically space content adds space above and below the tab content. Used if the tab content doesn't have its own vertical spacing.

Only select these options if required. Most tab content will display with the correct width and sufficient spacing by default.

• Use a maximum of 4 tabs on a page
• Use brief and clear tab titles (1-2 words)
• Add the content that's relevant to most users in the first tab
• Don't nest tabs inside other tabs.

• Creating and editing panel pages
• Mini panels
• Content types
• Taxonomy and tagging.

Complete all required fields and as many optional fields as necessary to provide the best user experience.

Tabs structure

Individual tabs

Tab types

Select the appropriate tab type for the content you want to display in each tab. Each tab type has different fields to complete.

Block

Use the 'block' tab type to display a mini panel within the tab.

View

Use the 'view' tab type to display a view within the tab. Views can be filtered by taxonomy term. If you need other filtering options, add the view to a mini panel and add the mini panel to the tab.

Node

Use the 'node' tab type to display the content of any content type under the Drupal 'Content' menu.