Cidi Labs: Add Tabs to a Content Page

A tab area is an advanced element used to display individual blocks or panels of content .The panels that can be displayed by clicking the title for each tab. The titles appear in one row like folder tabs. This tool interface is used in combination with content blocks; create a content block and then add the tab element to that area.

This resource shows you how to use Cidi Labs content blocks for a page, and the process is the same for assignments, discussion, announcements, and the quiz details page.


  1. Click edit on any page in Canvas.
edit a page

2. Launch the Design Tools interface by clicking on the rocket icon in the upper right-hand corner of the screen, or by using the short-cut keys Option-Shift-D on a Mac or Alt-Shift-D on a PC.

Design Tools rocket launch icon.

3. Click on the Design Tools settings icon (gears).

design tools settings option

4. Select the “advanced” comfort level option, or scroll down to enable just the navigation bar option.

advanced comfort level option in the design tools settings

5. Close the settings editor.

the design tools settings window

6. Save the page.

save option on the page editor screen

  1. In the Canvas pages screen, choose “view all pages.”
edit button on the page screen

2. Launch the Design Tools interface by clicking on the rocket icon in the upper right-hand corner of the screen, or by using the short-cut keys Option-Shift-D on a Mac or Alt-Shift-D on a PC.

design tools launch icon

3. Choose “+ Add Content Blocks” in the Design Tools editor.

add content blocks option in the design tools menu

4. Choose the content blocks from the preset options, or add your own in the text field provided in the pop-up window. You will place your tab within the content block.

5. Save your new page.

  1. Select the Add Advanced Elements
Select the Add Advanced Elements panel

2. Place the cursor in the Rich Content Editor where you want the panel widget to be created. Click  Add Panel Widget at Cursor. Then select the Tabs option.

Selecting the Tabs Option

3. Select Add Panel. You will see a panel created in the Rich Content Area of your page. Add a Table Title to the in field provided. In the example image below we named our panel tab “Outcomes”

Adding a tabs type, panel, and give it a title.

4. You may add multiple tabs by selecting Add Panel for as many tabs as you need. In this example we have created three tabs named them Outcomes, Reading, and Overview.

Adding multiple tabs and giving them titles.

5. Add your text content to the tabs. You may also place images and movies within tab areas.

Tabs with content added into the fields.

6. Click Save. Your panels should look similar to the example image.

Cidi Labs Tabs final example

Quick guide for adding Cidi Labs tabs to a page, assignment, or quiz area.

Last Updated January 14, 2023