cancel
Showing results for 
Search instead for 
Did you mean: 
mjennings
Community Champion

Adding custom menu items

About a month ago,  @kenneth_larsen ​ added the following comment to the Canvas Production Release Notes (2015-08-08)

If you want to add an additional logout link into the left navigation for the new UI you can use the following function in your global JavaScript file:

function addMenuItem (linkText, linkhref, icon) {

    'use strict';

    var iconHtml = '',

        itemHtml,

        linkId = linkText.split(' ').join('_');

    if (icon !== '') {

        iconHtml = '<i class=" + icon + "></i> ';

    }

    itemHtml = '<li class="ic-app-header__menu-list-item ">' +

        '  <a id="global_nav_' + linkId + '" href="' + linkhref + '" class="ic-app-header__menu-list-link">' +

        '       <div class="menu-item__text">' + iconHtml + linkText + '</div>' +

        '  </a>' +

        '</li>';

    $('#menu').append(itemHtml);

}

Then to add a logout link (or any other link) simply add:

addMenuItem('Logout', '/logout', 'icon-off');

The disclaimer I would add is that the left navigation is not designed to scroll. If you make it longer than a user's screen dimensions, then anything below that will not be visible.

While this is great for a single item link, has anyone figured out how to do the fly out panel to have a list of links similar to the Courses Option?

72 Replies
kenneth_larsen
Community Champion

Hey  @mjennings ​ and any others interested in this topic. I have not had time to figure out the fly out panel and thought we might as well see if we can get Canvas to add this as a feature in the meantime. I have created a feature request. I will add another comment when it opens for voting. Please feel free to share and add in your two cents.

buellj
Community Contributor

This is very helpful. We added a link to the library and wanted to add a Logout link  but started running into problems with the non-scrolling left menu.

The feature request is open for voting.

ekyle
Community Member

One of our Canvas rep's provided us with the following link to create a fly out panel that you can add as many link in as you would like:

https://github.com/kajigga/canvas-contrib/blob/master/Branding/JS_and_CSS/react-tray-link/react-tray...

It works pretty well, only I am having trouble figuring out how to add an icon for this. Any ideas?

ekyle​, that code uses the class icon-resources that was in theory an alternate for icon-folder. Just find/replace icon-resources in the code with the icon of your choice from the Canvas Style Guides. You can also take a look at the comments at " style="color: #2989c5; and you will find some additional discussion about this code.

Thank you, i knew it had to be an easy fix - new to java-script. Looks great now!

themidiman
Community Champion

I just started exploring the use of the script that ekyle​mentioned only to find out that the additional menu slide out tray with custom items fails to persist once the user has navigated to their course. Neither does the script provided by  @kenneth_larsen ​ referred to by  @mjennings . The extra menu item goes away once a course has been navigated to. 

Any ideas why?  If I find out before someone else does, I'll update this thread.

Are you adding the code at the root account level or a sub-account? The only reason I can think of that it would not persist is if the course is in a different account then the one to which you added the code. I tested again and both codes are working for me regardless of where I navigate within Canvas when added at the root level. There is nothing in either code that is dependent on where you are in Canvas.

Thanks,  @kenneth_larsen ​for responding.

I'm applying this to the root account level. Investigation continues...