A Super Simple Horizontal Navigation Bar

Published September 4, 2009 by Rob Glazebrook.

Simple Navigation Bar

I occurs to me that, while I’ve written tutorials on tabbed navigation bars, dropdown navigation bars, and even horizontal dropdown navigation bars, I’ve never stopped to explain how to build a basic, no-frills horizontal navigation bar. And in more cases than not, a simple navigation bar is exactly what the doctor ordered.

So today’s tutorial is all about going back to basics. This is what you need to know to build a simple navigation bar like the one pictured above (and you can see a working example here).

The List

As with most modern navigation bars, ours will be based on the unordered list (<ul>) tag. This makes semantic sense, a navigation bar is really nothing but a list of links leading into your site. The traditional horizontal orientation is simply a convenient means to get all of our most important list items “above the fold,” so the user can see them without having to scroll down the page.

So here is our sample HTML:

<ul id="nav">
	<li><a href="#">About Us</a></li>
	<li><a href="#">Our Products</a></li>
	<li><a href="#">FAQs</a></li>
	<li><a href="#">Contact</a></li>
	<li><a href="#">Login</a></li>
</ul>

That’s really all it takes! You’ll notice I did use one ID, so we could tell our navigation bar apart from all the other unordered lists on the page. But if this were tucked into a div with its own ID (like a “banner” or “header” div), the ID probably wouldn’t be necessary. And yes, I could add even more IDs and classes if I wanted to make this fancier, but we’re all about simplicity today.

Making It Horizontal

By default, our list is vertical. So let’s make it horizontal:

#nav {
	width: 100%;
	float: left;
	margin: 0 0 3em 0;
	padding: 0;
	list-style: none; }
#nav li {
	float: left; }

Here we’re floating both our list and our list items left. Floating the list items left is what pulls them into a nice horizontal row for us, stacking the items from left to right. However, because of how floats behave, our containing list will collapse to a height of zero unless it is also floated left.

And that wouldn’t be a major problem, except I’m planning to give my list a background color later that I want to show up behind my list items, and if my list collapses, that won’t happen. That’s also why I’m giving my list a width of 100%: That way, it’ll fill up the entire width of the page (or of its container, if it’s in a container with a width set).

I’m also removing most of the margins and padding to make the list behave itself (I’m leaving some margin on the bottom, simply for aesthetic purposes), and setting the list-style to “none,” which removes the bullets from my list.

At this point, our navigation bar looks something like this:

Unstyled Horizontal Navigation Bar

Certainly nothing stylish (and probably difficult to use, to boot), but believe it or not, most of our heavy lifting is now done! From this basic framework, you could construct any number of unique navigation bars. But let’s style ours a bit.

First, we’ll give our navigation bar a background and some borders by updating our #nav CSS to this:

#nav {
	width: 100%;
	float: left;
	margin: 0 0 3em 0;
	padding: 0;
	list-style: none;
	background-color: #f2f2f2;
	border-bottom: 1px solid #ccc; 
	border-top: 1px solid #ccc; }

And let’s give our anchor tags a bit of breathing room and style, too:

#nav li a {
		display: block;
		padding: 8px 15px;
		text-decoration: none;
		font-weight: bold;
		color: #069;
		border-right: 1px solid #ccc; }

Here, I’m giving the anchors a display of “block” to make sure they fill up the entire list item and make the whole area clickable. Then I’m adding some padding to space them out a bit. I’m also removing the underline, making the font bold, setting our color to a nice blue, and adding a border to the right-hand side of the item, which matches the border we added to the top and bottom of our unordered list.

And finally, let’s give the navigation items a different color when our users mouse over:

#nav li a:hover {
		color: #c00;
		background-color: #fff; }

And just like that, we have a perfectly functional, useable, and useful navigation bar. You can see it in action here. And here’s all the CSS in one location:

#nav {
	width: 100%;
	float: left;
	margin: 0 0 3em 0;
	padding: 0;
	list-style: none;
	background-color: #f2f2f2;
	border-bottom: 1px solid #ccc; 
	border-top: 1px solid #ccc; }
#nav li {
	float: left; }
#nav li a {
	display: block;
	padding: 8px 15px;
	text-decoration: none;
	font-weight: bold;
	color: #069;
	border-right: 1px solid #ccc; }
