Showing results for 
Show  only  | Search instead for 
Did you mean: 
Community Member

Has anyone been working on scripts for the new Beta UI?

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.



52 Replies

Hi  @c1224994 ​,

Congrats on opportunities to pick up something new. Two things with the code you pasted:

  1. You are calling the function from inside the function. Move your addMenuItem() calls below the }
  2. There is an issue with pasting code in the editor for the line of the code that sets the icon (I fixed this in the code I provided above). Change:
    • iconHtml = '<i class=" + icon + "></i> ';
    • To
    • iconHtml = '<i class="' + icon + '"></i> ';

In regard to icons, you can find additional icons in the Canvas Style Guide​. Just replace the 'icon-off' with the class for the icon you would like to use.

Make sure you check your new layout on multiple screens and devices because the left sidebar will not scroll if your icons are off the page and the links you are adding may be lost.

Good luck

Thanks Kenneth. I am not sure if it is because I am testing in beta - but it will only work intermittently.

That's strange, I have mine running in beta (the only place we have the new UI turned on) and I haven't noticed any issues, but that may just be because that is not where my attention is focused. Try wrapping the whole thing with a document ready function and see if that makes a difference:

$(document).ready(function() {



I will give you an update after our beta instance is back up and running correctly. I started to notice that after I would upload a new js file in the theme editor, it was still holding on to the previous version.

Thanks for all your help.

Working like a charm! Thanks so much for all your help!

PopOutMenusNewUI.jpgHi  @kenneth_larsen ​...

This would be of interest for my team.  We recently added to new menus to the top of our Canvas instance as shown in this image: "Toolbox" and "MPTC Help".  Each menu contains four items.  We've not enabled the new UI yet (probably not until this Summer).  It would be nice to retain the two menu items and the links within there in some capacity.  Otherwise, we're going to have to come up with some other method for our faculty to easily access the links in those menus.

Are these links something that is only of use to faculty? If that is the case, when I figure this out, I will add an option of whether the links are for students, teachers, admins, or all of the above.

Hi  @kenneth_larsen ​...

Yes, these are only links that our faculty and adjuncts see.  We, as admins, also see them.  Students do not.

Hey  @chofer ​, Jeremy,  @buellj ​,  @jblumberg , and any others interested in this topic. I have not had time to figure out how to recreate a slide-out panel for the left hand navigation and thought we should see if we can get Canvas to add this as a feature. I have created a feature request. I will add another comment when it opens for voting. Please feel free to share and add in your two cents.

Thanks Kenneth.

I am going to look into the slide out tray tomorrow with our web programmer and determine what is involved.