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
To get started, import the Stan State - Sample Page with Tabs resource from Canvas Commons into one of your Canvas courses.
- Login to Canvas and click Commons in the left-hand Canvas menu.
- Search for "Stan State - Sample Page with Tabs". As soon as you start typing, results will appear. Select the sample page from the results.
- Click the blue Import/Download button and select the course you want to import into.
Phase II - Modify For Use
Once the page has been imported from Commons, click the Pages tool in the course to begin using it.
- From the list of pages, open the "Sample Page with Tabs" page.
- Click Edit.
- In the top list of links, replace the label text of each link with your desired navigation labels.
Note: for best results, click in the middle of the example name and start typing your repalcement, and then delete any extra characters. This will ensure the underlying HTML is not inadvertently broken.
- 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.
- 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.
- Modify the header and footer content of the document.
Note: it is strongly recommended that you retain the footer content at least. Use it to remind students to click each tab.
- Save & Publish the page.
Phase III - Delete Extra Tabs or Add Additional Ones
Delete Extra Tabs
To delete any unused tabs, simply highlight and delete the 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
- Click the HTML Editor link to switch to the HTML view of the page. Scroll up to the top of the editor.
- Highlight 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>
- Paste the code onto a new blank line immediately following the last list item. The new line should be above the
- Change the number 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>
Next, you will create the Tab content area that corresponds to the newly added tab link.
- Copy the following code below, be sure to include the '<' and '>' at the start and end:
- Paste the code immediately above the final
</div>tag on the page.
- Edit the code and change the number after 'tabs-' to match the number used in the navigation list. Very important!
- Return to the Rich Content Editor view of the page
- Edit the name of the new tab to match the navigation text created above, and add your content to the Tab area.
- Click Save.