How to Design a Website Navigation Bar

CEO Gabriel Shaoolian explains web design for small business

Creating a site that's easy to get around will help you convert visitors into customers.

It's easy to get excited about designing—or redesigning—your website. It's a chance to showcase your products and services to an almost limitless audience—and put your creative chops on display, too.

But before you get caught up in graphics and colors, you'll need to consider a few other basic elements. Chief among them is how you want visitors to move around your site, which will be largely driven by the navigation bar running along the top or the left rail of each Web page.

"Anytime we start a project, we sit down with the client and, before you ever settle on design, you really have to think through the navigation," says Lindsey Marshall, a marketing executive with Red Clay Interactive, a Web development firm based in Atlanta. Red Clay was a 2009 Inc. 5000 honoree. "That's crucial."

We've talked with experts about best practices in developing this essential online tool.

Designing a Website Navigation Bar: The "Super" Nav, Main Nav, and Side Nav

First, let's go over some terminology. The primary navigation tools on a website include the "super" navigation, main navigation and side navigation, though you don’t necessarily need all three.

The "super" nav runs all the way at the top. You'll notice on the site that it includes tabs for Home, Magazine, Blogs, etc. Outside of the Home button, these are the product categories offers. For a service-oriented business, this is where you want to keep your "call to action" items, or the things that get users communicating with you, says Gabriel Shaoolian, CEO and founder of Web development and online marketing firm Blue Fountain Media, which is based in New York City. "If you have something that you update frequently like a blog, keep that in the super nav," he says.


Ready to discuss your project? Work With Us
Blue Fountain Media is recognized as a
Top Digital Agency by
Ranked #1 Interactive
Agency by top interactive agencies example
Ranked Top 10 Digital
Agency by awwwards logo
Ranked Top 10 Agency
Worldwide by IMA logo
Sign Up to get the latest on Digital Trends
Our Locations
New York Headquarters
New York Headquarters
102 Madison Avenue - Second Floor
New York, NY 10016
Chicago Office
Chicago Office
222 Merchandise Mart Plaza, Suite 1212
Chicago, IL 60654
Seattle Office
Seattle Office
14980 NE 31st Way, Suite 120
Redmond, WA 98052
  • 102 Madison Ave, 2nd Floor
  • New York, NY 10016
  • 212.260.1978