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)

[kenneth_larsen]

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:

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]

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]

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]

 @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.

[Chris_Hofer]

Hi  @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]

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]

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]

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]

Hey  @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]

 @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'},