10 Exceptional Menu Bar Navigation Designs

Here we go again with another roundup of menu designs to give you inspiration for your website or portfolio. This time we are showcasing some great, single level bar menus. If your website doesn't have a lot of pages, a bar menu like these will work perfectly and keep your users focused on the page content. Most menu bar navigations have 1 level and a larger font size. Since these type of navigations are optimized for smaller websites, the designs can be much bigger and more extravagant.

Take a look at the menu Bar navigation we have found and let us know what you think. If you have suggestions or have a menu design you think we should include, let us know in the comments.

1. Responsive Flat Menu Bar

This menu bar is not only simple and functional but also packs a responsive punch. Ready for any situation this menu will work on all devices from your desktop to your iPhone.

http://cssmenumaker.com/menu/simple-responsive-menu

Responsive Flat Menu Bar

2. Responsive Textured Menu Bar

This menu bar uses a really cool textured pattern that gives the design a little bit of depth. The menu is also fully responsive, which means it needs a little jQuery magic to work on all devices.

http://cssmenumaker.com/menu/responsive-menu-bar

Responsive Textured Menu Bar

3. Indented Blue Menu Bar

This simple menu bar employs a linear gradient on the background to give the menu depth. Active items are highlighted by an inner box shadow that gives the menu element and indented look.

http://cssmenumaker.com/menu/indented-horizontal-menu

Indented Blue Menu Bar

4. Tabbed Graphite Blue

This blue, tabbed menu is a great addition to any website that needs a tab bar navigation. If you have a simply designed site, use this larger bar navigation to give you site some style.

http://cssmenumaker.com/menu/tabbed-menu

Tabbed Graphite Blue

5. Graphite Green Bar Menu

A little bit of a biased opinion on this bar menu since it happens to be one of our own. Either way head on over and grab the source code for this menu and integrate into your site.

http://cssmenumaker.com/menu/rough-algae-horizontal-menu

Graphite Green Bar Menu

6. Bubble Wrapped Menu Bar

This menu bar uses pure CSS to achieve its design.

http://cssmenumaker.com/menu/bubble-wrap-horizontal

Bubble Wrapped Menu Bar

7. Lifted Bars

This little horizontal menu is called Chunky and comes to us from Pixden. What's unique about this navigation is that the thick bottom border makes it jump off the page.

http://www.uiparade.com/portfolio/chunky-web-menu/

Lifted Bars

8. Wooden Nav Bar

A wood grained background is the defining characteristic of this menu. Perfect for use with a minimal design that needs the navigation bar to be the focal point.

http://dribbble.com/shots/243719-Freebie-Wooden-menu

Wooden Nav Bar

9. Indented Bar Navigation

The active state for this bar menu lets you easily know what's up and where you are at on a site. Used with a dark background the indented shadowing help define this bar menu.

http://www.uiparade.com/portfolio/inspired-navigation/

Indented Bar Navigation

10. Bold Web App Bar

This bold menu bar would be the perfect addition to your website. The simple bar design with the larger, graphite container command the users attention.

http://www.uiparade.com/portfolio/web-app-menu/

Bold Web App Bar