Canvas How-To: Create Tabs on a Page

Introduction

By adding navigation tabs to a Canvas page, you can use that page to present multiple content "areas" without the need to create a separate page for each area.  This page contains resources for instructors to use for creating tabbed navigation within a Canvas page.

Overview of the Process

Video courtesy of Gregory Beyrer, Cosumnes River College

Phase I - Import Sample Page from Canvas Commons

Tip: Open Canvas in a new browser tab.  Switch back and forth between these instructions and your course as you follow the following instructions.

To get started, import the Stan State - Sample Page with Tabs resource from Canvas Commons into one of your Canvas courses.

1. Login to Canvas and click Commons in the left-hand Canvas menu.
2. Search for "Stan State - Sample Page with Tabs".  As soon as you start typing, results will appear.  Select the sample page from the results.
3. Click the blue Import/Download button and select the course you want to import into.

Direct link to the resource

Phase II - Modify Template For Use

Once the template page has been imported, click the Pages tool in the course to begin using it.

1. From the list of pages, open the "Sample Page with Tabs" page.
2. Click Edit.
3. 
   In the top list of links, replace the label text of each link with your desired navigation labels. The label text is "Tab One", "Tab Two", "Tab Three", etc.
   Note: for best results, click in the middle of the example name and type your replacement. Then delete any extra characters. This will ensure the underlying HTML link is not inadvertently broken.
4. In the main content area, replace the title text for each content area to match the navigation label.
   Note: as above, click in the middle of the example and start typing your replacement. Clean up extra characters before and after your text.
5. Replace the placeholder text for the "Tab 1 paragraph content" paragraphs with your desired content.
   • Repeat Step 5 for the other Tab content areas you will use on this page.
6. Modify the header and footer content of the document. This is where your main page content for the tab will go.  This is what displays when a user clicks the tab for this item.
   Note: it is strongly recommended that you retain the footer content at least. Use it to remind students to click each tab.​
7. Save & Publish the page.

Phase III - Delete or Add Tabs

Delete Extra Tabs

To delete any unused tabs, simply highlight and delete the entire item in the top list of navigation links as well as the tab title and sample paragraphs in the Tab content area.

Add Additional Tabs

Adding additional tabs involves editing the underlying HTML of the page. It's not hard, but feel free to contact oat@csustan.edu if you would rather not do it yourself.

1. Click the HTML Editor link to switch to the HTML view of the page. Scroll up to the top of the editor.

   

2. Select and copy the code for the last item in the tab navigation list.  It will be something like:
   <li><a href="#tabs-5">Tab Five</a></li>
Example:

   

3. Paste the code onto a new blank line immediately following the last list item. The new line should be above the final </ul> tag.
4. Change the number in the href element after '#tabs-' and the name of the tab so the numbers appear in consecutive order.  The final code will something like this:
   <li><a href="#tabs-6">Tab Six</a></li>
Example:
   

Next, you will create the tab content area that corresponds to the newly added ab link.

5. Copy the following code below, be sure to include the '<' and '>' at the start and end:

   <div id="tabs-5">
<h2>Tab Five Title</h2>
<p>Tab 5 content paragraph 1</p>
<p>Tab 5 content paragraph 2</p>
</div>

6. Paste the code immediately above the final </div> tag on the page.
   Example:

   

7. Edit the code and again change the number after 'tabs-' to match the number used in the navigation list. Very important!
8. Return to the Rich Content Editor view of the page.
9. Edit the name of the new tab to match the navigation text created above, and add your content to the Tab area.
10. Click Save.