Celebrate Excellence in Education: Nominate Outstanding Educators by April 15!
Found this content helpful? Log in or sign up to leave a like!
Hello,
A recent Canvas update left a lot of institutions without the ability to add additional resources to their Canvas Global Navigation. Previous discussions include:
Custom JavaScript/CSS Changes Adding custom menu items https://community.canvaslms.com/ideas/4034-custom-menu-items-for-new-ui
Source Code: https://github.com/robert-carroll/ccsd-canvas/tree/main/global-nav-custom-tray
README
This JavaScript will spawn and style (with CSS) DOM elements that mimic the Canvas global navigation tray, with animated easing for opening and closing the tray, and other interactions with the global navigation.
Features
- Custom tray name with tooltip
- SVG navigation icon included, or provide your own
- Links with optional description
- Footer text optional
Icon Size
Use the SVG element's width and height to set the icon size for the navigation tray icon.
26px is about the default. see #comment-157915
Role Based Conditions
Tray Limited To Role(s)
To create a tray that only shows up for certain roles, wrap the tray in an if condition that checks for role.
2 role example
if(ENV.current_user_roles.indexOf('teacher') >= 0 || ENV.current_user_roles.indexOf('admin') >= 0) {
// tray source here
}1 role example
if(ENV.current_user_roles.indexOf('student') >= 0){
$(document).ready(function() {
///* set tray title, icon, links and footer here *///
///* for user role based conditions see README *///
var title = 'Resources',
svg = '/pin-gregor-cresnar.svg',
trayLinks = [
{ href: 'http://www.example.com/your-library', title: 'Library', desc:'Optional text description' },
{ href: 'http://www.google.com', title: 'Google' },
{ href: 'http://www.example.com/help-desk', title: 'Help Desk', desc:'Optional text description' }
],
footer = 'Optional footer text, put whatever you want here, or leave it blank.';
///* options are above for convenience, continue if you like *///
// tray source here
});
}Tray for everyone, links by role
You can also create a tray that will appear for all users, but provide links (or even the tray name, icon, and footer), specific to the user role.
var title = 'Resources',
svg = '/pin-gregor-cresnar.svg',
// default links for all users
trayLinks = [
{ href: 'http://www.example.com/your-library', title: 'Library', desc:'Optional text description' },
{ href: 'http://www.google.com', title: 'Google' },
{ href: 'http://www.example.com/help-desk', title: 'Help Desk', desc:'Optional text description' }
],
footer = 'Default footer for all users';
// these links are appended to the tray by user role
if(ENV.current_user_roles.indexOf('teacher') >= 0 || ENV.current_user_roles.indexOf('admin') >= 0){
trayLinks.push({ href: 'http://www.example.com/your-library', title: 'Teacher Library', desc:'Optional text description' })
trayLinks.push({ href: 'http://www.google.com', title: 'Google' })
footer = 'Teacher/Admin Footer overwrites default';
} else if (ENV.current_user_roles.indexOf('student') >= 0) {
trayLinks.push({ href: 'http://www.example.com/your-library', title: 'Student Library', desc:'Optional text description' })
trayLinks.push({ href: 'http://www.google.com', title: 'Google' })
footer = 'Student Footer overwrites default';
}Credits for the included navigation tray icon - Pin
Pin by Gregor Cresnar from The Noun Project
https://creativecommons.org/licenses/by/3.0/
1 Solution
Hi,
Hey, how would you shoehorn a link in the "People" feature that only the Teacher course role would see? Right now, with the code below, both students and students see the link(s) - where in the adjacent "Grades" lines there is differentiation (two different pages, Teacher Grades and Student Grades, we know... People seems to be the same page just with a couple of buttons dropped in there for Teacher). -Thanks!
--
Hey Robert, what do you think it would take to make the "RIght-Sidebar Logo" a clickable image/to embed a link in that space?
Which one are you trying, jQuery or plain/vanilla JS?
Does it give an error in the console?
Can you take a screenshot of the element using Developer Tools, like this... (don't hide it with the menu like I did)
...try to show me anything around or nested within that element by expanding ▶
It looks like with the last production release custom navigation options are only showing for the user when looking at their Canvas dashboard. Has anyone else noticed this? (Anyone got an idea on how to fix it?)
Dashboard....
Dashboard Course, Pages, All Pages, Page
I am not using a tray but I have previously commented in this thread about what I have done. I do not have a lot of coding experience but I have used the following code (attached as a TXT file after original comment) to add a "Resources" button (which links to a public course in our Canvas environment) to our side navigation and it seems to still be working after the latest production release.
The icon-pin code that I used I came across from https://instructure.design/#iconography; which from what I understand is where (or what) we should be going to (or doing) for proper design
I understand that all of us only have so much information but should I prepare for this code (including the icon assigned to it) to stop working in the near future?
