9 Inspiring Nav Bars We Can All Learn From

Each year there are advances and changes in web design trends. Nav bars are elements that might seem to always stay the same, but even they change from time to time. Although some essential navigation bar features will likely remain the same throughout the years, there are also some unique aspects of a nav bar we can learn from.

Studies are showing people’s attention spans keep growing smaller. In 2010, if a page took about six seconds to load, it would see a 40 percent loss in conversions. Now, that same page that takes six seconds to load will see a 50 percent loss of conversions. People are less patient and expect everything to be faster. So, you better grab their attention from the minute they hit your landing page. You also need to ensure your navigation is easy to find.

A nav bar is the one thing you can quickly change up on your site to improve everything from stickiness to conversions. To start creating your own stunning navigation bars, check out these nine inspiring examples.

1. Fixed Hamburger Menu

Many love to hate hamburger menus, but the truth is they still have their place. In a mobile-heavy world, where 77 percent of adults who live in the United States own a smartphone, creating a mobile-friendly navigation menu is a smart move — in fact, it’s a necessary one.

You’ll find an excellent example of a fixed hamburger menu on the Visage landing page. As you scroll down the page, the simple hamburger menu follows you, so you can quickly navigate wherever you’d like to go without having to scroll back to the top. The “sign in” link also follows.

2. Hidden Navigation Menu

If you want to get creative, consider hiding your navigation menu behind a full-width image that fills the screen. Look at how attractive Johannes Leonardo’s landing page is with his navigation structure. When you first land on the page, you’ll see an image. Once you make any move, the image disappears and reveals a fixed navigation bar at the top of the page. This is a unique way to put the navigation bar in an expected location while also mixing things up a bit.

3. Drop-Down Menu With Style

Drop-down menus are an efficient way to show your website hierarchy without overwhelming the visitor with navigation buttons. Uniquely You Orthodontics offers a basic set of text navigation options, but a drop-down menu appears when you hover on one of the links providing several other options to choose from. This works particularly well for sites that have grown over time. The key is to select the main categories and figure out where each page fits within that structure.

4. Animated on Hover Top Navigation

Users like to know where they are on the page, even if the cursor were to disappear for a minute or two. Highlighting text, offering a change in color or showing movement in some other way keeps the online visitor engaged as they browse around your website and get accustomed to the navigation structure.

Simulations Plus offers a unique animation where the dimensions of the buttons change as you hover your mouse over each one, appearing recessed or protruding.

5. Vertical Collapsible Menu

If your site has a lot of different pages and categories, another option for organizing them is to create a collapsible vertical menu, such as the one on YouTube. Note that you can navigate home, to your subscriptions or your history. This combined with the search function at the top of every page allows the user to browse to where they need to go quickly.

6. Faded Out Nav Bar

If you want to put the focus somewhere other than your navigation bar, you can fade out the links and emphasize a graphic, headline or even a logo. Dataveyes does this with their website, which is all about human-data interaction.

It is quite catching the way the image morphs and changes. However, the navigation is right there at the top if the user needs it and brightens up with a quick hover over the letters.

7. More Than One Location

If you want to highlight some features on your site more than others, you can create big, beautiful headlines with navigation links — as they did at Este Coulture, showcasing jewelry, for example — and also have your standard navigation links at the top of your page. This allows you to funnel site visitors to the places you’d most like them to go while still considering those who already have a destination in mind.

8. Moving Links

Although this type of design might not work for every site, artistic sites like Possibles will benefit from moving footpath links. You can click anywhere on the screen and find a variety of choices. If your site caters to highly artistic visitors, the creativeness of this design just might appeal to that target audience. Note that the site also tells the user to click anywhere to find an alternate path.

9. Circular Navigation

Circular-style navigation offers an exciting look, particularly on a page with a full-width image. Note how Aviva has navigation across the top but then provides additional links to each side of the image. You could also circle the navigation around a headline or drawing. Imagine how this might look centered around your site logo, for example.

A Nav Bar That Makes Sense

There key here is to find the navigation structure that makes the most sense for your website. If your audience is very traditional, you might want to stick with horizontal, above-the-fold navigation. On the other hand, if you cater to a highly artistic crowd, you can get by with adding in a bit more creativity.

Remember, always test any navigation changes to make sure your site visitors respond well to the changes. A/B testing is an efficient way to see if the response is positive to your nav bar changes.