cancel
Showing results for 
Search instead for 
Did you mean: 
anna_selway
Community Participant

Links new Canvas UI

Jump to solution

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

1 Solution

Accepted Solutions
canvas_admin
Community Champion

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

View solution in original post

5 Replies
canvas_admin
Community Champion

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

View solution in original post

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

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. Smiley Happy

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.

Thank you so much – it works