Custom Menu Items for New UI

  This idea has been developed and deployed to Canvas

 

  Idea open for vote Wed. January 6, 2016 - Wed. April 6, 2016  Learn more about voting...

 

I have had discussions with a number of institutions looking for a way to add custom items to the left hand navigation in the new UI.

Adding custom menu items

Additional Navigation Menu Item

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

Like these schools, we have some items we have customized for our faculty and students that we would like to bring over to the new UI.

137362_Screen Shot 2015-12-03 at 10.36.47 AM.pngScreen Shot 2015-12-03 at 10.36.47 AM.png

I have created some JavaScript code to add an individual item, but it would be great if there was a way to add an item that had a slide out list like the other navigation items in Canvas

137363_Screen Shot 2015-12-03 at 10.41.38 AM.pngScreen Shot 2015-12-03 at 10.41.38 AM.png

The icing on the cake would also be the ability for the navigation to be targeted to a user's roles (additional resources for teachers verses resources for students) and if there was a way to choose an icon.

 

I understand that there is limited space in the left navigation for smaller screen sizes, but this would be a wonderful addition to the existing customization options in the new UI.

 

 

  

  Comments from Instructure

 

For more information, please read through the Canvas Production Release Notes (2016-08-27)

114 Comments
tfullwood
Instructure
Instructure

As  @kenneth_larsen ​ mentioned there is an array of user roles set by Canvas. This script utilizes the user role array to determine the type of user. The tray by role has three options, teachers and admins, students, and all other users. Faculty and admins won't see the links for students and vice versa. So if you have a faculty enrolled in say a professional development course as a student, they won't see the student links in the resource tray, they will only see the faculty and admin links.

Also, the Github repo this script was added to will be getting replace with this repo. Future updates, will be made here.

Finally, for reference for other users. There are now two JS files in the Resource Tray Github​. The standard tray will show links for all users, the tray by role will show different links based on the type of Canvas user. To implement the tray select one of the two JS files and upload to Canvas. You'll also need the CSS file regardless of which JS file you use.

fariborzm
Community Novice

I love this solution, but has anyone else noticed that when you mouse over the icon it turns grey?  Is there a way to stop that from happening?  (Oddly enough, if you click the menu, then close the menu, then mouse over the icon again it doesn't turn grey.)

tfullwood
Instructure
Instructure

 @fariborzm ​, I hadn't noticed this until you mentioned it. The CSS below should take care of it (although I haven't tested much, so let me know if you have any issues with it).

#menu i.icon-resources {

    color: #fff;

}

Chris_Hofer
Community Coach
Community Coach

Thanks  @tfullwood ​!  I was also wondering about this, and your code worked perfectly!  Smiley Happy

fariborzm
Community Novice

Thanks Trevor, it works for me as well.

Thanks again!

jtorres1
Community Contributor

I can't seem to get my icon to appear. Here's the CSS. Any ideas?

#custom_nav .menu-item-icon-container {

    position: relative;

    left: -4px;

}

#custom_nav .menu-item__text {

    margin-top: 15px;

}

.icon-message {

  position: relative;

  left: -2px;

}

.icon-message:before {

  content: "\f13c";

}

.icon-message[class*=icon-]:before, .icon-message[class^=icon-]:before {

  font-size: 20px;

Chris_Hofer
Community Coach
Community Coach

I am not much of a coder...so I'm not sure that I'll be able to provide lots of help.  Have you tried replacing the word "message" in your lines of code with the word "resources"?  Your code looks almost exactly like ours with the exception of that and a couple lines for the font size and color.

jtorres1
Community Contributor

I swapped Resources for Message per the style guide to get the icon for an envelope.

fariborzm
Community Novice

Did you also replace any occurrences of icon-resources in the javascript with icon-message?

jtorres1
Community Contributor

I did, but I'm also the opposite of a JS Master!