20 excellent web design with hidden menu navigation

Source: Internet
Author: User
Tags minimalist design

Navicon, the Hamburg icon, has become the preferred navigation module for more and more web design. Compared to the traditional navigation bar, the hidden menu navigation has its unique place in the design and the user experience. As a web design element that has risen with the development of mobile design, Navicon has not diminished its ability to guide the user, nor has it lost its importance as a basic Web page component, but also provided more creative space for designers and developers.

How to use the Navicon depends on the actual situation of the project, the relatively conservative site may not consider this option, and many of the pursuit of fashion simple, multi-platform experience unified emerging sites may be more favored Navicon, because as a navigation interface of its small and pleasant, easy to match the big picture and stylish web design, And hides a complex, fragmented menu of navigation content.

Is Navicon very monotonous? With the extra open process and the attention-grabbing details, Navicon has a lot of room for improvement and design possibilities as well as a good user experience. More importantly, it is suitable for all kinds of navigation: not only can clearly convey the message, but also help solve the problem of response speed, and can promote the Web page in the design of multiple platforms unified.

Next, we go through a series of web design to get a deeper understanding of the charm of Navicon and hidden menu navigation.


Large image background and parallax effects enhance the site vision, Navicon menu button in the upper right corner, click on the open you will see a very detailed design of the navigation menu.


Stylish photos are placed with the page header, with stylish slogan attracting the full appeal of the user. The hidden navigation bar is an ideal solution that allows users to shift their attention away from complex navigation to content.


The exquisite and symmetrical picture background lets the webpage have the other esthetic sense, if adds the navigation bar to be able to destroy this kind of beauty, therefore the designer puts the Navicon in the upper left corner. Conform to the habit, quiet and natural.


Text and handsome video background as a whole, the bottom of the dynamic arrows to guide the user down to browse, the Navicon in the upper right corner of the use of black and white strong contrast to highlight the sense of existence, does not affect the vision, nor from your vision disappeared. When the mouse moves up, the black bottom turns red.

We are Empire

Classic colors and simple design can be seen in the ingenuity of designers, hidden menu bar to keep the entire page quiet. Even when the mouse moves up, the dynamic effect is also very soft, black into red, the bottom of the short transverse slow elongation, between the movement, the taste is long.

Brand Junkie

The ornate rounded retro stamp occupies the center of the page, with a strong foreground background contrast. The upper-right corner of the Navicon integration degree is high, but the corresponding, the user is not easy to find.


Although the overall appearance of the site dark tone, but the foreground background contrast is quite ideal. Navicon and the overall style of the page echoes each other, click to see the complex navigation.


Unlike the ordinary burger icon, Monograph's Navicon is customized for the style of the Web page, slightly different but one glance. Excellent location, convenient use and uniform style.

Camp David Film

Although the Web page uses a relatively traditional navigation in the head, but the design team cleverly used the text substitution button, and the other part of the hidden in the Navicon, such a segmented navigation takes into account the needs of different users, showing a part of the important content, but also take into account the beautiful background and visual unity.

Michael Villeneuve

Michael Villeneuve uses a more minimalist design, with beautiful wireframe icons combined with text, which is clearly contrasted with a darker background. So is the Navicon in the upper left corner.

Exit Film

Site centralized content layout is very unique, symmetrical layout makes the page looks very neat. Navicon is not placed at the top, but in the left central position.

La ligne Rouge

Here, the role of Navicon is to complement the design and enhance the website features. The menu button and the middle hockey icon keep the style consistent, ensuring recognition and retaining the character of the page.


such as pictures, elegant fonts, hidden menu is really preferred.


The mainstream design is certainly good, Bie design is more memorable. The Tannbach navigation menu uses a Pull-down panel, not lacking interactivity, and is exquisite enough.

Cofa Media

The Web page uses the video background to show the organization's work flow, after clicking Navicon, the Navigation menu will occupy the entire screen, this and the mobile end design highly consistent, is worth the reference study


ALT_CPH14 's blue is absolutely impressive, and it's inspired by the early digital interface design. Under this hue, the Navicon is clear and obvious.


The Ball&claw website uses exquisite typography and elegant color schemes to create an elegant atmosphere that navicon with the atmosphere.

Hooch Creative

Remove the traditional navigation bar after the entire page refreshing, bright-toned site name, large font title, both in different ways to attract users attention, and Navicon in the upper right corner of the balance of the Web page vision.

Sam Dallyn

As a product Display class page, Sam Dallyn This site's page layout is very good, exquisite, complex, but also distinct. Tiny Navicon on the left without interference, and if you really need navigation to do something, it is not difficult to find.

The Years of Bose

The entire Web page is split between the designer and the mouse moves to one side, the middle of the line moves to the other side, activates the area, and attracts you with the help of the action and sound. The Navicon on the right side and other functions make up the sidebar for easy operation.


Black-bottomed navicon look conspicuous on a light-colored background. Click on the Navicon will show the black bottom of the navigation content, the menu appears when the dynamic effect has an unforgettable geometric texture.


Navicon and many different types of Web sites are perfectly fit, and there's a lot of room to choose from, and what you need is a bold imagination of careful analysis.

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.