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]

Thanks!  This commit works - but I could have sworn I was looking there earlier and didn't see the code updated last month like it says it does now.  Thanks again -

[JACOBSEN_C]

Trevor, I'm missing here to slip "keep-all;" into the code.  What div contains the word "resources"? I'm not seeing it...

[tfullwood]

 @JACOBSEN_C ​, It looks like it's line 54 in the JavaScript file.

[fariborzm]

I noticed this morning that our Beta instance was causing the word Resources to wrap again.  I made a minor change to the custom_nav value in our JavaScript file.  I moved the </div> on the last line of the html declaration up to just after the </i>.  (That closes out the <div> for the icon and allows the text to be at the same level.)

Some of my users also noticed that the folder icon wasn't quite lining up with the rest of the icons in the navigation bar.  To fix that I changed the .icon-resources CSS from left: -2px; to left: 2px;

Just thought I would share, in case anyone else is running into a similar issue.

[delponte]

I can't find it, too...

[ejdormady]

Hello, I have had great success implementing both the addmenuitem single icon code and also the resources tray link, so why don't I try to combine them.

Actually what I am trying to do is show an icon and direct URL link with addMenuItem (thanks Kenneth Larson)  based on values in current_user_roles to only those without the teacher role to a student resource. I think I can work this out.

The challenge I have encountered comes in the form of a conditional (only those with a teacher value in the roles) icon that launches a slide out tray of links similar to the resources links. This is complicated as I have implemented and wish to keep the default resources slide out.

My question boils down to - is there a relatively straighforward way to introduce a second slide out tray (with a different icon from the default slide out I currently have in production)? Would it be something like a 'var2' function that I could add to the existing 'var' that makes the slide out work?

Thanks for your help.

[JACOBSEN_C]

The last Production release changed our custom navigation option icon. We just see a square now where there was something different. Is there a list of what are now compatible icons?

[syeo]

When I called the Canvas Support last Friday, January 6, 2017, I was assured by the staff that the Resources Icon's Outline box that was appearing in the Beta site would not appear in the Production site.  Now, it is happening in the Production site! 

I am disappointed.  Likewise, I am digging for resources in this page.

[fariborzm]

Good Morning Everyone,

I'm seeing the same thing as Clint.  I tried changing from icon-resources to icon-folder, which does give a folder icon, but it is not the same size as the rest of the icons on the navigation bar.  I found that icon by looking on this page - http://instructure.github.io/instructure-icons/#demos/sprites/Line.html.

Does anyone know how to resize the icon, either via Javascript or CSS?  Or if someone has a better suggestion on an icon to use, I would love to hear it.

Thanks,

Mike

[fariborzm]

I'm not sure if this is the "correct" solution, but this is what I have been able to come up with, after a couple of hours of trial and error.

In my CSS file I changed to the following:  (I have omitted things that did not change.)

#custom_nav .menu-item-icon-container {

    position: relative;

}

#custom_nav .menu-item__text {

  margin-top: -5px;

}

.icon-resources {

  position: relative;

  left: 2px;

}

In my Javascript file I changed to the following in the custom_nav variable:  (Just replace from "html:" to right before "});")

html: '<a id="global_nav_resources_link" href="javascript:void(0)" class="ic-app-header__menu-list-link">' +

'<div class="menu-item-icon-container" aria-hidden="true">' +

'<svg viewBox="0 0 2080 2080" version="1.1" xmlns="http://www.w3.org/2000/svg" height="26pt" width="26pt" preserveAspectRation="xMidYMid" style="display: block; margin: auto">' +

'<path d="M851.68 240H320c-88.32 0-160 71.6-160 160v1200c0 44.16 35.84 80 80 80h1360c88.4 0 160-71.6 160-160V560c0-44.16-35.84-80-80-80h-624l-55.76-139.44C975.92 279.84 917.12 240 851.68 240m0 160l55.76 139.44C931.76 600.16 990.56 640 1056 640h544v880H320V400h531.68" stroke="none" stroke-width="1" fill-rule="evenodd" fill="#ffffff" fill-opacity="1"/>' +

'</svg>' +

'</div>' +

'<div class="menu-item__text" style="word-break: keep-all">' + global_nav_name + '</div>' +

'</a></li>'