I was on the Invision website the other day and I wanted to snag their logo for some reason or another. Sometimes you can have better luck doing that (like when you happily discover it’s SVG) than you can Google Image Searching or even regular web searching for something like “Invision Logo” and loping to find some kind of branding page with a logo kit download.
So I right-clicked their logo, hoping to “inspect” it with the DevTools and check it out.
Rather than showing me a context menu, it triggered a modal:

I was pleasantly surprised, because that’s exactly what I wanted.
Here’s a simple zero-dependencies way to do that
See the Pen Right Click Logo to Show Logo Options by Chris Coyier (@chriscoyier) on CodePen.
Your app might already have a whole fancy system for showing modals. If so, then it’s even easier. Attach a “right click” event (it’s actually called contextmenu
) to the logo and do your thing.
logo.addEventListener('contextmenu', function(event) {
// do whatever you do to show a modal
}, false);
If you don’t have a modal system in place, it’s very easy to make a rudimentary one. You need an overlay and a modal element:
<div class="overlay" id="overlay"></div>
<div class="modal" id="modal">
<h3>Looking for our logo?</h3>
<p>You clever thing. We've prepared a <a href="#0">.zip you can download</a>.</p>
<p><button id="close-modal-button">Close</button></p>
</div>
And a plan:
- When the logo is right-clicked, show the overlay and modal
- When the close button is clicked, hide them
No problem:
var logo = document.querySelector("#logo");
var button = document.querySelector("#close-modal-button");
var overlay = document.querySelector("#overlay");
var modal = document.querySelector("#modal");
logo.addEventListener('contextmenu', function(event) {
event.preventDefault();
overlay.classList.add("show");
modal.classList.add("show");
}, false);
button.addEventListener('click', function(event) {
event.preventDefault();
overlay.classList.remove("show");
modal.classList.remove("show");
}, false);
Bare bones styling:
.overlay {
position: fixed;
background: rgba(0, 0, 0, 0.75);
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
}
.overlay.show {
display: block;
}
.modal {
position: fixed;
left: 50%;
width: 300px;
margin-left: -150px;
top: 100px;
background: white;
padding: 20px;
text-align: center;
display: none;
}
.modal.show {
display: block;
}
.modal > h3 {
font-size: 26px;
color: #900;
}
Never EVER break the default context menu and override with your own custom behavior OMG what are you an evil troll you should have never been born
You’re right! Oh god what have I done! Nothing can ever change! Murderous screams!!
This is a great way to solve the grab-their-logo-for-the-press-page problem. A lot of websites sprite all their images and it is difficult to quickly grab their logo. Most times I resort to using the snipping tool where a direct image is not available..but that doesn’t entirely work if either website (source or target) has a non-white background.
Why don’t you just stop propagation of the event on right click?
I like this idea generally.
But, this seems to present a bit of an accessibility issue. What if you’re right clicking to open a new tab/window (assuming the logo links to the homepage)? The number of my colleagues that use that particular method to open new tabs is pretty surprising. And, on mobile, ‘contextmenu’ is really the only way to open a new tab.
Anyway, worth considering.
Command/Control + Click still work, and I assume a middle click would too on a scroll wheel mouse. Just throwing that out there, I agree with you otherwise.
I always open links in new tab via context menu.
I checked and Chris’ code affects keyboard contextmenu as well :-/
My first encounter with a scripted contextmenu handler was on a artist page, which tried to prevent me from inspecting her webpage. (I could inspect it via Menu Bar -> Edit anyway).
Back to topic, I would not recommend to script the contextmenu because it breaks the UX for the many for the sake of pleasing a few.
There are two possible fixes:
don’t prevent the context menu from opening (show both the menu and the overlay)
show the context menu on the second right click (YouTube does this on videos)
And always check here: http://www.brandsoftheworld.com/ for vector options first. There are vector files for smaller companies as well as big ones.
Just as a matter of course. They don’t have InVision, but it’s a great tool if one actually needs vector.
Remember this too: https://css-tricks.com/an-interview-with-andy-fitzsimon-about-logomono/
http://logos.wikia.com/wiki/Logopedia is also an excellent resource for the latest vector logos as well as historical logos for many companies and products.
Aww, were you thinking of me when you wrote this? <3
I’m mostly okay with this. Opening the home page in a new tab becomes a hassle when you can’t long-press the logo – something I do frequently. Desktop at least has alternatives (Ctrl+click / MB3) but not everyone knows about those/uses them.
But would it kill anyone to just add a link in the footer?
[About] [Branding] [Contact]
I agree Nadya. If sites have the foresight to package their images for convenient download, why hide it behind the logo. Set the tool-tip (title) text to direct the visitor to a link at the bottom of the page. Don’t override the context menu, make a feature of your good-will and take pride in your logo.
Okay so everything everyone else has said is cool, but you’ve forgotten one thing:
KEYBOARD ACCESSIBILITY, GOD DAMN IT!
If you’re going to tell people how to develop a dialogue system, at least tell them that it is crap and anyone who uses the keyboard to navigate their site will hate them forever. If you can’t be bothered to develop something accessible yourself, try using something like jQuery UI, that already has (reasonable-ish) accessibility.
P.S. You should also mark up with ARIA, but that’s a tiny bit less important than keyboard accessibility (in my opinion as a legally blind dev and web user).
Most keyboards have a contextmenu button (one left of Right Ctrl).
I can navigate the example just fine using only my keyboard:
Tab (focuses logo)
ContextMenu (Opens Dialogue)
Tab Tab Space (Closes Dialogue)
But on a more complex site, that wouldn’t work, as you would have to tab through all the content. The dialog doesn’t get focus when first it opens, or capture focus (it is visually modal, so why not by keyboard?). That was my point. Sorry I didn’t express it clearly enough.
I remember first seeing this many moons ago on the Aksimet website (2011-ish), although for some reason they stopped doing it.
The inevitable accessibility mithering aside, its a very useful functional addition – especially if it stops the likes of Johnny Marketing Exec diving for the low res PNGs grabbed from Google, or a 5 years out of date, poorly vectorised version from Brands of the World.
Seriously, I wasted hours in my agency life fixing incorrectly coloured, horribly scaled, and just plain wrong logos for clients who were about to embarrass themselves at some CES or MWC keynote or other. 50 Shades of Blue anyone?
Really innovative. Should use this soon.
Thanks for the article Chris!
One of my highest voted answers on StackOverflow is doing a personalized menu when right clicking an element, check it out: http://stackoverflow.com/a/20471268
It has all the bells and whistles, including some that this one is missing:
Close when clicking outside (but not somewhere inside)
Handling clicks inside it with
data-action
It’s a slightly different user-case, but many of the code is reusable (:
Can’t agree more on “Never EVER break the default context menu and override with your own custom behavior”, I learnt that while designing for #a11y.
The only reason I will never use this is because the number of users that need this feature gain far less value than the confusion or errors it will cause for people that don’t understand why this popup shows up.
Also, adding a link to the footer, or elsewhere (in search?) for a press kit, branding package, etc… are what a designer would look for anyways.
Also, it’s a non-standard navigation tactic. Is it discoverable? Maybe, but is it worth the price of alienating normal users? It never has in the past for me or my clients.
Last, it’s a slippery slope. Consider any sort of resource, content images, documents, videos, etc… how many places could you replace the context menu with the goal of “predicting” what the user wants? Slippery slopes are slippery, best not to go near them for the hopes of a tiny benefit to a very small user group.
This has never been a real problem for me.
This is so neat!
Noone besides designers and webdevelopers will ever see this.. and it’s really useful! Thanks for sharing this lovely snippet!
This is a really bad idea, I wonder how you managed to put together this entire post without it occuring to you that you’re giving a ton of people advice to override basic browser functionalty for an arbitrary feature that the vast majority of users, myself included, will never ever need. Very silly!
I like the idea.
And still you can show a ” _blank” link to the home page in this modal.
shift + right-click defeats this.
For everyone who says this is a bad idea and it ruins everything related to anything… Did you know it existed with invision? Have you noticed it before Chris wrote about it?
I had never heard of this site before hand, but I am guessing your point is that since it didn’t cause a problem for us, then it’s not a bad idea.
My concern is that this kind of thing reminds me of how Microsoft/Apple/Google/Gnome/Ubuntu, decides an arbitrary change to an interface because it’s suits some UI designer’s pet idea instead of it truly being wise decision. Then the same principle spreads like a cancer.
Why not replace all the right click menus for all the links as well? There may be a similar compelling argument in the future from the same UX designers…
Or all the right click menus for all the images on the page content? Maybe you are too young to remember this, but this was a cancer on the internet years ago, in an attempt to stop people from “stealing” content from sites. Yes, this was wide spread.
Consider if this idea had stuck around and gained acceptance? Or if browser vendor’s decide to just remove right-click menus altogether to “give us a better experience”? Then the right-click concept for this article wouldn’t even be possible.
So, yes, it’s likely to ruin a massive amount of browser interfaces/web-sites/who-knows-what by starting something like this en masse.
I sure hope the wisdom of the older folks never goes out of style, or we may be doomed to repeat ourselves into a corner that we can’t get out of in the future.
I would use the
<menu>
and<menuitem>
tags to enhance the browser instead of breaking it. Unfortunately it’s still lacking support.Browser support: http://caniuse.com/#feat=menu
Kudos for moving the context menu to the bottom of the HTML, to help encourage “above the fold” best practice.