Home » HTML5 » HTML5 Navigation Bar Example

About Remi Goyard

Remi Goyard

I’m a senior web architect. Passionated by new technologies, programming, devops tools, and agile methodologies. I really enjoy to coach, or teach, people who wants to learn programming, from beginners to skilled programmers. Involved in local developer communities, Java User Group, PHP User Group, or Javascript User Group, i like to share with others about experiences, news or business. Coding is FUN !

HTML5 Navigation Bar Example

In this article we will present you a way for creating an HTML5 navigation bar. We will only use CSS and no JavaScript. Let’s see how this can be done!

Want to be a HTML5 Ninja?

Subscribe to our newsletter and download the HTML5 Programming Cookbook right now!

In order to get you prepared for your HTML5 development needs, we have compiled numerous recipes to help you kick-start your projects. Besides reading them online you may download the eBook in PDF format!

 

1. The nav Tag

The <nav /> Tag is one of the new elements introduced in the HTML5 Specification, this element represents a part of your document that contains links to parts of the page or to other pages.

A section with navigation links.

If the navigation links is a list of links, simply use the <ul/> <li> tags to create the list, but as the specification say:

A nav element doesn’t have to contain a list, it can contain other kinds of content as well.

Let’s see an example.

1.1 Simple Navigation Example

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>HTML5 Navigation Bar Example - Example 1</title>
</head>
<body>
    <nav>
        <ul>
            <li><a href="home.html">Home</a></li>
            <li><a href="blog.html">Blog</a></li>
            <li><a href="news.html">News</a></li>
        </ul>
    </nav>
</body>
</html>

As you can see it looks like any other lists :

HTML 5 Navigation Bar Example 1

HTML 5 Navigation Bar Example 1

1.2 Adding some CSS

As we want to create a navigation bar we will add some CSS to the page to present the list as a navigation bar.

First of all we define the default body styling :

body{
    margin: 0;
    padding: 0;
    font-size: 15px;
}

Then we create the “navbar style” :

nav {
    background-color: #333;
    margin: 0;
    overflow: hidden;
}

And now we can add some style to the list element :

nav ul{
    margin: 0;
    padding: 0;
}
nav ul li {
    /* This allow us to arrange list items in a row, without using float */
    display: inline-block;
    list-style-type: none;
}

/* Create a style for the first level items */
nav > ul > li > a {
    color: #aaa;
    background-color:#FF0;
    display: block;
    line-height: 2em;
    padding: 0.5em 0.5em;
    text-decoration: none;
}
HTML5 Navigation Bar Example 1 bis

HTML5 Navigation Bar Example 1 bis

2. Adding sub level

Now we will add some sub menus to the navigation bar. Let’s see the HTML code :

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>HTML5 Navigation Bar Example - Example 1</title>
</head>
<body>
<nav>
    <ul>
        <li>
            <a href="home.html">Home</a>
            <ul>
                <li><a href="presentation.html">presentation</a></li>
                <li><a href="contact.html">contact</a></li>
            </ul>
        </li>
        <li><a href="blog.html">Blog</a></li>
        <li>
            <a href="shop.html">shop</a>
            <ul>
                <li><a href="candy.html">candy</a></li>
                <li><a href="chocolate.html">chocolate</a></li>
                <li><a href="icecream.html">ice cream</a></li>
            </ul>
        </li>
        <li><a href="news.html">News</a></li>
    </ul>
</nav>
</body>
</html>

If you try to display the navigation just now, this will not look as expected, we need to add some CSS to manage the submenus :

nav li > ul li{
    display: block;
}

nav  li > ul li a {
    color: #111;
    display: block;
    line-height: 2em;
    padding: 0.5em 2em;
    text-decoration: none;
}

/* Change the background color when mouse over items */
nav li:hover {
    background-color: #666;
}
/* display the submenu on mouse over main menu item*/
nav li:hover > ul{
    position:absolute;
    display : block;
}

The pseudo selector :hover allow us to display submenus when the mouse is hover the main menu item.

HTML 5 Navigation Bar Example 2

