Links new Canvas UI

[anna_selway]

The college I work out are using the new UI.  Is it possible to create a link on the Grey Navigation Bar on the left.  We have some courses that we want all students to have access to such as student support and career advice.

Any help or suggestions on the best way to do this would be very much appreciated.

Thanks a lot

[canvas_admin · Accepted solution]

Anna,

Another Canvas user,  @kenneth_larsen ​,  posted some code and some comments to this affect here: https://community.canvaslms.com/docs/DOC-4364#comment-17542

[anna_selway]

Hi great just what I needed, thank you, although I was unable to get an Icon to display - I tried using the icons in the Canvas Style Guide.

Thanks again

[Stef_retired]

anna.selway​, if you'd like to continue to troubleshoot this so that the icons display for you, you might want to post a follow-up question in the Canvas Focus Group: New UI​ space and/or Canvas Developers​ group. That's where the code gurus live.

[kenneth_larsen]

I discovered the editor changes my code when I paste it but I no longer have the ability to edit the original post so here is an updated version of the code:

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

}

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

The editor turns the line:

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

into

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

Which will not work.

[anna_selway]

Thank you so much – it works