#nav li a:hover {
	color: #c00;
	background-color: #fff; }

Like I said, this is a useful framework from which to work. 90% of the navigation bars I build start out almost exactly like this. It’s just a matter of styling them in different ways to get the look you’re going for.

141 Responses

  1. matt (reply)

    Jodi, you need to use a class to define which link to highlight. such as in the css, setup a class such as:
    .active_link {

    }
    and you apply the text color, style, background color etc.

    then on each page put the class on the link for that page.
    for example, About Us
    I normally use dreamweaver… so if code is slightly out, then forgive me, but the concept is correct and it should help you get started.

  2. matt (reply)

    dang, in the above post, it changed my code into a hyper link. apply the .active_link class to the “li” element that needs to be the active page.

  3. steve (reply)

    i like it. would like to see a part 2 on submenus. So if you hover over one you get a flyout type menu. Thanks for this!

  4. Ad (reply)

    I’d second a follow up with sub-menus.

    How do I position the links so that they are central on the navigation bar with an equal amount space on each side… IE: SPACESPACE:LINK:LINK:LINK:SPACESPACE
    ?

  5. sab (reply)

    @Ad to make it central do following

    In #nav change with from percent to px pixel, remove float left, and add margin: 0 auto; in css
    for instance
    #nav {width: 900px; margin: 0 auto;} would make it centralised menu

    and for adding space among menu items
    add padding-left property in #nav li
    for instance
    #nav li {padding-left:10px}

    let me how well are you with it

  6. pari (reply)

    Hi,

    I want submenus in my app. Eg.:
    About Us <- If I click 'About us' in the nav bar, the button shows submenu like vision next to that Information (just for example)
    Our Products <- Then if I click on 'Our Products', i will have sub-items / submenus like 'Financial Product' 'Automobile products'. )

    I searched a lot on this on net but I am not getting exactly what I want. Is the abov code not useful for such thing? what should I use for this?

    Can anybody please help me?

  7. Pingback: Membuat CSS Class aktif di menubar dengan PHP « Perpustakaan Anshori

  8. Auz (reply)

    One question. I can’t identify the color for my links. I like it a lot, but I don’t know where I specified the color if I did. I want to use it for other text. Please Help.

  9. Auz (reply)

    For some reason this will not let me change the color of the hover, visited, or link. I did what you said, but it did not change on hover, the background only changed while it was being clicked. I tried changing the color and nothing happened. Very confused, Please help.

  10. Pingback: VCP 144 Clark » Summer 2013: Class 8 BONUS

  11. Pingback: S2 – Week 4 | Graphic Design Diploma

  12. Paulette (reply)

    Thank you! I have been messing around trying to get a horizontal bar navigation for a preliminary website design for a class. You are wonderful!

  13. Pingback: Membuat CSS Class aktif di menubar dengan PHP | Mas Wahyu Anshori

  14. Pingback: Navigation Simplification | Close Your Tags

  15. jezreel (reply)

    I just want to ask how to set the size of the nav bar? like i want it to cover form left to right. Thanks :)Im working this for my Exam exercise.

  16. Critical Bench (reply)

    What’s Happening i am new to this, I stumbled upon this I’ve discovered It positively useful and it
    has aided me out loads. I’m hoping to give a contribution & assist different customers like its helped me.

    Good job.

  17. rozwój osobisty forum (reply)

    Write more, thats all I have to say. Literally, it seems as though
    you relied on the video to make your point. You
    obviously know what youre talking about, why throw
    away your intelligence on just posting videos to your
    site when you could be giving us something informative to read?

  18. How to get your NFS World Hack working (reply)

    Hello! I know this is kind of off topic but I was wondering which blog platform are you using forr this website?
    I’m getting tired of WordPress because I’ve had issues with hackers
    annd I’m lookin at options for another platform. I would be awesome if youu could point mme in the
    direction of a good platform.

  19. Anneliese (reply)

    Good post. I learn something totally new and challenging on sites I stumbleupon everyday.
    It’s always interesting to read through articles from other writers
    and practice something from their web sites.

  20. Pingback: Nav bar used | victoria zilempe

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>