1. What are 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.
Top of page

2. How to create tabs

Tabs can be created by:

  • site builders.

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

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.

Top of page

3. How to edit tabs

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'.
Top of page

4. Appearance and display options

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.

Top of page

5. Best practice

  • 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.
Top of page

7. Fields

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

Tabs structure

Field name

Required field?

Function

Title

Yes

Administrative title to help page editors identify the panel. This title won't appear on the page. Recommended format: Tabs: [Page the tabs will appear on]: [Purpose or topic of tabs]

Renderer

Yes

Leave as the default: 'foundation_tabs'.

Type

Yes

Leave as the default: 'Horizontal'.

Theme settings

No

Select one or more options to control the appearance and display of the tabs.

Deep linking to sections of content

No

Enables you to link to the page and have it display with a particular tab selected (other than the first tab).

Default tab

No

Leave as 'None'. The first tab will be selected by default.

Individual tabs

Field name

Required field?

Function

Tab title

Yes

Tab title that will appear on the page as the clickable text that allows users to toggle between tabs.

Tab type

Yes

Select the type of tab. Do not use 'qtabs' or 'callback'. Defaults to 'block'.

Tab content

Yes

Fields in this section change depending on the selected tab type.

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.

Field name

Required field?

Function

Select a block

Yes

Search or browse the drop-down list to select a mini panel.

Hide the title of this block

No

Leave this ticked. The title entered on the mini panel 'Content' screen will not display in 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.

Field name

Required field?

Function

Select a view

Yes

Search or browse the drop-down list to select a type of view. Defaults to 'admin_views_node'.

Display

Yes

Select a display mode for the view. The options depend on the selected view.

Arguments

No

If the view supports taxonomy filters, enter a taxonomy term ID to filter the view to items tagged with that term.

Use display title

No

Leave this unticked. The title of the view will not display in the tab.

Node

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

Field name

Required field?

Function

Node

Yes

Enter the node ID of the content type you want to display in the tab.

View mode

Yes

Select a display option for the content. Defaults to 'Full content', but you can other appropriate displays for some content types.

Hide the title of this node

No

Leave this ticked. The title (H1) of the content type will not display in the tab.

Top of page