cancel
Showing results for 
Search instead for 
Did you mean: 

Custom Menu Items for New UI

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)

112 Comments
mjennings
Adventurer II

Thanks  @kenneth_larsen ! This would be an amazing addition that would give institutions a greater flexibility in targeting users with university/school specific resources. It would also be great if there was an ability to add sub-account specific content as well.

buellj
Learner II

Ditto! This would be very helpful when different campus units and resources need to compete for limited menu space.

1006953752
Community Member

Yes, please! It would be so helpful to be able to keep our current custom menu items when we move to the new UI. We've been using Seth Battis'/St. Marks menu code and we don't want to lose this functionality now that our students know they can go to our custom menu for help, library, tutoring, etc.

rhobbs
Community Member

Like USU, we are VERY interested in this feature request.  We currently utilizing this functionality in our Canvas instance.  It has become an important feature in providing access to local and third party resources to our students and faculty.  This should be a feature built into the theme editor, with the ability to add a resources (or other) custom menu(s) and associated links.  Let's make this happen Instructure and Community.

1006953752
Community Member

Voting should be open today, but it is not. Can someone from Instructure assist?

biray
Community Member

This idea has moved to the next stage and will be open for voting among the Canvas Community, from Wed. January 6, 2016 - Wed. April 6, 2016.

Check out this doc for additional details about how the voting process works!

themidiman
Explorer III

I can only see this as being a helpful addition to the new UI feature set. I'm sure our institution would like to see this option without resorting to a custom JS/CSS hack.

harker
Community Member

We have voted this up. I also have added a hack as a reply on Has anyone been working on scripts for the new Beta UI?

It's not perfect, but as to location and usefulness it may help.

kmeeusen
Community Coach
Community Coach

As more and more colleges try to streamline resources for students, and strive to create a one-stop-shopping resource for stakeholders; this functionality becomes more and more desirable. This is especially true for schools that have a large number of fully online courses and programs.

I am very much in favor of the ability to customize the global navigation in the new UI, and to be able to do it through a standard user interface, rather than having to contract with coders to get this customization built, then have it crash on the next scheduled production release.

sadenniston
Surveyor

Wonderful idea. The way I have approached general courses (i.e. those courses that don't have enrolments) is to put them in the public course index. This requires students to search, however. Having them appear in the main navigation menu would take out the search requirement.

kenneth_larsen
Surveyor

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
Instructure

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
Surveyor

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
Surveyor

 @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

chofer
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  @chofer ​

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 Member

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.

chofer
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

 @chofer ​

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