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)

[JACOBSEN_C]

What would bump the 'X' to close the react tray fly-out over to the right of what flies out (so the 'X' appears like that to the help link fly-out)?

<i class="icon-x" data-reactid=".'

[tfullwood]

Hey  @JACOBSEN_C ​

I assume you're referring to the resources tray JavaScript? Looks like the classes have changed slightly. Change the ReactTray__header class to ic-NavMenu__header and the ReactTray__headline class to ic-NavMenu__headline. I ran a pretty quick test on that and it seems to work but you'll want to double check it to verify.

[JACOBSEN_C]

Awesome!  thanks trevor - this helped us out quite a bit!

[Renee_Carney]

Thank you to  @kenneth_larsen  for submitting this idea, as well as,  @mjennings ​,  @buellj ​, 1006953752​, rhobbs​, JEFHQ12951​, harker​,  @kmeeusen ​,  @sadenniston ​,  @Chris_Hofer ​,  @tfullwood ​, lmccain​, jtorres​,  @fariborzm ​,  @rlangleyadmin ​,  @abunag ​, james.vlisides​,  @petermarchetti ​,  @jbrady2 ​,  @powellj ​, &  @JACOBSEN_C  for your contributions. Your investment in this idea helped refine a feature which is now part of the Canvas!

[fariborzm]

Has anyone else noticed that the icon-resources is not rendering in Beta?  Not sure if this has to do with the Canvas Icon Updates that we were notified about in latest Canvas Beta Release Notes or not.  Any thoughts on how to fix the issue?  I tried switching over to icon-folder, but that doesn't render to the correct size.

[JACOBSEN_C]

Yes, I'm seeing that too. 

[jtorres1]

Is there a way to get my custom fly out to mimic the others? For example, the X is located in a different spot and there is no thin gray line at the top beneath the title of the window. My links are also listed as bullets.

[Chris_Hofer]

Do you have lots of links in your "Student Help" menu?  Could you add the links in your "Links" menu to the "Student Help" menu and set the specific roles that should see them?

[jtorres1]

Hi Chris,

Unfortunately, they'll need to stay separate. I'd just like to have consistency between the custom and the others.

Thanks!

[jtorres1]

Any ideas  @kenneth_larsen ​?