HTML 5 Navigation Bar Example 2

3. Third level menu

Imagine now you want to create a third level menu, and we want it to be shown on the right of menu item.

So we have to edit the HTML to add some submenu in one or more second level menu element…

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>HTML5 Navigation Bar Example - Example 1</title>
    <link href="style3.css" rel="stylesheet"/>
</head>
<body>
<nav>
    <ul>
        <li>
            <a href="home.html">Home</a>
            <ul>
                <li><a href="presentation.html">presentation</a></li>
                <li>
                    <a href="contact.html">contact</a>
                    <ul>
                        <li><a href="one.html">One</a></li>
                        <li><a href="two.html">Two</a></li>
                        <li><a href="three.html">Three</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            <a href="blog.html">Blog</a>
            <ul>
                <li><a href="one.html">One</a></li>
                <li><a href="two.html">Two</a></li>
                <li><a href="three.html">Three</a></li>
            </ul>
        </li>
        <li>
            <a href="shop.html">Shop</a>
            <ul>
                <li>
                    <a href="candy.html">candy</a>
                    <ul>
                        <li><a href="one.html">One</a></li>
                        <li><a href="two.html">Two</a></li>
                        <li><a href="three.html">Three</a></li>
                    </ul>
                </li>
                <li><a href="chocolate.html">chocolate</a></li>
                <li>
                    <a href="icecream.html">ice cream</a>
                    <ul>
                        <li><a href="one.html">One</a></li>
                        <li><a href="two.html">Two</a></li>
                        <li><a href="three.html">Three</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="news.html">News</a></li>
    </ul>
</nav>
</body>
</html>

And we also have to edit the CSS by adding the following code:

nav li > ul > li ul  {
    display: none;
    background-color: #888;
}
nav li > ul > li:hover > ul  {
    position:absolute;
    display : block;
    margin-left:100%;
    margin-top:-3em;
}

This will create something like this …

HTML 5 Navigation Bar Example 3

HTML 5 Navigation Bar Example 3

Without any modification if you add some submenus (in the third level one) you will have something like this :

HTML 5 Navigation Bar Example 3 bis

HTML 5 Navigation Bar Example 3 bis

Ok, now I would like to add some little icons to elements that have sub elements.

4. Drop down icon

In order to add some arrows to menu item (they will inform the user that the element contains a submenu), we will add a class sub to all those elements.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>HTML5 Navigation Bar Example - Example 1</title>
    <link href="style4.css" rel="stylesheet"/>
</head>
<body>
<nav>
    <ul>
        <li class="sub">
            <a href="home.html">Home</a>
            <ul>
                <li><a href="presentation.html">presentation</a></li>
                <li class="sub">
                    <a href="contact.html">contact</a>
                    <ul>
                        <li><a href="one.html">One</a></li>
                        <li><a href="two.html">Two</a></li>
                        <li class="sub">
                            <a href="three.html">Three</a>
                            <ul>
                                <li><a href="one.html">One</a></li>
                                <li><a href="two.html">Two</a></li>
                                <li><a href="three.html">Three</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
            </ul>
        </li>
        <li class="sub">
            <a href="blog.html">Blog</a>
            <ul>
                <li><a href="one.html">One</a></li>
                <li><a href="two.html">Two</a></li>
                <li><a href="three.html">Three</a></li>
            </ul>
        </li>
        <li class="sub">
            <a href="shop.html">Shop</a>
            <ul>
                <li class="sub">
                    <a href="candy.html">candy</a>
                    <ul>
                        <li><a href="one.html">One</a></li>
                        <li><a href="two.html">Two</a></li>
                        <li class="sub">
                            <a href="three.html">Three</a>
                            <ul>
                                <li><a href="one.html">One</a></li>
                                <li><a href="two.html">Two</a></li>
                                <li class="sub">
                                    <a href="three.html">Three</a>
                                    <ul>
                                        <li><a href="one.html">One</a></li>
                                        <li><a href="two.html">Two</a></li>
                                        <li><a href="three.html">Three</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="chocolate.html">chocolate</a></li>
                <li class="sub">
                    <a href="icecream.html">ice cream</a>
                    <ul>
                        <li><a href="one.html">One</a></li>
                        <li><a href="two.html">Two</a></li>
                        <li><a href="three.html">Three</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="news.html">News</a></li>
    </ul>
