Matthew Jennings

Adding custom menu items

Discussion created by Matthew Jennings on Sep 24, 2015
Latest reply on May 18, 2018 by Lisa D Stickdorn

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?

Outcomes