Apr 04, 2022
In Welcome to the Forum
I believe the best way to learn is by example, so I’ve prepared an awesome list of navigation menus from all over the web. They range from extremely simple to very detailed, but what’s important is the context – they all perfectly fit the website’s atmosphere and design. Let’s get started. 1. Unsplash Great navigation menu: UnsplashThis is as simple as it gets – and it’s a great example of a main menu. The whole point of Unsplash is to showcase amazing photography without any distractions. For this reason they use lots of white space and minimal design to match the website’s overall feeling. That’s a mission accomplished. 2. Light & Shadows Great navigation menu: Light and ShadowsThis is another simple menu, but it features some nice details. The sans-serif font up top is in all caps, but due to it’s small size and faded light grey color it exudes elegance. Furthermore, the items are actually doubled in the hero area making the main menu less important in the overall structure of the site. 3. CHEF S Great navigation menu: CHEF S CHEF S’ menu is hidden away in the upper-right corner, but when you click it the special leads navigation expands across the entire screen. This has an in-your-face impact (the bold color doesn’t hurt either) that is balanced by a semi-opaque background and lovely sans-serif font. 4. Edinburgh Zoo Great navigation menu: Edinburgh ZooEdinburgh Zoo’s website is an example of how you should structure a navigation that requires loads of submenus. We start from the top with an all-caps, sans-serif font that sits on top of a skewed beige background and features the less important menu items. Underneath we have a simple menu that uses a serif font that’s separated into key categories. On hover, we can see each of these expand into a sleek-looking drop-down. A+ all around. 5. Scotch & Soda Great navigation menu: Scotch and SodaCan you guess, just by looking at this main menu (and without reading any of the menu items) what this website’s all about? Yep, it’s a fashion website.This is a classic example that’s still in style and very much used throughout upscale fashion. It uses a serif, all caps font, generous proportions and adequate spacing. The contrast is set to max: white on black. All these elements make this niche very easy to recognize, before you’ve even explored the site.