Adding custom menu items

Discussion created by Matthew Jennings on Sep 24, 2015
Latest reply on Sep 9, 2019 by Matt Tomlinson

Like • Show 13 Likes13
Comment • 67

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

67 Replies

Kenneth Larsen Dec 3, 2015 11:06 AM
Hey Matthew Jennings 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 Custom Menu Items for New UI feature request. I will add another comment when it opens for voting. Please feel free to share and add in your two cents.
5 people found this helpful
Like • Show 4 Likes4
Actions
- Kenneth Larsen @ Kenneth Larsen on Jan 7, 2016 8:10 AM
  The Custom Menu Items for New UI feature request is open for voting.
  4 people found this helpful
  Like • Show 2 Likes2
  Actions
John Buell Dec 3, 2015 12:09 PM
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.
1 person found this helpful
Like • Show 2 Likes2
Actions
Eric Kyle Mar 3, 2016 1:00 PM
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.js

It works pretty well, only I am having trouble figuring out how to add an icon for this. Any ideas?
4 people found this helpful
Like • Show 2 Likes2
Actions
- Kenneth Larsen @ Eric Kyle on Mar 3, 2016 1:18 PM
  Eric, 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 Custom Menu Items for New UI and you will find some additional discussion about this code.
  3 people found this helpful
  Like • Show 2 Likes2
  Actions
  - Eric Kyle @ Kenneth Larsen on Mar 3, 2016 1:37 PM
    Thank you, i knew it had to be an easy fix - new to java-script. Looks great now!
    2 people found this helpful
    Like • Show 2 Likes2
    Actions
