Hide tabs in the course settings (navigation and Integration tabs)

[martin_kabat]

Hi all,

We would like to hide the "Navigation" and "Integration" tabs on the course setting page, from teachers. 

Anyone any ideas, please?

Thank you

[robotcars]

--- JS in this post is deprecated, please see solution from July '25

Hi @martin_kabat,

2 options here, both require adding them to the Canvas Theme.

CSS will hide them whenever they load on the page, for Everyone, even Admin.

#course_details_tabs #navigation_tab,
#course_details_tabs #integrations_tab {
    display: none;
}

JavaScript can remove them for any non-admin user.

// remove these tabs for non-admin users
(function () {
  'use strict';

  if (/\/courses\/\d+\/(details|settings)/.test(window.location.pathname)) {
    if (!['admin'].some(a => ENV.current_user_roles.includes(a))) {
      document.getElementById('integrations_tab').remove();
      document.getElementById('navigation_tab').remove();
    }
  }
})();

[matthew_buckett]

Making changes to the Canvas UI through a theme isn't supported by Instructure, but if you want to make a change like this you can do it by putting this snippet in a file and then uploading it to the JavaScript file part of the theme:

/*
 * If the current user isn't an admin or root admin and we're on the course settings page hide the 
 * navigation and integrations tabs.
 */
$(function() {
    const isAdmin = ENV.current_user_roles.findIndex(role => role === 'admin' || role === 'root_admin') !== -1
    const isSettings = window.location.pathname.match(/\/courses\/.*\/settings/)
    
    if (isSettings && !isAdmin) {
        $('#navigation_tab').hide()
        $('#integrations_tab').hide()
    }
})

There's more details about how to upload JavaScript to a theme here: https://community.canvaslms.com/t5/Admin-Guide/How-do-I-upload-custom-JavaScript-and-CSS-files-to-an...

The solution isn't great because you probably will see them appear for a very short time before the JavaScript is run, but it should work well enough to avoid people modifying them.

[martin_kabat]

@robotcars and @matthew_buckett Thank you very much for your responses, great help.

When tested we found that when you click on the "Settings" next to the course title on top of the course window or change "settings" in url path to "details", the tabs that we removed are appearing. in both JavaScript "details" path needs to be added.

 1.

if (/\/courses\/\d+\/settings/.test(window.location.pathname) || /\/courses\/\d+\/details/.test(window.location.pathname))

2.

const isSettings = window.location.pathname.match(/\/courses\/.*\/settings/)
const isDetails = window.location.pathname.match(/\/courses\/.*\/details/)

Thank you again for your help.

[robotcars]

@martin_kabat 

Good catch, I didn't know that was a route.

I've updated my example above to accept details or settings.

[matthew_buckett]

@martin_kabat Glad you got it working, I wasn't aware about the details URL. Out of interest where is the "Settings" that you are clicking on to get /details in the URL? I don't see anything next to the course title.

[martin_kabat]

@matthew_buckett please see the image bellow.

By the chance, would you have any ideas how we can hide "inbox" from global navigation?

[xcotto1]

Hi @martin_kabat 

This JS script works for me when it comes to any href including the /details

$("a[href*='/details']").removeAttr("href");

adding my two cents here lol

-Xavier👾

[robotcars · Accepted solution]

Hi,

@PamelaPatterson, has pointed out that UI changes have required this to be updated. Here is a modified version that should handle the use cases requested in this thread.

/* css removes these options for all users, even admin */
#course_settings_tabs_mount [id^="tab-navigation"],
#course_settings_tabs_mount [id^="tab-integrations"] {
    display: none;
}

// remove these tabs for non-admin users
// also removes the mounted panel ui if the user navigates from history/bookmark
(function () {
  'use strict';

  if (/\/courses\/\d+\/(details|settings)/.test(window.location.pathname)) {
    if (!['root_admin','admin'].some(a => ENV.current_user_roles.includes(a))) {
      [...document.querySelectorAll('[id^="tab-navigation"]')].forEach(e => e.remove());
      [...document.querySelectorAll('[id^="tab-integrations"]')].forEach(e => e.remove());
    }
  }
})();

[PamelaPatterson]

Since I am not tech savvy with all this stuff, can you answer this for me. The second section for a javascript?  Here is what I was using when it was sent to me back in 2022.

/*
 * If the current user isn't an admin or root admin and we're on the course settings page, hide the
 * navigation and integrations tabs.
 */
$(function() {
    const isAdmin = ENV.current_user_roles.findIndex(role => role === 'admin' || role === 'root_admin') !== -1
    const isSettings = window.location.pathname.match(/\/courses\/.*\/settings/)
   
    if (isSettings && !isAdmin) {
        $('#navigation_tab').hide()
        $('#integrations_tab').hide()
    }

});

$("a.add_email_link.icon-add").hide();

[robotcars]

Hi @PamelaPatterson,

That JavaScript from before is what is not working because the HTML selectors have changed. You can replace the $(function()... }); code with the updated version I provided today. It will work the same to remove both tabs for any user who is not a root admin or admin.

The line below that to hide the add_email_link is a different use case. Keep that, assuming you know what functionality it is providing and on what page.

[PamelaPatterson]

As I have stated, would you kindly send me what it will look like, since I do not know exactly where to replace. 😅

[PamelaPatterson]

I am either doing something wrong, which is possible.  Here is what I still get.

[robotcars]

If you are an admin, the tabs will still be visible. You could try masquerading as another user, or comment out the admin line (the second if statement and the }) after the tab removals to test it for yourself.

This should be the full replacement you need.

// remove these tabs for non-admin users
// also removes the mounted panel ui if the user navigates from history/bookmark
(function () {
  'use strict';

  if (/\/courses\/\d+\/(details|settings)/.test(window.location.pathname)) {
    if (!['root_admin','admin'].some(a => ENV.current_user_roles.includes(a))) {
      [...document.querySelectorAll('[id^="tab-navigation"]')].forEach(e => e.remove());
      [...document.querySelectorAll('[id^="tab-integrations"]')].forEach(e => e.remove());
    }
  }
})();

// hide the add email communication channel for user profile page
$("a.add_email_link.icon-add").hide();