There have been quite a few trends going around the internet in terms of design. And here’s a fresh one — full-screen menus.

To understand how this trend became possible, we first have to understand the rise of hamburger menus. The first use of hamburger menus started with mobile devices. Since the mobile screens provided very little real-estate for designers to work with, they had to find some way to make the site navigable without obstructing the main content of the page. And thus the hamburger menu was conceived.

The popularity of the hamburger menu grew and carried on to the desktop sites as well. Since then a lot of designers have opted to use the full-screen menu which is activated by the hamburger menu in their designs for the desktop to give the site a premium feel.

I have to admit, even though I didn’t particularly like the idea of using hamburger menus on desktop sites, they kind of grew on me. They’re not fit for use in all cases but once you learn the real purpose of using them — to reduce visual clutter and still make the menu items accessible — you can learn to use them in scenarios where they’re most appropriate.

The Boring Menu

Usually, the full-screen menus are just designed to be really luxurious versions of the regular horizontal top navigations that we’re accustomed to seeing. Home, Work, Blog, About and Contact all listed horizontally in relatively huge letters, with a touch of brand enforcement and creativity shining through in some. Sure, there’s nothing wrong with that but it kind of gets boring. There’s room to do a lot more.

TenTwenty’s full-screen menu merely lists the items.

When you’re designing a full-screen menu, you’re inviting the user to click on the hamburger and you have to power to present to the user a lot more valuable information.

Getting Real Value Out of the Menu

But you can take this trend a step further and add some real value to this screen that would otherwise just be a simple navigation. Let’s see what we can do to achieve that.

Get creative. Bring some identity. You customize the whole site to suit the brand’s needs and the message it should send. Why should the menu be any different? This is a great opportunity to reinforce brand identity.

Drygital’s menu uses a vibrant color gradient that is derived from their branding

Bring the social media links in there. Social media icons are usually reserved for the footer of the websites or in top navigations if there’s room for it. The icons don’t take up much space and are a great addition to the lonely full-screen menu.

Your address and contact details. Again, these are usually reserved in the footer or a separate contact page. This is a great chance to let your users know where you’re based and how they can contact you.

Make use of the space. You can benefit from the real-estate available on this screen by pushing content that you think the user would find valuable. Ueno does a great job of placing its social links, blog, and other products on its left while the major focus still remains on the navigation links. Also, note the placements of the address of its office locations. This menu is heaven.

Ueno’s full-screen menu is simple and effective

AgenceMe also makes wonderful use of the space by using it to show content based on what the user hovers over, much like a mega menu. I really like the way they decided to showcase the projects upon the hover.

AgenceMe’s fullscreen menu showcasing their projects when the user hovers on the “Projects” menu item.

The Possibilities are Infinite

So you see, there’s so much more you can do with the once-boring menu screen. The next time you sit down to design a menu, ask yourself — “What more could I do with this?”

This article originally posted on

Leave a Reply