Side Navigation

1. Place your cursor in the editor where you want the page navigation placeholder to go. Don't worry, the placeholder you see in Edit mode won't actually be part of the saved page your users see. It's just added so that the JavaScript can identify the side nav code in the HTML and then render the navigation menu in the top right.
2. Open the Add panel.
3. Select Side Nav.
   
   

To change the title of your Side Nav Button:

1. Place your cursor in the Side Nav placeholder in the editor.
2. Make sure you are in the Edit tab and that the Side Nav tool is selected as the active tool.
3. Update the text in the Launch Button Text input box.

The Side Navigation menu links are constructed automatically, based on the Navigation type you've selected.

This Page

Links will represent the Header structure you have built into the page. 

The best way to organize content for this type of navigation is to use Content Blocks to chunk up content into main sections, and use proper H4-H6 headers for sub-sections within those Content Blocks.

Then, check for proper outline flow with our Heading Checker.

Module

You will choose which module you want featured in the navigation, and all of the items within that module will be available as links.

Course

The navigation will consist of all of the modules in your course, in a collapsed format. Users can choose to expand any module and select from its content items.

1. Place your cursor in the Side Nav placeholder in the editor.
2. Make sure you are in the Edit tab and that the Side Nav tool is selected as the active tool.
3. Select the Launch Button Icon button.
   
4. Choose your icon.

1. Place your cursor in the editor, inside the Side Navigation placeholder.
2. Open the Edit tab.
3. Select Side Nav placeholder text in the RCE
   
   
4. Select the   Delete Side Nav icon on the action toolbar menu.

The top right of this page has a Side Navigation element you can interact with.

Here are some screenshots of other examples:

Side Navigation Location

Page Navigation

Module Navigation

Course Navigation

Please consider the following when choosing to use Side Navigation:

• Since the Side Navigation: This Page menu is constructed from the heading structure on your page, please:
  • Do not attempt to use a Side Navigation feature on a page without headings
  • Use the Heading Checker tool to make sure your heading structure is correct.
• The fixed position of the Side Navigation cannot be adjusted from the Sidebar.  We've placed the menu in the most convenient place we can, but it is possible that it may overlap with other content you might have on the right side of the page in Canvas.

This navigation feature was previously only available on the syllabus page.  It was a feature that was enabled by default and required a hidden gem HTML class to disable it.

With the new sidebar, this feature can now be added to any page.  It is no longer enabled by default so it will only appear on pages where the Side Nav is added.