How do I add Global Nav item?

[cbirdsong]

I'm the Canvas admin for our institution and I've been requested to add a link to our Global navigation (left side nav bar). What I'm finding so far is information on how to fully customize it but I don't need all that, we just want to add one extra icon that links out to a website. Can anyone point me in the right direction for the css code to append my existing theme files? Thanks!

We would need to update both the browser-based & mobile-based css files. Thanks!

[robotcars · Accepted solution]

Hi cbirdsong

Here's one I recently wrote to support multiple icon types. It works in the global nav, but not the new responsive navigation menu (hamburger menu), or the mobile applications.

ccsd-canvas/global-nav-custom-links at main · robert-carroll/ccsd-canvas · GitHub 

The code you would need to add to your themes javascript is here,

ccsd-canvas/global-nav-custom-links.min.js at main · robert-carroll/ccsd-canvas · GitHub 

Please let me know if you have any questions.

[cbirdsong]

OMG, You ROCK!! That worked great!! So I need to ask one more question – how do I switch out the heart to some other icon? I can’t seem to find the .svg file for that particular icon in the code you provided. I’m a js newbie so I’m not sure how to connect the .svg file to the code itself.. Thanks again!!

-Cyndie

[robotcars]

Thanks Cynthia

The heart is just an example.

Icons can be used from instructure-ui - A design system by Instructure Inc. (6.24.0) 

My only recommendation is to aim for icons that don't have much use in the rest of the UI, so they don't end up with dual meaning... like Publish and Completed (both are checks :smileyconfused:)

The documentation shows how you can use a custom hosted icon, or pasted inline.

[cdatko]

Hi Robert,

This is awesome, as I am a Canvas admin, but not a CSS/Javascript person. (Love funding cuts...) Do you happen to have an updated link for the GitHub link? I'm getting a 404 error.

Thanks so much in advance. I have hope that I can do this! 

Katie

[robotcars]

Updated the links. Try now.

[cdatko]

Awesome! Thank you so much!

Katie Datko

Instructional Designer

Glendale Community College

GCC Instructional Continuity Page<https://gcc.instructure.com/courses/25258>

GCC Remote Instruction Student Resources<https://gcc.instructure.com/courses/25488>

[cdatko]

This was absolutely AMAZING! Thank you so much! 

[hechla]

@robotcars Thank you so much for this. A couple of follow-up questions.

1. Is it possible to have the custom link not at the bottom? I think it would be great for Help to still be at the bottom. 

2. Is it possible to have the custom link open in a new window ( target=_blank )? My coding is really rusty and I'm just not seeing where I would add that, if possible. 

Thanks,
Adam

[kimhuang]

const links = [

{

title: "Canvas Community",

icon_svg: "icon-heart",

href: "https://community.canvaslms.com/",

target: "",  <---- Here is the place you put ”_blank”, 

so it is target: "_blank" to open the link in a new browser tab

}, // ready for another

[dsimmelink]

Thanks so much for this solution! However, I was just wondering if you have had a chance to solve this for the new responsive menu and mobile apps yet?

Thanks much!

-Dana

[dwillmore]

Are you able to open the link in an iFrame using your JS?

[c_carrillo1]

I added this code to our global js file, but it seemed to have no effect at all.  Has this become an outdated method?

[maguire]

A program for adding new external tools to the navigation menu is add-external-tool-for-course.py see 

https://github.com/gqmaguirejr/Canvas-tools

[ChrisMedina]

although I like this it needs to be available in the mobile app too. Have you seen any solutions for this? 

[maguire]

I am only able to put this script into a locally running Canvas and not into the university's Canvas instance. Unfortunately, I have relatively little experience with the mobile app - however, I did find a listing of some limitations of doing this with a non-Instructure hosted instance  -  see https://community.canvaslms.com/t5/Question-Forum/Mobile-app-for-Local-Canvas/td-p/233459 

[kimhuang]

@hechla Hi Adam, Have you figured out the answer to the following question

1. Is it possible to have the custom link not at the bottom?

I am also wondering about it as well. Thanks so much.

[hechla]

@kimhuang - No, I never figured out how to get it to not be on the bottom. We're happy with it though. I did figure out the target AND I was able to get it to only show up for students (well, it doesn't show up for admins, teachers, designers). I guess I follow instructions pretty well. 😄

[kimhuang]

I thought I posted the solution of positioning the new nav item in the desired position, but could not find it. Please forgive me if I post the duplicate answer.

Here is my solution:

replace this line of code:

$("#menu").append(n);

to :

$("#menu li:eq(2)").after(n);  <--- now the new item is at the 4th position.

[robotcars]

Hi everyone. I missed some responses during the Fall.

Re: Placement of the icon in the Menu

@kimhuang, thanks for jumping in and helping. Did you change the code to make n = icon? Not sure if others would immediately pick that up.

I played with this and found 2 flavors of solutions for folks to chose from. Note that some institutions will have a different count of Global Navigation icons based on their services/integrations/LTIs etc.

1) using @kimhuangs example, this will place the icon after a specific list item, where the value in Parens() is the existing item you want the new icon added after. This will be placed after the Users Profile/Avatar

$("#menu li:eq(0)").after(icon);

2) A solution that may more directly drop the icon above the Help menu without counting, or dealing with future additions to the help menu.

$('#menu').find('> li:nth-last-child(1)').before(icon);

These pertain to editing the source line on 

https://github.com/robert-carroll/ccsd-canvas/blob/main/global-nav-custom-links/global-nav-custom-li...

It's possible in a future edit to make it so individual icons can be placed specifically in the menu. 

[robotcars]

Please note this was developed before the Responsive Navigation Menu, and any user on a smaller ViewPort device will not see the Extra icon. I will get to this as time permits.

[robotcars]

@dsimmelink I have not, but I will try to carve out some time soon. I'm in a weird place where everything I'm doing is new, and finding time for smaller projects has been tough.

[dsimmelink]

Totally understand where you're coming from there! I'm implementing your current solution that works great (sand mobile interfaces) but am looking forward to having a solid solution for all devices.

Thanks again for your great work to help all of us!

[atreadwell]

This thread is the only source of information I have found on this topic and I'm grateful for all the responses and code samples!

I too have been trying to add items to the responsive mobile navigation menu recently with no success. The biggest hurdle is that the HTML of that menu is generated on-the-fly when the user clicks the button. So on page load (when the custom JS does its thing), the menu doesn't exist and therefore cannot be modified.

Has anyone else had any luck?

[yra]

Is there a script for the mobile device? It works great on the PC/Mac side, but we don't want to leave out the people using tablets or smartphones.