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
ejdormady
Community Novice

https://canvas.instructure.com/styleguide#icons

If you want the same as the old icon-resources you can update code (where

appropriate, not a cut and paste operation) with icon-folder I think should

give you the same look as before the change.

I went with icon-link. But keep in mind to constrain the CSS icon

definition so it's not global (30 pt link icon in the RCE would not be

ideal).

Good luck!

Ed

On Sun, Jan 8, 2017 at 9:53 AM, JACOBSEN_C@fortlewis.edu <

tfullwood
Instructure
Instructure
You can modify class from icon-resources to icon-folder. But this will shift the position and reduce the size of the icon. So remove the previous icon-resources css and replace it with this:

#menu .icon-folder {

    position: relative;

    left: -4px;

}

#menu .icon-folder[class*=icon-]:before, #menu .icon-folder[class^=icon-]:before {

    font-size: 30px;

}

EDIT: Wow that styling was awful. Lets try this again.

jtorres1
Community Contributor

What would I need to modify in my CSS to see this work? Do I also need to make a change to Javascript? Thanks so much!

@import 'https://daymar.evaluationkit.com/CanvasScripts/daymar.css?v=3';

.pages .course-title.ellipsis {

  color:white;

  }

/*********************************************************************************/

/* Canvas Styling Override */

.item-group-container {

  background-color: #ffffff !important;

}

.replies { 

padding-left: 7px; 

border-left: solid #b2d9ee 16px; 

 

.discussion-read-state-btn { 

  top: 32px; 

 

div.entry-content { 

  padding-left:0px !important; 

#custom_nav .menu-item-icon-container {

  position: relative;

  left: -4px;

}

#custom_nav .menu-item__text {

  margin-top: 15px;

}

.icon-resources {

  position: relative;

  left: -2px;

}

.icon-resources:before {

  content: "\f13c";

}

.icon-resources[class*=icon-]:before, .icon-resources[class^=icon-]:before {

  font-size: 30px;

}

#menu i.icon-resources {

  color: #fff;

}

jtorres1
Community Contributor

What would I need to modify in my CSS to see this work? Do I also need to make a change to Javascript? Thanks so much!

@import 'https://daymar.evaluationkit.com/CanvasScripts/daymar.css?v=3';

.pages .course-title.ellipsis {

  color:white;

  }

/*********************************************************************************/

/* Canvas Styling Override */

.item-group-container {

  background-color: #ffffff !important;

}

.replies {

padding-left: 7px;

border-left: solid #b2d9ee 16px;

}

.discussion-read-state-btn {

  top: 32px;

}

div.entry-content {

  padding-left:0px !important;

}

#custom_nav .menu-item-icon-container {

  position: relative;

  left: -4px;

}

#custom_nav .menu-item__text {

  margin-top: 15px;

}

.icon-resources {

  position: relative;

  left: -2px;

}

.icon-resources:before {

  content: "\f13c";

}

.icon-resources[class*=icon-]:before, .icon-resources[class^=icon-]:before {

  font-size: 30px;

}

#menu i.icon-resources {

  color: #fff;

}

tfullwood
Instructure
Instructure

Hey jtorres

You'll just remove any of the blocks that include .icon-resources from your CSS file (not necessary but helps keep your CSS file clean). Then add the couple of blocks I provided in the last comment. Finally, find any place in your JS file that references "icon-resources" and change it to "icon-folder".

jtorres1
Community Contributor

It worked beautifully! Thank you!

syeo
Community Novice

Hi Trevor:

Thank you for sharing the code.

It worked!

Appreciate your help:)

Sincerely,

Sue

On Mon, Jan 9, 2017 at 7:11 PM, tfullwood@instructure.com <

kelly_coban
Community Novice

Sidebar with Title Wrapped

As you can see the text for my added slide out menu option is wrapping onto the next line. I have been through the javascript and the CSS trying to figure out how to get the text to show all on one line like all the other menu options. I am a total novice on javascript and intermediate on CSS so I am outside my depth.

Any help will be greatly appreciated.

ejdormady
Community Novice

Hello Kelly,

I had this issue at one time and resolved it by placing explicit breaks,

like this:

addMenuItem('Teaching
Effectiveness
Surveys',

And also adding these whitespace values:

function addMenuItem(linkText, linkhref, icon, target) {
var iconHtml = '',
itemHtml,
linkId = linkText.split(' ').join('_'),
iconCSS = '.menu-item__text.custom-menu-item__text {' +
' white-space: normal;' +
' padding: 0 2px;' +
' }' +
'';

if (icon !== '') {

On Fri, Jun 9, 2017 at 7:58 AM, kelly_coban@iss.k12.nc.us <

JACOBSEN_C
Community Contributor

In our beta site I'm seeing the text to our custom menu item has gone haywire - is there a fix to this? (IMage below to illustrate...)

241724_Screen Shot 2017-07-13 at 2.09.08 PM.png