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
kenneth_larsen
Community Champion

So,  @tfullwood ​ put together some JavaScript to get pretty close to what I am hoping for. You can find the code on GitHub​. While I still hope Canvas will bake this functionality into the core product, Trevor gets a gold star from me for coming up with a workable alternative.

Here are some screenshots:

slideout1.pngslideout2.png

We have not switched over to the new UI yet so I have not played with this a ton, but I like what I have seen.

Here are the only real drawbacks that I have discovered:

  • It covers the left hand navigation with an overlay. I mentioned this to Trevor and he said that it was intentional because it breaks things if you click on one of the other navigation links while it is open.
  • For me the 'icon-resources' class that is used did not work but I replaced it with 'icon-folder' and it works quite well.

My wish list of tweaks (all of which should be completely doable):

  • Customize the link array for teacher, student or admin.
  • Hide the panel if you click anywhere outside of it.
mcsmith
Instructure Alumni
Instructure Alumni

Thanks for all the work you put into for this feature request. Our UX team is working on workflows currently. However, no development is currently underway. We have not committed to any release dates on this project at this time. Stay tune for updates!

jbrady2
Community Champion

Our institution also currently adds student and instructor resources to the left menu (we are still on the old UI and will switch this summer). These links are rather useful, and it would be nice to be able to keep them there. I especially like the image submitted by  @kenneth_larsen ​ of the Resources Folder created by  @tfullwood ​. This would be ideal as it would allow access to the resources while not cluttering up the navigation menu, which is an issue in our institution's current iteration of Canvas.  @kenneth_larsen ​ The one issue I could see with specifying resources based on roles is that faculty and instructional designers often have multiple roles, so it would probably have to be implemented as a check box system where the admin could see what roles the individual is filling and then check the boxes to allow access to the resources for each of those roles, but it should be doable.

kenneth_larsen
Community Champion

 @jbrady2 ​, I completely agree with the multiple roles part. We have a rotating banner that we use to announce workshops for instructors or targeted messages to students. I create an array for the banners and then push different banners into the array based on the roles of a current user. I then use the final array to build out the list of banners that the user will see. Someone that is only a teacher will only see teacher banners. Someone that is only a student will only see student banners. Someone who is both teacher and student will see all of the banners.Screen Shot 2016-01-28 at 9.25.08 AM.png

Chris_Hofer
Community Coach
Community Coach

Resources.jpgHi  @kenneth_larsen ​ and  @tfullwood ​...

In line 16 of the CSS code on GitHub, what is "f13c"?  Also, my co-worker and I are not clear on how we could change the folder image above the word "Resource" to something else from the Style Guide...as shown in this image.  If we replace the folder image, would the icon we use be the same size as the folder image?

tfullwood
Instructure
Instructure

Hi  @Chris_Hofer ​

Line 16 references an icon in core Canvas, it is the same content as the icon-folder class. If you'd like to change it you can look at the other icons available in the common css file (this should be around line 13 in the head when you load Canvas). If you find another icon in the css file you just change the content type on line 16 of this file. It will be a little time consuming to find an icon. And yes, the font-size for the icon is set on line 20 of the css file.

lmccain
Community Explorer

Trevor,

Can you give us a tip to open the links in a new window, and add a line break between the links?  We have been trying everything we know, but we are not necessarily experts.

Thanks,

Patrick

tfullwood
Instructure
Instructure

Hi lmccain

You can do this by replacing line 54 with the line below.

displayVals += '<a href="' + element.key + '" target="_blank">' + element.val + '</a>';

To add a line break you can add a <br /> tag just after close of the list item on line 55.

Chris_Hofer
Community Coach
Community Coach

JS_links.jpgHey  @tfullwood ​...

lmccain​ (Patrick) and I have been working on this more.  One more question for you...is there a way to get it so that the text after the "--" in the example is only text without a link?  The stuff after the "--" is just for a short description and doesn't necessarily need to be linked.  The text before the "--" should still be linked.

Ideally, it would be nice if the text after the "--" could be on a new line under each link.

tfullwood
Instructure
Instructure

 @Chris_Hofer ​

I can't think of a quick fix for this. You could create another array and iterate through that array for the second line but that'll take some time to create.

If you're okay with having the second line as a link as well there is a pretty simple fix. You could add a line break in the val of the trayLinks array. That would look something like this:

{key: 'http://www.example.com/your-library', val: 'Library<br />Line 2'},