Use of Vertically-Oriented Slide-Out Menus in Website Design

Use of Vertically-Oriented Slide-Out Menus in Website Design

We should all agree that the primary navigation must always be visible and be a salient feature in a website, however, the last couple of years this fundamental rule has undergone some changes that are mainly caused by current tendencies.

Today main menus can have a more inconspicuous appearance. Numerous designers prefer to hide the navigation behind a simple icon, which reveals the navigation panel on demand. And if earlier designers took care about free space, having made the menu as compact as possible, then nowadays slide-out navigation is able to occupy as much space as it needs. Being borrowed from mobile and tablet app interfaces, they can easily delight users with their diversity.

They can appear from various sides of your website, have horizontal or vertical orientation. Also, if necessary, they are enlivened by some amusing effects. The classic version, of course, is a horizontally-oriented slide-out menu that appears from the left side, however nowadays numerous websites are populated with vertically-oriented menus that elegantly drop from the top. And today we are going to examine exactly this particular solution.

Slide-Out Menus in Web Design

1. Pablo & Rusty’s

We are going to start with Pablo and Rusty’s website. It features a basic slide-out menu that is filled with some high-quality images; each item has its own marvelous picture, icon and color, however, since the menu is superimposed over another spectacular image that takes up almost the whole area of the welcome screen, its beauty slightly fades and merges with the environment.

Pablo & Rusty's

2. Kevin Lagier’s Portfolio

Unlike the previous example, here the menu occupies the whole header section. The designer plays on contrast, making the navigation look noticeable mainly due to light coloring. Ultra-narrow subtle typography is not an accidental choice here as well; it effectively fits into the whole design, adding elegance and sleekness to the appearance.

Kevin Lagier

3. Levi Van Veluw

Here the menu also stands in stark contrast to the background, of course, thanks to the utilization of dark and light tones. Moreover, the navigation is divided into 2 essential parts, the first one as befits comprises integral pages, and the second one is linked to portfolio items.

Levi Van Veluw

4. Nike Pro Combat Recovery

Nike’s promotional website can boast a truly conventional vertical drop-down menu. Here you will find the classic variant of a truly comprehensive navigation panel that is stretched across the entire width of the screen. The greyish coloring and black as a secondary shade make the content look easily readable.

Nike Pro Combat Recovery

5. Synergy Yoga

The subtle pull-out menu occupies the whole screen, so you definitely won’t miss it. The warm soft greenish coloring that is used for the main backdrop recreates a positive and calm atmosphere that is necessary for a website dedicated to Yoga courses.

Synergy Yoga

6. Essen International

Here, the menu wisely takes up only half of the available place. This is a really excellent solution for those who want to clearly display navigation, and at the same time, draw users’ attention to eye-catching portfolio pieces.

Essen International

7. Scotch & Soda

Scotch & Soda is a topnotch website dedicated to a popular apparel brand. It also has a massive navigation that should be presented in a clear and non-intrusive manner, so here much like in example 4, the choice has fallen on a traditional drop-down menu that compactly comprises all categories, featured items, and even extra data.

Scotch & Soda

8. Michele Mazzucco

The website radiates minimalism and neatness; and so does the menu. Though it embraces only 2 blocks of links, where the first one is responsible for providing users with easy tools for sharing data via social media and the second is a regular vertical menu, yet it still has a really elegant and well-thought-out look.

Michele Mazzucco

9. Your Majesty

When the landing page is populated with magnificent images and videos that should fix users’ attention to agency possibilities, the menu that is based on a clean rigid background, sharp typography and the absence of any embellishments is a truly perfect and highly effective solution.

Your Majesty

10. Philboss Design

This is a sleek online portfolio of a high-end designer/developer. He skillfully leverages space of his website, making the menu look rather small yet quite noticeable. The latter takes up only one tiny line placed on the top of the website.

Philboss Design

11. Audi CES

The website has a distinctive, overwhelming geometry vibe that is capably transmitted into a menu. The navigation simply enchants by its offbeat and eye-catching triangle-shaped items that are based on various automotive images.

Audi CES

12. Lee Gargano

Here the slide-out menu uncovers not only the main navigation but also several key features such as social media and news feed. The bright green coloring in collaboration with black and white tones, which are used for graphics and font, establish a quite sophisticated appearance.

Lee Gargano


This is another fantastic website design that is dedicated to the apparel industry. However, in this case, the menu occupies only a small part of the screen, presenting data in a compactly-arranged manner.


14. Ndesign

Here the drop-down panel consists of only social media links. The calm bluish coloring laconically contributes to the whole composition and corresponds with the cosmic vibe, which permeates the entire site.


15. Julius Ehrlich

Julius Ehrlich has a subtle and slick online portfolio that has confidence in a mix of a smooth heavily blurred background and elegant tiny typography. It seems that the designer wants to provide his online audience with lots of room for a pleasant stay. The navigation is also tightly-packed and has lots of whitespace.

Julius Ehrlich

16. CoolFarm

The green color certainly is a primary one that recreates calm, convivial and cozy general feeling. The menu also utilizes this tone in order to naturally fit into the design. The blend of relatively huge typography, white hue and clean solid color backdrop gives the navigation a neat appearance.

Cool Farm

17. JCM Ink

JCM Ink has a matchless website dedicated to their Tattoo salon. The designer leverages magnificent textured graphics, classy black-and white color combo and some pleasant effects. This theme also nicely runs through the navigation panel.


18. RSR

RSR take care about the clarity and simplicity of the menu, making it look neat and primitive in a good way. Relatively huge bold typography, contrast coloring and clean background are the main building blocks of the design.


19. Volkswagen up

The dark coloring comes through the whole design and the menu is no exception. It has a lovely touch of flash-style navigation that is aimed at fascinating online visitors by its delicate appearance.


20. Pete Nottage

A narrow stripe, which slides out from the top of the website, reveals the chief navigation. The latter includes several trendy ghost buttons that immediately grab attention.

Pete Nottage


Using a slide-out menu is a truly huge trend this year. Numerous websites have resorted to this type of navigation in order to save space, and at the same time, not to lose readability of navigation. There are various implementations, and we have considered a vertical-oriented one that is gaining popularity each day.


Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.