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)

[ejdormady]

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]

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]

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]

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]

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]

It worked beautifully! Thank you!

[syeo]

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]

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]

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]

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