</nav>
</body>
</html>

And in the CSS, we will add only two directives :

nav ul > li.sub{
    background: url(ic_keyboard_arrow_down_white_18dp.png) right center no-repeat;
}

nav ul > li.sub li.sub{
    background: url(ic_keyboard_arrow_right_white_18dp.png) right center no-repeat;
}

Images are from the Google Design page.

This will create something like this :

HTML 5 Navigation Bar Example 4

HTML 5 Navigation Bar Example 4

5. Download

Download
You can download the full source code of this example here: HTML5 Navigation Bar Example
Do you want to know how to develop your skillset to become a Web Rockstar?
Subscribe to our newsletter to start Rocking right now!
To get you started we give you our best selling eBooks for FREE!
1. Building web apps with Node.js
2. HTML5 Programming Cookbook
3. CSS Programming Cookbook
4. AngularJS Programming Cookbook
5. jQuery Programming Cookbook
6. Bootstrap Programming Cookbook
and many more ....
Email address:

Leave a Reply

14 Comments on "HTML5 Navigation Bar Example"

Notify of
avatar
Sort by:   newest | oldest | most voted
Robin
Guest

Well written tutorial :)

LN
Guest

Hi,
Really well written document. Thank you for putting this together.

I am however faced with one problem now. As I follow your code, VS2015 complains cannot be nested inside . Is this a new thing or am I doing something wrong?

Thanks.

LN
Guest

Sorry for reposting this. My previous comment had the html tags removed by the website. Re-writing that part below.

I am however faced with one problem now. As I follow your code, VS2015 complains ul cannot be nested inside ul. Is this a new thing or am I doing something wrong?

Muhsin Mohamed Pc
Guest

Thanks for the awesome tutorial man. I created own HTML5 Navigation. Your blog and your writing skill was amazing. Thanks again

Hemanth
Guest

Excellent tutorial (for me as newbie)
Helped me understand the intricacies of understanding and developing my website

g
Guest

there is actually a problem while typing your code,
the sub menus in my site doesn’t hide, so I tried figuring out if there is a mistake i made while typing your code.
and i tried this :

nav li>ul{
display:none;
}

somewhat it worked

i dont know….if it’s just me or..

Kyle
Guest

I am glad I am not the only one! I have had to add a display:none; in order to hide the navigation until it is hovered on.

ayush
Guest

i would like to ask where we have to insert nav li > ul{
display: none ;
}

Alex
Guest

Is there anyway to make this bar dynamic so it changes size on different devices?

Tom B
Guest
My issue is interesting: My drop down menus (both in Chrome and FF) will appear when you hover over the main nav bar, but if you go to move the mouse down to them, sometimes (not all the time), they disappear as soon as you are unhovered over the main nav bar. If you are quick, you can often get the drop down to stay up, but not always. It strikes me there is something in whatever mechanism that should allow you to drop into the dropdown without having it disappear that is not 100% reliable under all circumstances (may… Read more »
Harold Nathan
Guest

Fantastic! Thank you.

karthik
Guest

Thanks very much for ur time Remi Goyard. I have a question. How to add contents in ur navigation menus? I mean How to add content under each navigation Menu. For example I am creating Four menus such as Lesson 1, Lesson 2, Lesson 3 and Lesson 4. How to add content in Lesson 1.html, Lesson 2.html etc. Where to store them? where a href will retrieve the contents when each menus were pressed.

Person who knows all
Guest

You need to make a different file, like another website called Lesson 2.html

sunil
Guest

Hi, I have 7 html file and each running individually fine with some graph(charts) , i have follow your menu and that’s help me ,

but when i click any menu it redirect the liked pages which i don’t want , what i want is that when i click a menu it will display that html contained on the below of the menu in same page always . can you please help me on this

wpDiscuz