Custom Menu Items for New UI

[kenneth_larsen]

  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.

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

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)

[rlangley3]

@Kenneth Larson

Thank you for the code from GitHub on adding a custom menu item. I am not a JavaScript master by any stretch but it was easy to apply and  is working nicely, except for one small bug. My custom panel does not seem to have the same "ease-out" transition applied to it as the Account panel. When clicked, it opens abruptly and is noticeable compared to the subtle transition of the Account panel. Do you have any advice on how to correct this?

Thank you in advance and I appreciate your help and guidance!

[tfullwood]

Hey  @rlangleyadmin ​

There isn't an easy way for us to modify the tray component that handles the pop out menu for account, courses, etc... This script just emulates a lot of this basic structure. Because of this there are a few limitations to the script, this is one of the limitations. I don't have any good ideas for creating this effect off the top of my head. But you're more than welcome to mess around with the script, the background overlay class is added on line 96.

[fariborzm]

I agree with everyone that having a way to add a new menu item with the associated tray which can contain our custom links would be extremely helpful.

If that is not an option, would it be possible to provide us a way to add custom links to the existing menu items?  For instance, we could get by with adding a couple of custom links below the All Courses link in the Courses menu.

[abunag]

Hi Kenneth,

This is a great tool you've built here.  Especially great for those of us who are put into the position of setting up the UI but don't have experience with JavaScript. 

I'm trying the "react-tray-by-role" JS file, and can see how to change the links and text for those links, but it seems the script isn't adding an icon:

Do you know where I went wrong here?  Or what line(s) I should be tinkering with?

[kenneth_larsen]

Hi  @abunag ​,

First off, credit where credit is due, the GitHub implementation is the genius of  @tfullwood ​.

Second, I had the same problem with the icon. If you find "icon-resources" in the code and replace it with "icon-folder", that will give you the folder icon.

[abunag]

My reading comprehension is apparently as good as my skills with JavaScript. 

Thanks for the fix, and thanks Trevor.

[tfullwood]

Hey  @abunag ​

I took a quick look at your instance. It looks like you're missing the CSS file. If you upload this CSS file​ to your instance as well it should take care if the icon issue (it'll also resize the icon so it's the same size as the other icons on the menu).

Let me know if that takes care of it for you.

[abunag]

Hi Trevor,

Thanks for the advice - I'll make sure to add the CSS file.  I'm actually only testing this on Beta, as I was planning to roll it out when we switch to New UI in a few months.

[james_vlisides]

This is fantastic help, and I have had a lot of fun working on using your code in our instance. 

I am wondering about the "react-tray-by-role" code: how does Canvas tell if an user is a Teacher/Admin/Student just based on their login? Some users are both Teacher and Student, and I am not sure how this code would prioritize one over the other.

This matters because, for example, I may not put the Student Portal link in the tray for a Faculty login, but if that Faculty member is also a student in a certain course, they will need access to that. [So I may have to put both in anyway]. 

I'm imagining it has something to do with the base roles in permissions, and assuming it would prioritize their highest role in any registered course?

[kenneth_larsen]

There is a JavaScript variable set by Canvas that lists the roles for the current user (Admin, Teacher, Student, or User). You can use JavaScript to check this list and display content based on whether the user has a given role. As long as you write your code properly, each user can see content available for any of their roles. Open your browser's JavaScript console and type ENV.current_user_roles and you will see a list of your roles in Canvas.