6 Navigation Bar Design Ideas for Web Designers

1. Full-Screen Navigation

This is an example of full-screen navigation. After clicking the menu button (for this instance, the “open overlay” button) the page will go full screen with different options for navigations. It usually has a close button if you wish to remain on the same page.

*References for the sample websites are in the last slide.

2. Navigation with hover drop-down list

This particular design is based from traditional navigation bars. Unlike other navigation bars with solid colored bars, this design seems to have floating texts. This design has a drop down list. When you hover the categories menu, it reveals several sub-categories.

3. Hidden Vertical Menu

This particular design uses Navicon. It is the three-line icon that you usually see in the Facebook mobile app and other websites. It gives the users the option to hide navigation bars as they scroll through the page. Some hidden menus automatically hides.

4. Hidden Menu to Full Screen Navigation

This is a combination of full-screen navigation and hidden menu. Just like the hidden vertical menu from the previous slide, it also has Navicon.

5. Traditional

This is the traditional design of navigation bars – horizontal and always on top.

6. Scrolling Navigation

This may look like a traditional navigation bar, but it has a scrolling navigation feature. This allows users to navigate the website by just scrolling down. This is similar to popular templates in Wordpress where users can view more posts without clicking a “next page” button.

There are a lot of navigation bar designs all over the internet because web designers keep innovating navigation bars (or any

part of a website for that matter) for better user experience.

Related article:• 5 Basic Parts of a Website and Their Design Trends for 2015

The images were screenshots from the following websites:

1. http://www.campdavidfilm.com/2. http://tympanus.net/Development/FullscreenOverlay

Styles/index9.html3. http://michaelvilleneuve.fr/4. http://codyhouse.co/demo/full-screen-pushing-naviga

tion/5. Can be found at http://sumofy.me/ portfolio.6. https://disqus.com/websites/