- Jeffrey Anderson @ Eric Kyle on Mar 15, 2016 2:55 PM
  I just started exploring the use of the script that Eric 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 Matthew Jennings. 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.
  2 people found this helpful
  Like • Show 0 Likes0
  Actions
  - Kenneth Larsen @ Jeffrey Anderson on Mar 15, 2016 3:15 PM
    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.
    4 people found this helpful
    Like • Show 2 Likes2
    Actions
    - Jeffrey Anderson @ Kenneth Larsen on Mar 15, 2016 3:18 PM
      Thanks, Kenneth for responding.
      I'm applying this to the root account level. Investigation continues...
      3 people found this helpful
      Like • Show 0 Likes0
      Actions
    - Eric Kyle @ Kenneth Larsen on Mar 15, 2016 3:20 PM
      Ditto for me - i just checked this code out by impersonating a user and the menu is there no matter where I click in Canvas.
      3 people found this helpful
      Like • Show 0 Likes0
      Actions
  - Kenneth Larsen @ Jeffrey Anderson on Mar 15, 2016 3:25 PM
    Do you have any JavaScript before the menu code that could be breaking when viewing a course page? That would prevent the script from processing the menu code.
    2 people found this helpful
    Like • Show 1 Like1
    Actions
    - Jeffrey Anderson @ Kenneth Larsen on Mar 15, 2016 3:31 PM
      I don't think so. I've been adding things incrementally and to the end of the .js file as needed. Here's a link to the current state of our file:
      [JavaScript] MCCCD Canvas JS Overrides - Pastebin.com
      2 people found this helpful
      Like • Show 0 Likes0
      Actions
      - Kenneth Larsen @ Jeffrey Anderson on Mar 15, 2016 3:44 PM
        There is something off in your code. I moved the code that I had written above the slide out tray code and it started working. I will keep digging and get back to you.
        2 people found this helpful
        Like • Show 1 Like1
        Actions
      - Kenneth Larsen @ Jeffrey Anderson on Mar 15, 2016 3:56 PM
        I am going to guess that the issue is connected to your myLibrary.url variable. Try logging it before your slide out tray code and make sure it exists.
        console.log(myLibrary.url);
        var trayLinks = [
        {key: myLibrary.url, val: 'Library'}
        ];
        2 people found this helpful
        Like • Show 1 Like1
        Actions
        Kenneth Larsen @ Kenneth Larsen on Mar 15, 2016 4:03 PM
        If I replace your myLibrary.url variable with a string, everything works as it should and I can see the navigation items anywhere in Canvas.
            var trayLinks = [
                {key: 'http://www.estrellamountain.edu/library', val: 'Library'}
            ];
        3 people found this helpful
        Like • Show 2 Likes2
        Actions
        Jeffrey Anderson @ Kenneth Larsen on Mar 16, 2016 3:50 PM
        Thank you, Kenneth for your 2nd pair of eyes. I got our customization working properly. Here's to hoping that Instructure takes a serious 2nd look at providing additional menu items natively in the Theme Editor one day. I did vote for that feature, by the way.
        2 people found this helpful
        Like • Show 3 Likes3
        Actions
        Jeffrey Anderson @ Kenneth Larsen on Mar 15, 2016 4:07 PM
        Thanks for pointing this out. I did a once-over to be sure that some of the requisite DOM elements that we were using in the old UI were present in the new UI for detecting the correct URL for the library attached to the college that had the most enrollments for the logged in user. I think I'm going to have to rethink how this gets generated. At least its a starting point and may help me decide if we like the slide out tray or the simpler addMenuItem method. The thing is I can't seem to land on a suitable icon in the style that would represent a library or books in the Canvas Style Guide
        2 people found this helpful
        Like • Show 1 Like1
        Actions
        Clint Jacobsen @ Kenneth Larsen on May 5, 2016 4:09 PM
        What in the JS would I have to edit for this/these links to open in a new browser tab?
        Like • Show 0 Likes0
        Actions
        Jeffrey Anderson @ Clint Jacobsen on May 5, 2016 4:14 PM
        Clint,
        The HTML code for opening a link in a new browser tab is target="_blank". So the JavaScript expression would need to be changed to something like this (addition emphasized in bold):
        
        <a id="global_nav_' + linkId + '" href="' + linkhref + '" target="_blank" class="ic-app-header__menu-list-link">'
        
        Hope that helps!
        3 people found this helpful
        Like • Show 1 Like1
        Actions
        Clint Jacobsen @ Jeffrey Anderson on May 5, 2016 4:41 PM
        So, in here... where would you place it? Before the "<i class=..." statement?
        
        var menu = $('#menu');
            if (!menu.length) return;
            var custom_nav = $('<li/>', {
                'id': 'custom_nav',
                'class': 'menu-item ic-app-header__menu-list-item',
                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">' +
                '<i class="icon-resources"></i>' +
                '<div class="menu-item__text">' + global_nav_name + '</div>' +
                '</div></a></li>'
            });
        2 people found this helpful
        Like • Show 1 Like1
        Actions
        Jeffrey Anderson @ Clint Jacobsen on May 5, 2016 4:50 PM
        Yes. This would make the code look as such:
        
        var menu = $('#menu');
            if (!menu.length) return;
            var custom_nav = $('<li/>', {
                'id': 'custom_nav',
                'class': 'menu-item ic-app-header__menu-list-item',
                html: '<a id="global_nav_resources_link" href="javascript:void(0)" target="_blank" class="ic-app-header__menu-list-link">' +
                '<div class="menu-item-icon-container" aria-hidden="true">' +
                '<i class="icon-resources"></i>' +
                '<div class="menu-item__text">' + global_nav_name + '</div>' +
                '</div></a></li>'
            });
        2 people found this helpful
        Like • Show 1 Like1
        Actions
        Clint Jacobsen @ Jeffrey Anderson on May 6, 2016 8:25 AM
        This doesn't seem to work, and seems to render our links to pages/courses w/in our instance to not working. Links to pages on other sites/outside of our instance seem to still work, though....
        1 person found this helpful
        Like • Show 0 Likes0
        Actions
        Kenneth Larsen @ Jeffrey Anderson on May 6, 2016 8:38 AM
        I had revised the function as part of this discussion to include the ability to have the new link open in a new tab. Here is the new function:
        function addMenuItem (linkText, linkhref, icon, target) { var iconHtml = '', itemHtml, linkId = linkText.split(' ').join('_'), newTab = ''; if (typeof target !== 'undefined') {     newTab = 'target="' + target + '"'; } 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" ' + newTab + '>' + ' <div class="menu-item__text">' + iconHtml + linkText + '</div>' + ' </a>' + '</li>'; $('#menu').append(itemHtml); }
        
        To create a link that opens in the current window, use the following (same as original):
        addMenuItem('Library', 'http://mylibrarylink.edu', 'icon-educators');
        
        To create a link that opens in a new window, add an additional parameter to the end:
        addMenuItem('Library', 'http://mylibrarylink.edu', 'icon-educators', '_blank');
        
        Just in case this is not common knowledge to those reading this response, adding target="_blank" to an anchor tag will cause that link to open in a new window.
        4 people found this helpful
        Like • Show 5 Likes5
        Actions
        Rob Ditto @ Kenneth Larsen on May 6, 2016 10:55 AM
        Thanks as always! A suggestion for you, as time permits: an emerging security practice (source) is to add a rel="noopener" attribute to any A HREF which also uses target="_blank".
        2 people found this helpful
        Like • Show 2 Likes2
        Actions
        Kenneth Larsen @ Rob Ditto on May 6, 2016 11:09 AM
        I haven't heard of that one. I will look it up.
        3 people found this helpful
        Like • Show 3 Likes3
        Actions
        Clint Jacobsen @ Clint Jacobsen on May 6, 2016 3:13 PM
        This is what ultimately got us to the functionality we were looking for; forcing the links provided in the fly-out to open in a new tab.
        
        function displayLinks(element, index, array) {
        displayVals += '<li>';
        displayVals += '<a href="' + element.key + '" target="_blank">' + element.val + '</a>';
        displayVals += '</li>';
        }
        2 people found this helpful
        Like • Show 2 Likes2
        Actions
    - Jeffrey Anderson @ Kenneth Larsen on Mar 15, 2016 3:41 PM
      What's really surprising is I can append a valid DOM element to the menu using the JavaScript console by executing
      $("#menu").append(<VALID DOM Element>); once I'm in the course page. It appears instantly once I do this so I'm still scratching my head here.
      2 people found this helpful
      Like • Show 0 Likes0
      Actions
Daniel Klosterman Mar 26, 2016 1:04 PM
I've tried this code and it's working well. Question though, I'm a little new to Javascript, I would like to add a line break between the icon and text (like the standard menu set), how would I add that to javascript?
2 people found this helpful
Like • Show 1 Like1
Actions
- Kenneth Larsen @ Daniel Klosterman on Mar 28, 2016 11:39 AM
  Daniel, the script was designed to put it in one line due to the limited space in the left navigation when using Canvas on a lower resolution. It was also before Canvas made the left navigation scrollable. If your heart is set on it taking up more space, replace:
  iconHtml = '<i class=" + icon + "></i> ';
  with something like:
  iconHtml = '<i class=" + icon + " style="display: block; width: 100%; height: 25px;"></i> ';
  2 people found this helpful
  Like • Show 1 Like1
  Actions
  - Daniel Klosterman @ Kenneth Larsen on Mar 28, 2016 11:58 AM
    Thank you. I applied the change you suggested, it centers the element, which is good, but the actual icon disappears. I'll play with it a little more to see if I can I make it work.
    2 people found this helpful
    Like • Show 1 Like1
    Actions
    - Kenneth Larsen @ Daniel Klosterman on Mar 28, 2016 12:46 PM
      Aargh, I forget that the editor in this forum strips out single quotes in this particular piece of code. Try this one:
      iconHtml = '<i class="' + icon + '" style="display: block; width: 100%; height: 25px;"></i> ';
      2 people found this helpful
      Like • Show 1 Like1
      Actions
      - Daniel Klosterman @ Kenneth Larsen on Mar 28, 2016 1:03 PM
        Bingo! Thanks for your help!
        2 people found this helpful
        Like • Show 2 Likes2
        Actions
Clint Jacobsen May 10, 2016 12:34 PM
What triggers the retraction of a fly-out (appearing after, say, clicking "courses" in global) when clicking on a portion of the page other than the fly-out? ...my goal is to replicate/enable it in our JavaScript.
2 people found this helpful
Like • Show 2 Likes2
Actions
Daniel Klosterman Aug 11, 2016 12:44 PM
Question to anyone that has implemented this: If you have added links to your left hand nav with this code, have you seen anything weird happen to them when you visit an active discussion page in your course? In several of our course discussion pages, we are noticing that the links we added replicate on the left. And it seems to be related to the number of posts too. More posts creates more copies of the left hand nav links.
2 people found this helpful
Like • Show 1 Like1
Actions
- Clint Jacobsen @ Daniel Klosterman on Aug 12, 2016 8:40 AM
  Nope. Haven't seen this issue, yet...
  2 people found this helpful
  Like • Show 1 Like1
  Actions
- Canvas Admin @ Daniel Klosterman on Aug 12, 2016 11:36 AM
  I have not seen this issue either.
  2 people found this helpful
  Like • Show 0 Likes0
  Actions
Jennifer Torres Oct 31, 2016 7:30 AM
Good morning! The newest production release has offset the name of the folder I've added to the global navigation bar. Is there anything that can be adjusted in this code to have that title centered?

Thanks!
2 people found this helpful
Like • Show 0 Likes0
Actions
- Kenneth Larsen @ Jennifer Torres on Oct 31, 2016 8:50 AM
  Jennifer, take a look at Help With Custom Menu Icons and Script and see if that helps. If it doesn't, upload a screenshot of what you are seeing and I will see what I can do to help.
  2 people found this helpful
  Like • Show 0 Likes0
  Actions
  - Jennifer Torres @ Kenneth Larsen on Oct 31, 2016 9:40 AM
    Mine disappeared!
    
    var styleAdded = false;
        function addMenuItem(linkText, linkhref, icon) {
            var iconHtml = '',
                itemHtml,
                linkId = linkText.split(' ').join('_'),
                iconCSS = '<style type="text/css">' +
                    '   i.custom_menu_list_icon:before {' +
                    '       font-size: 27px;' +
                    '       width: 27px;' +
                    '       line-height: 27px;' +
                    '   }' +
                    '   i.custom_menu_list_icon {' +
                    '       width: 27px;' +
                    '       height: 27px;' +
                    '   }' +
                    '   body.primary-nav-expanded .menu-item__text.custom-menu-item__text {' +
                    '       white-space: normal;' +
                    '       padding: 0 2px;' +
                    '   }' +
                    '</style>';
            if (icon !== '') {
                // If it is a Canvas icon
                if (icon.indexOf('icon') === 0) {
                    iconHtml = '<div class="menu-item-icon-container" role="presentation"><i class="' + icon + ' custom_menu_list_icon"></i></div>';
                // for an svg or other image
                } else if (icon !== '') {
                    iconHtml = '<div class="menu-item-icon-container" role="presentation">' + icon + '</div>';
                }
            }
            // Build item html
            itemHtml = '<li class="ic-app-header__menu-list-item ">' +
                    '   <a id="global_nav_' + linkId + '" href="' + linkhref + '" class="ic-app-header__menu-list-link">' + iconHtml +
                    '       <div class="menu-item__text custom-menu-item__text">' + linkText + '</div>' +
                    '   </a>' +
                    '</li>';
            $('#menu').append(itemHtml);
            // Add some custom css to the head the first time
            if (!styleAdded) {
                $('head').append(iconCSS);
                styleAdded = true;
            }
    
        }
    $(document).ready(function() {
    var trayLinks = [
    {key: 'https://login.microsoftonline.com/', val: 'Email / Office 365'},
    {key: 'https://portal.daymarcollege.edu/secure/Student/loginstu.aspx?ReturnUrl=%2fsecure%2fstudent%2fstudent.aspx', val: 'Student Portal'},
                    {key: 'https://itunes.apple.com/in/app/daymar-college/id1104969531?mt=8', val: 'Daymar College App for iOS'},
                    {key: 'https://play.google.com/store/apps/details?id=com.klassapp.daymar&hl=en', val: 'Daymar College App for Android'},
    {key: 'https://itunes.apple.com/us/app/canvas-by-instructure-cloud/id480883488?mt=8', val: 'Canvas App for iOS'},
                    {key: 'https://play.google.com/store/apps/details?id=com.instructure.candroid&hl=en', val: 'Canvas App for Android'},
                    {key: 'https://itunes.apple.com/ca/app/bookshelf/id389359495?mt=8', val: 'Bookshelf App for iOS'},
    {key: 'https://play.google.com/store/apps/details?id=com.vitalsource.bookshelf', val: 'Bookshelf App for Android'},
                    {key: 'https://support.vitalsource.com/hc/en-us/categories/200132467-Bookshelf-for-Mac-and-PC', val: 'Bookshelf for Desktop'}
    ];
    var slide_out_title = "Links" //Changes the title on the slide out menu
    var global_nav_name = "Links" //Change the title on the global navigation menu
    var footerContent = 'Education is Power!' //Changes the text of the bottom on the slide out tray
    ////////////////////////////////////////////////////////////////////////////////
    //DO NOT EDIT ANYTHING BELOW THIS LINE!
    ////////////////////////////////////////////////////////////////////////////////
    //Browser Detection
    navigator.agentDetect = (function(){
         var ua= navigator.userAgent, tem,
         M= ua.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || [];
         if(/trident/i.test(M[1])){
             tem= /\brv[ :]+(\d+)/g.exec(ua) || [];
             return 'IE '+(tem[1] || '');
         }
         if(M[1]=== 'Chrome'){
             tem= ua.match(/\b(OPR|Edge)\/(\d+)/);
             if(tem!= null) return tem.slice(1).join(' ').replace('OPR', 'Opera');
         }
         M= M[2]? [M[1], M[2]]: [navigator.appName, navigator.appVersion, '-?'];
         if((tem= ua.match(/version\/(\d+)/i))!= null) M.splice(1, 1, tem[1]);
         return M;
    })();
    
    //Array, 0 = browser, 1 = version
    var agent = navigator.agentDetect;
    var reactId;
    
    switch(agent[0]) {
         case "Firefox":
             reactId = "2";
             break;
         case "Safari":
             reactId = "2";
             break;
         default:
             reactId = "1";
             break;
    }
    
    var displayVals = '';
    
    function displayLinks(element, index, array) {
    displayVals += '<li>';
    displayVals += '<a target="_blank" href="' + element.key + '">' + element.val + '</a>'; //Remove target="_blank" if you do not want the links to open in a new tab.
    displayVals += '</li>';
    }
    
    trayLinks.forEach(displayLinks);
    
    var trayHtml = '<div style="position:absolute;background:#fff;" class="ReactTray__Content ReactTray__Content--after-open " tabindex="-1" data-reactid=".' +
       reactId + '.0"><div class="ReactTray__layout" data-reactid=".' +
       reactId + '.0.0"><div class="ReactTray__primary-content" data-reactid=".' +
       reactId + '.0.0.0"><div class="ReactTray__header" data-reactid=".' +
       reactId + '.0.0.0.0"><h1 class="ReactTray__headline" data-reactid=".' +
       reactId + '.0.0.0.0.0">' +
       slide_out_title + '</h1><button class="Button Button--icon-action ReactTray__closeBtn" type="button" data-reactid=".' +
       reactId + '.0.0.0.0.1"><i class="icon-x" data-reactid=".' +
       reactId + '.0.0.0.0.1.0"></i><span class="screenreader-only" data-reactid=".' +
       reactId + '.0.0.0.0.1.1">Close</span></button></div><ul class="ReactTray__link-list" data-reactid=".' +
       reactId + '.0.0.0.1">' +
       displayVals + '</ul></div><div class="ReactTray__secondary-content" data-reactid=".' +
       reactId + '.0.0.1"><div class="ReactTray__info-box" data-reactid=".' +
       reactId + '.0.0.1.0">' +
       footerContent + '</div></div></div></div>' +
       '<script>$(\'.Button.Button--icon-action.ReactTray__closeBtn, .Button.Button--icon-action.ReactTray__closeBtn .icon-x\').click(function () {$(\'.ReactTrayPortal div\').removeAttr(\'style\');$(\'.ReactTrayPortal div\').removeAttr(\'class\');$(\'.ReactTrayPortal div\').html("");$(\'#menu, .menu-item.ic-app-header__menu-list-item a\').removeClass(\'ui-state-disabled\').removeAttr(\'disabled\');$(\'#customTrayOverlay\').hide();$(\'#custom_nav\').css(\'background-color\', \'\');$(\'.icon-resources\').css(\'color\', \'#fff\');});</script>';
    
    trayHtml = trayHtml.replace(/(?:\r\n|\r|\n| )/g, '');
    
    var menu = $('#menu');
        if (!menu.length) return;
        var custom_nav = $('<li/>', {
            'id': 'custom_nav',
            'class': 'menu-item ic-app-header__menu-list-item',
            html: '<a id="global_nav_resources_link" href="javascript:void(0)" target="_blank" class="ic-app-header__menu-list-link">' +
            '<div class="menu-item-icon-container" aria-hidden="true">' +
            '<i class="icon-resources"></i>' +
            '<div class="menu-item__text">' + global_nav_name + '</div>' +
            '</div></a></li>'
        });
    
    menu.append(custom_nav);
    
    $('body').append('<div id="customTrayOverlay" style="width:' + $('#menu').width() + 'px;height: ' + $('#menu').height() + 'px;position: absolute;left: 0;top: 87px;z-index: 999;display:none;"></div>');
    
    $('#global_nav_resources_link').click(function () {
    $('.ReactTrayPortal div').addClass('ReactTray__Overlay ReactTray__Overlay--after-open');
    $('.ReactTrayPortal div').css({
    'position' : 'fixed',
    'top' : '0px',
    'left': '0px',
    'right' : '0px',
    'bottom': '0px'
    });
    
    $('.ReactTrayPortal div').append(trayHtml);
    $('#menu, .menu-item.ic-app-header__menu-list-item a').addClass('ui-state-disabled').attr('disabled', 'disabled');
    $('#customTrayOverlay').show();
    $('#custom_nav').css('background-color', '#fff');
    
    });
    });
    2 people found this helpful
    Like • Show 1 Like1
    Actions
    - Kenneth Larsen @ Jennifer Torres on Oct 31, 2016 9:56 AM
      Jennifer, my apologies for misleading you. Based on the code that you pasted above, you are using the slide out tray developed by Trevor Fullwood and introduced over in the Custom Menu Items for New UI feature request. The code discussed on this page is used to add individual links to the menu (without a slide out tray). You will want to revert your code back to what it was and hopefully Trevor can chime in on adjusting the other code.
      3 people found this helpful
      Like • Show 1 Like1
      Actions
Clint Jacobsen Apr 2, 2018 10:26 AM
Hi, did the latest production release break anyone's custom navigation option like it has ours?
Like • Show 0 Likes0
Actions
- Matthew Jennings @ Clint Jacobsen on Apr 2, 2018 1:00 PM
  Clint Jacobsen it looks like ours is broken as well. I am no longer maintaining this for our university so I am going to loop in out admin Tyler Weldon.
  Like • Show 0 Likes0
  Actions
- Tyler Weldon @ Clint Jacobsen on Apr 2, 2018 1:26 PM
  Thanks Matthew Jennings for the connection, I am looking into this now. Clint Jacobsen any progress on a fix? I will send you a message as well.
  Like • Show 1 Like1
  Actions
  - Clint Jacobsen @ Tyler Weldon on Apr 2, 2018 3:46 PM
    I don't have a fix yet.
    Like • Show 0 Likes0
    Actions
    - Tyler Weldon @ Clint Jacobsen on Apr 2, 2018 5:00 PM
      same here. I think its our customTrayOveraly that is not getting populated with the custom menu. When I click the icon on the navigation menu the overlay will display but will nothing is inside.
      Like • Show 0 Likes0
      Actions
- James Weissman @ Clint Jacobsen on Apr 2, 2018 1:56 PM
  We used to use this javascript until the functionality was added into the core product as "Help menu options" -- see Customize Help Menu.
  Like • Show 1 Like1
  Actions
- Marissa Zelmanowicz @ Clint Jacobsen on Apr 3, 2018 6:41 AM
  We are having the same issue. Was anybody able to find a fix that they would be willing to share?
  
  Thanks!
  Like • Show 0 Likes0
  Actions
  - Tyler Weldon @ Marissa Zelmanowicz on Apr 3, 2018 7:40 AM
    Marissa Zelmanowicz I'm still searching for a fix, but will post what I find here.
    2 people found this helpful
    Like • Show 2 Likes2
    Actions
    - Marissa Zelmanowicz @ Tyler Weldon on Apr 3, 2018 7:44 AM
      Thank you, Tyler.
      Like • Show 0 Likes0
      Actions
    - mzucal@hccfl.edu @ Tyler Weldon on Apr 10, 2018 11:56 AM
      Any success on a fix for this?
      Like • Show 2 Likes2
      Actions
      - Luis Morales @ mzucal@hccfl.edu on Apr 10, 2018 4:37 PM
        We are looking for a fix, did you find it? Thank you
        Like • Show 0 Likes0
        Actions
    - tyema @ Tyler Weldon on Apr 16, 2018 10:22 AM
      I still can't get ours to work. Has anyone found a fix?
      Like • Show 0 Likes0
      Actions
Clint Jacobsen Apr 16, 2018 11:35 AM
Our CSM essentially told us to bail on it and just add links to our help option. Not the best, and I can see revisiting it in the near future. It's nice to have a custom option for sure.
Like • Show 0 Likes0
Actions
Matt Hanes Apr 16, 2018 12:56 PM
An instructure employee put out a video about the issue (and potential solution) here: https://community.canvaslms.com/message/101354-re-custom-javascriptcss-changes?commentID=101354&et=watches.email.thread#…
Like • Show 0 Likes0
Actions
Robert Carroll Apr 19, 2018 10:45 AM
Hi Everyone,

Working on a fix here... Global Nav Menu - Custom Tray
Like • Show 1 Like1
Actions
Lisa D Stickdorn May 18, 2018 9:39 AM
Would there be a way for this code to open the link in a new window or tab? Thanks.
Like • Show 0 Likes0
Actions
- Robert Carroll @ Lisa D Stickdorn on May 18, 2018 11:01 AM
  Hi Lisa,
  
  Are you referring the the code in the original post?
  
  Either way, if you just look for the <a tag in the code, you will see there is no target attribute. Adding target="_blank" will open a link in a new tab/window. Here's a modified example of the code from the original post.
  
  line to edit
  <a target="_blank" id="global_nav_' + linkId + '" href="' + linkhref + '" class="ic-app-header__menu-list-link">
  
  complete
  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 target="_blank" 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); }
  1 person found this helpful
  Like • Show 0 Likes0
  Actions
  - Lisa D Stickdorn @ Robert Carroll on May 18, 2018 11:52 AM
    Thanks for the help. Lisa
    Like • Show 1 Like1
    Actions
