Custom Menu Items for New UI

[kenneth_larsen]

  This idea has been developed and deployed to Canvas

  Idea open for vote Wed. January 6, 2016 - Wed. April 6, 2016  Learn more about voting...

I have had discussions with a number of institutions looking for a way to add custom items to the left hand navigation in the new UI.

Adding custom menu items

Additional Navigation Menu Item

Re: Has anyone been working on scripts for the new Beta UI? 

Like these schools, we have some items we have customized for our faculty and students that we would like to bring over to the new UI.

I have created some JavaScript code to add an individual item, but it would be great if there was a way to add an item that had a slide out list like the other navigation items in Canvas

The icing on the cake would also be the ability for the navigation to be targeted to a user's roles (additional resources for teachers verses resources for students) and if there was a way to choose an icon.

I understand that there is limited space in the left navigation for smaller screen sizes, but this would be a wonderful addition to the existing customization options in the new UI.

  Comments from Instructure

For more information, please read through the Canvas Production Release Notes (2016-08-27)

[JACOBSEN_C]

Anyone else seeing their custom menu option removed after the latest production release?

[kenneth_larsen]

Did you change the classes like  @tfullwood ​ mentioned above?

Looks like the classes have changed slightly. Change the ReactTray__header class to ic-NavMenu__header and the ReactTray__headline class to ic-NavMenu__headline. I ran a pretty quick test on that and it seems to work but you'll want to double check it to verify.

[jtorres1]

It worked. Thank you! I do still have those bullets. Any suggestions for those?

[tfullwood]

Hey jtorres​, you can add style="list-style: none; margin: 0;" to the <ul> to remove the bullets.

[jtorres1]

Hi Trevor,

Which line would I add that to? Thanks so much for your help!

$(document).ready(function() {

  var trayLinks = [

  {key: 'https://login.microsoftonline.com/', val: 'Daymar Email'},

  {key: 'https://portal.daymarcollege.edu/secure/Student/loginstu.aspx?ReturnUrl=%2fsecure%2fstudent%2fstuden...', 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 = '' //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>';

  displayVals += '</li><br />';

  }

  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="ic-NavMenu__header" data-reactid=".' +

   reactId + '.0.0.0.0"><h1 class="ic-NavMenu__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)" class="ic-app-header__menu-list-link">' +

  '<div class="menu-item-icon-container" aria-hidden="true">' +

  '<i class="ic-icon-svg 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');

  });

});

[tfullwood]

You'll add it to ul tag after the close button. This tag: <ul class="ReactTray__link-list".

[jtorres1]

Got it! Thank you!

[JACOBSEN_C]

The latest production release seems to have stopped custom navigation options from working.  What in the js needs to be edited to get them to display again,  @kenneth_larsen  ?

[kenneth_larsen]

 @JACOBSEN_C ​, the custom slide out panel was developed by  @tfullwood ​ and I have not been using it since Canvas added the ability to customize the Help panel. There is some discussion further down on this page from earlier this week about classes that need to be changed. If that doesn't fix it, let us know and I will try and find some time today to add the code and do some testing.

[tfullwood]

 @JACOBSEN_C , I'm not seeing any issues. I also downloaded the latest commit from Github and uploaded, it's working as expected. The only thing that was a bit odd was the word break (Resources is breaking on a second line). This can be fixed by adding word-break: keep-all; to the div that contains the word "Resources".