There are some very common branding and UI scripts that a lot of institutions run that will need to be rewritten with the change of UI. Most of these are pretty basic changes.
One in particular:
A lot of schools have added extra pull down menus to the top navigation menu. Our institution added "Library" and "Support" here. We will need to move these to the left side navigation replacing the with icons.
I know we got our code from our implementation manager from Instructure... the nice thing about this is that most institutions had similar code. I wonder if there will be any sample code for this that we could base our implementation on.
Totally agreed. In fact, in the comments of my feature idea that is now "Under Development," I mentioned that very thing. You may want to head over to and add your feedback there. I had done a mock-up of how it would look to move those items out of the sidebar and into the Admin fly-out panel, but it has disappeared and I haven't redone it.
We rolled out the new UI to our users over the break. I think the solution we came up with is a pretty good one (though I want to improve our icons... we simply picked from the built-in Instructure icons for now).
We used to modal window approach like the help menu uses rather than the slide out tray. There was no good way to get Instructure's slide out tray to work and hacking out our own looked too flaky.
Here is how our solution looks. Notice the library link on the left side. Clicking it pops up the following modal window:
Also very cool is that you can use an icon from the Canvas style-guide or an svg graphic (which is what is done in the example below).
We have made the plunge. I will admit I do not have the same ninja skills as Kenneth Larsen, but thought this will help.
In our old UI we had a customized button to access our Canvas tutorial courses. This was the last button appended to the identification bar. Interestingly enough, I was able to figure out how to create a psuedo hack, it will show up in this location on every page (sans the dashboard) that has content in the #right-side column.
Here is the (blunt instrument hack) JS override code 😕
//* Orientation Choices #right-side, .ic-sidebar-logo, .ic-sidebar-logo_image (append)
$('#right-side').prepend('<div class="al-dropdown_container"><a class="al-trigger Button Button--block" role="button" href="#" style="background: #0099e0; color: #fff">How to use Canvas <i class="icon-mini-arrow-down"></i></a><ul class="al-options" role="menu" tabindex="0" aria-hidden="true" aria-expanded="false"><li><a href="https://suu.instructure.com/courses/166813" target="_parent" tabindex="-1" role="menuitem">Student Walkthrough</a></li><li><a href="https://suu.instructure.com/courses/151520" target="_parent" tabindex="-1" role="menuitem">Faculty Walkthrough</a></li></ul></div><br />');
Another little hack we have is to have a link to our University calendar on the Calendar page in Canvas. This is what it looks like... (Yes you can also see our above hack here too.)
This is another addition to our JS override script
//* Calendar Customization === This is where a link to the SUU Academic Calendar is located top right on Calendar page.//
$('#calendar-feed').parent().prepend('<i class="icon-calendar-month"></i> <a href="http://email@example.com...firstname.lastname@example.org&ctz=America/Denver&gsessionid=_lJiWMqvVSpfkVl1KVgY3w/" target="_new">SUU Academic Calendar</a>');
So hopefully these little tricks may give you additional options.
Sorry, I noticed our solution's code wasn't displaying correctly. I switched the post to link to codepen instead... the built in syntax highlighting in the Canvas Community was tripping me up.
We also added support for svg images.
I think this is now a really complete solution to the need to be able to add menu items!
Thank you so much for sharing this!! I have a question: should I be able to take the supplied code and push it into my Canvas environment and see it working as-is? I know it will be Champlain links, etc. but as a starting point, should I be able to see a working model right away?
You should be able to just cut & paste this into your Global JS file. Test it on the "test" or "beta" site obviously.
Another issue we are currently running into with the placement of our "Toolbox" and "MPTC Help" menus (as shown above) in the current UI interface is that when instructors go to "Courses" >> "View All or Customize", their course list aligns to the middle of the screen just under "Courses". Basically, what is happening is that the white "MPTC Help" menu text is moving to the next line under "Courses" (but you can't see it on a white background). This makes seeing the course title and term the course is in more difficult to see in "View All or Customize". It's not moving on the Dashboard screen you see when you first sign in to Canvas or when you navigate to a course...just on the "View All or Customize" screen. We're not sure how to keep our "MPTC Help" menu with the blue area of Canvas no matter which screen you are on. We're using custom JS code in our global file.
That sounds like fun. Everybody else wants unreadable links breaking their interface, they are just afraid to admit it. If you want to share your custom JS code with me, I would be happy to take a look. Also, it looks like you probably have some overrides in your custom CSS to account for a wide logo, if you are willing to share what you have tweaked in your CSS, that would help as well. And one more thing, if you have a publicly visible course that I can look at, it may also be of benefit.