- Kenneth Larsen @ Lisa D Stickdorn on May 18, 2018 11:49 AM
  There is also the updated variation from above that includes an option to open a specific link in a new tab. I am quoting it here for ease of reference, along with the addition of rel="noopener" suggested by Rob Ditto.
  ------ Quoted from above -------
  I had revised the function as part of this discussion to include the ability to have the new link open in a new tab. Here is the new function:
  function addMenuItem (linkText, linkhref, icon, target) { var iconHtml = '', itemHtml, linkId = linkText.split(' ').join('_'), newTab = ''; if (typeof target !== 'undefined') { newTab = 'target="' + target + '"'; } if (icon !== '') { iconHtml = '<i class="' + icon + '"></i> '; } itemHtml = '<li class="ic-app-header__menu-list-item ">' + ' <a id="global_nav_' + linkId + '" href="' + linkhref + '" rel="noopener" class="ic-app-header__menu-list-link" ' + newTab + '>' + ' <div class="menu-item__text">' + iconHtml + linkText + '</div>' + ' </a>' + '</li>'; $('#menu').append(itemHtml); }
  
  To create a link that opens in the current window, use the following (same as original):
  addMenuItem('Library', ' http://mylibrarylink.edu ', 'icon-educators');
  
  To create a link that opens in a new window, add an additional parameter to the end:
  addMenuItem('Library', ' http://mylibrarylink.edu ', 'icon-educators', '_blank');
  
  Just in case this is not common knowledge to those reading this response, adding target="_blank" to an anchor tag will cause that link to open in a new window.
  1 person found this helpful
  Like • Show 1 Like1
  Actions
  - Lisa D Stickdorn @ Kenneth Larsen on May 18, 2018 11:52 AM
    Exactly what I was looking for. Thanks so much. Lisa
    Like • Show 1 Like1
    Actions
  - dbrace@lccc.edu @ Kenneth Larsen on Jul 9, 2018 10:48 AM
    Kenneth,
    
    I would like to thank you for helping everyone with this.
    
    I am attempting to use the JavaScript code that you provided, as well as the examples, and I am getting an error in line 1 from Firefox (SyntaxError: missing formal parameter) and Chrome (Uncaught SyntaxError: Unexpected string).
    
    The only code in my JS file is what you have provided and my changing of the name (to Google) and URL (to http://www.google.com).
    
    Firefox says that the error is happening at 1:22. This is where the "left parenthesis" is located after function addMenuItem . I have attached the JS file.
    
    Can you please take a look at it and let me (or anyone else giving this a try) what I should change.
    
    Thank you!
    
    Doug
    Attachments
    addMenuItem.js.zip496 bytes
    Like • Show 0 Likes0
    Actions
    - Kenneth Larsen @ dbrace@lccc.edu on Jul 9, 2018 11:20 AM
      Thanks for sharing your code, it helps quite a bit. You don't put your variables into line 1. It is the declaration of the function. To add a link to Google, you need to call the function. Your code should look like:
      function addMenuItem(linkText, linkhref, icon, target) { var iconHtml = '', itemHtml, linkId = linkText.split(' ').join('_'), newTab = ''; if (typeof target !== 'undefined') { newTab = 'target="' + target + '"'; } if (icon !== '') { iconHtml = '<i class="' + icon + '"></i> '; } itemHtml = '<li class="ic-app-header__menu-list-item ">' + ' <a id="global_nav_' + linkId + '" href="' + linkhref + '" rel="noopener" class="ic-app-header__menu-list-link" ' + newTab + '>' + ' <div class="menu-item__text">' + iconHtml + linkText + '</div>' + ' </a>' + '</li>'; $('#menu').append(itemHtml); } addMenuItem('Google', 'http://www.google.com', 'icon-educators', '_blank');
      You can then duplicate line 20 to add as many different icons as you need.
      1 person found this helpful
      Like • Show 0 Likes0
      Actions
    - dbrace@lccc.edu @ dbrace@lccc.edu on Jul 9, 2018 12:54 PM
      Thank you Kenneth. I am new to the world of JS so your explanation was very helpful and I feel a little foolish for a simple mistake but I am probably not the first nor the last.
      
      Ultimately, I did have to use your code from Help With Custom Menu Icons and Script to get things to work (e.g. icon size and new tab) as I was expecting.
      
      Thank you again!
      
      Doug
      Like • Show 0 Likes0
      Actions
Rune Nørgaard May 1, 2019 1:08 PM
Right now we have this (based on the code provided by Kenneth Larsen. The code can be found in this link provided by Kenneth Rogers. Thank you for sharing the code.
Clicking the item opens a new tab.

We want the item to show up just above the Help item.
Can anyone help me to make this happen?
Like • Show 0 Likes0
Actions
- s.j.watts@bham.ac.uk @ Rune Nørgaard on May 2, 2019 4:05 AM
  Hi Rune
  I'm not entirely sure that this is correct as I'm basing my suggestion on our custom JS that adds an item to the menu, but it was written by a colleague who no longer works here so I can't check if I've understood it correctly.
  Anyway, I believe that in Kenneth's code the following line adds the new item to the very end of the menu:
  $('#menu').append(itemHtml);
  To add it above the item that's currently last in the menu, try replacing that line with this one:
  $('#menu .ic-app-header__menu-list-item').last().before(itemHtml);
  
  I hope this works for you.
  2 people found this helpful
  Like • Show 1 Like1
  Actions
  - Rune Nørgaard @ s.j.watts@bham.ac.uk on May 5, 2019 1:31 PM
    Hi Steve, thank you so much for suggestion, it works!
    Like • Show 1 Like1
    Actions
Matt Tomlinson Sep 9, 2019 2:49 PM
I've been reading through this thread. Has Instucture thought about making the navigation bar customizable to teachers, or those of us who aren't fluent in Java?
Like • Show 1 Like1
Actions

Adding custom menu items

Outcomes

Attachments

Related Content

Recommended Content

Incoming Links