Tabs: How to create a box with tabs or a dropdown menu

* decoration

The following tutorial will teach you how to create a box with tabs or a dropdown list that allow users to switch between different pieces of content, as seen in the example image above.

Prerequisites

For the purpose of this tutorial:

  1. You need to have webmaster-level access or higher.
  2. You must be somewhat familiar with creating and working with snippets, mini panels and panel pages.

Examples

As of writing, here are examples of tabs or dropdown lists on University of Ottawa websites that leverage the method described in this article.

Step 1: Create the content to be used as tabs

The very first step is to determine what type of content you want to appear under each tab. Generally, for blocks of text, you should be creating general content snippets for this purpose. However, you could also use other things like mini panels or dynamic content lists (DCLs) for each of the tabs.

For this tutorial, we will be working with general content snippets:

  1. From the administrative toolbar, navigate to Content.
  2. At the top-right of the screen, click on the tab Snippets.
  3. At the top of the page, click on the link Add content snippet and select General content snippet.
  4. Fill out the values as needed:
    1. Title: Leave blank. The title of the tab will be pulled from elsewhere.
    2. Body: Enter the main content of a single tab in the Body field.
    3. Label: Enter an administrative label. Typically, it is recommended to follow the format "Name of page - Name of content".
    4. Revision log message: Enter a description of your changes in the revision log.
  5. Once done, click on the button Save and repeat these steps for every tab you need.

Step 2: Create a mini panel and format the content as tabs

  1. From the administrative toolbar, navigate to Structure and then Mini panels.
  2. At the top of the page, click on the link Add to create a mini panel and proceed as follows.
  3. Settings: Enter an administrative title for the mini panel. For example, "Page name - Tab group - Mini panel". Click on the button Continue.
  4. Context: Ignore this step and click on Continue.
  5. Layout: Set the Category to "uOttawa - 1 row" and select the layout "B". Click on Continue.
  6. Content:
    1. Click on the top-left gear icon of the Center region. From the dropdown list, click on Add Content and then add the content you want to use as tabs. For this tutorial, find the snippets you created in Step 1 and add them with the view mode "Content Body".
    2. The next step is to style each of the snippets you just added. For this, click on the top-right gear icon of one of the snippets. From the dropdown menu, under Style, select Change. A window will pop up. Select Component Styles and click on the button Next.
    3. On the following page, set the Display Mode to “Tabable”. Three boxes will appear. Add the English and French titles of the tabs in the Title fields that appear at the top; this title will become the tab's title. Then, in the field Display Mode Anchor, provide an anchor name that could be used to directly link to this section (e.g. …/page-name#anchor-name). Avoid all accents, spaces and punctuation.
    4. Once done, click on Save.
    5. Repeat the three steps above for each of the items (snippets) that you added to the mini panel.
    6. Afterwards, click on the top-left gear icon of the Center region (yes, the left one). From the dropdown list, under Style, click on Change. A popup window will appear. Select Component Styles and click on Next. Then configure the following:
      • Display Title?: If desired, select “Yes” and then provide the title for the entire mini panel (e.g. “Foire alimentaire du UCU” in the example picture at the top of this article) .
      • Format: Set the format to “Tab Group”.
      • Variant: Setting the variant to “Classic, Left-aligned” will give a list of horizontal tabs like in the picture above. “Condensed with List” will give a dropdown menu with a secondary list of links.
      • Container Type: If desired, set the container type to “Full”.
      • Spacing: Configure the spacing as necessary.
  7. Once done, save the entire mini panel. Do not worry about the error messages that will appear; you can safely ignore them.

Step 3: Add the mini panel to a page

  1. Navigate to Structure and then Pages.
  2. Find the page to which you wish to add the tab box you created and then click on Edit.
  3. In the left menu, select Content.
  4. Click on the gear icon at the top left of a region and select Add Content from the dropdown list.
  5. A new window will pop up. In the left menu, click on Mini panels and select the mini panel you created earlier in Step 2.
  6. Once done, you can simply save your changes by clicking on the button Update and Save.
» Submit feedback
    Topics: 
  • Support
    Types: 
  • Tutorials
Back to top