10 Outstanding Website Navigation Menus
Some websites leave us slightly disoriented, struggling to find the section we were looking for. Then there are those that feel like an effortless browse, as if one button intuitively leads us to the next.
When creating a website, the different elements of the page should come together in guiding visitors through your site seamlessly and with ease. One element that plays a decisive role in the user experience of your site and greatly affects navigation, is the menu.
What are website menus?
A website menu is a series of linked items that serve in navigating between the different pages or sections of a website. There are several kinds of menus, depending on the website’s content and design. The main types of website menus are:
Classic navigation menu: This most widespread kind of menu is placed in the website’s header, typically as a horizontal list.
Sticky menu: Also known as a fixed or floating menu, this menu stays put as visitors scroll down the site. These are ideal for long-scrolling pages.
Hamburger menu: An icon made up of three horizontal stripes that opens up into a menu once clicked. This design convention is rooted in mobile website design, but is widely used on desktop as well.
Dropdown menu: A menu in which a list of additional items opens up once visitors click on - or hover over - one of the menu items. This option is suitable for websites with a lot of content.
Sidebar menu: A list of menu items that’s located on the left or right side of a webpage.
Below are 10 examples of website menus, built with Wix. They represent versatile and creative uses of the menu in terms of both their website navigation and website design. Here they are, for your inspiration:
01. Brittney Johnson: Interactive sidebar navigation
The navigation on this online design portfolio by Brittney Johnson takes center stage. So much so, that the homepage here is dedicated solely to the menu. Brittney’s works are listed on the left, and when hovered over, they reveal an image from the same project on the right.
The sidebar, created using Velo by Wix, transforms the website’s navigation into an impressive, interactive experience. It’s accompanied by an additional minimalistic menu in the website’s header, which directs to the ‘About’ page and back to the homepage.
02. Payton Pitts: A hamburger menu with a twist
Payton Pitts’ photography website is right on trend with a handwritten logo and an earth-toned website color scheme. The navigation here is equally stylish, with an enlarged hamburger icon with uneven line lengths, resulting in a unique look.
Once clicked, the menu opens up into a sidebar (created using a lightbox) that fills the left segment of the screen with a beautiful abstract painting. Notice how Payton’s social media links are placed as a secondary, more subtle menu to the right.
03. Yang’s Place: On-brand navigation that’s easy to access
Chinese restaurant Yang’s Place’s website is fully branded with its logo appearing on the first fold, on the website’s header, and again in its fullscreen menu. The logo on the header stays fixed throughout all of the different pages, leading visitors back to the homepage - a great practice for improving user experience.
This navigation is accessible from both a hamburger menu (which opens into a fullscreen menu), and a geometrical website layout of photographs and text boxes on the homepage, created using the Wix Pro Gallery.
04. Protea: A classic menu waiting to be revealed
With large images of its food and Napa Valley venue, this restaurant website highlights their freshly-made cuisine and great ambience. The navigation is therefore less prominent in the design, with a classic menu that’s only revealed as we click on the hamburger icon.
Once the menu does open, it stays fixed on the page even as we scroll down, acting as a floating menu. For added navigation, there’s a sidebar to the right of the screen, leading to the website’s different social media accounts, as well as a CTA button to make a restaurant reservation.
05. William LaChance: An animated long scroll menu
While there is a classic sidebar menu on this artist’s portfolio, there’s also an additional one made up of images and video boxes that glide into view as we scroll down the page. This menu utilizes website animations and bright, vivid colors in grabbing visitors’ attention.
This loud and colorful scroll complements the much simpler sidebar, allowing for an interactive navigation method alongside a more straightforward one. Unlike the animations which are only on the homepage, the sidebar stays put on all of the website’s inner pages as well.
06. I Love Dust: A menu split up across all corners of the screen
This graphic design agency’s website puts on quite the welcoming show, with a fast-paced, fullscreen video that’s a showreel of the studio’s work. In contrast, the website menu remains simple and static, with a different menu item in each corner of the screen.
07. Mantra: A fullscreen menu that makes a statement
As a sports-focused design studio, Mantra’s website launches into a dynamic fullscreen video right as we enter the site. As we click on the website’s hamburger icon, the screen flashes bright blue, filled with nothing but four menu items in big, white letters.
Allowing the menu to take over the whole screen is a bold statement that’s perfectly in line with the website’s overall design. The use of large typography enhances this sense of brashness, making for an especially fun menu.
08. Stolen Goods: Classic menu, loud and proud
The products of this online store take the lead with their beautifully illustrated patterns, screen-printed by hand. The website’s clean design and generous amounts of white space give ample room for the product photography to shine.
But as a true design and art brand, you can count on Stolen Goods to infuse the site, and not just the products, with their personal sense of style. The classic header menu has been reinterpreted, grabbing visitors’ attention with large, colorful typography. Their bright color palette is just as beautiful as it is functional, indicating the current page using pink and blue.
09. Ruby Love: A dropdown menu for an eCommerce store
Specializing in period protection apparel, Ruby Love’s website offers a plethora of different items, from underwear to sleepwear and swimsuits. As a result, Ruby Love’s eCommerce website requires a navigation system that can encompass this diverse amount of information.
This makes the dropdown menu the perfect fit, as it opens another selection of categories once an item is hovered over. To draw more eyes to the menu, they’ve featured a woman in the top fold whose gaze is turned straight in the menu’s direction. This subtle effect can, in turn, help increase website user engagement.
10. Doris Liou: An illustrated menu with surprise animations
This illustration portfolio is filled with hand-made drawings by California-based artist Doris Liou, making its illustrated header menu feel right at home. The menu icons are drawn in pencil, with a small newspaper for the ‘Illustration’ page and a flower for ‘Social Media.’
When the menu icons are hovered over, colorful animated gifs sneak in and bring them to life. And as we hover over the illustrator’s name, we encounter a cheerful little character that’s floating around. That same friendly face also stars in the site’s favicon, tying it all together and adding to the portfolio’s branding and visibility.
By Eden Spivak
Design Expert & Writer