HTML5

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!

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

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 !
Subscribe
Notify of
guest

This site uses Akismet to reduce spam. Learn how your comment data is processed.

17 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Robin
8 years ago

Well written tutorial :)

LN
LN
8 years ago

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
LN
8 years ago

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
8 years ago

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

Hemanth
Hemanth
8 years ago

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

g
g
8 years ago

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
Kyle
8 years ago
Reply to  g

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
ayush
7 years ago
Reply to  Kyle

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

samer
samer
3 years ago
Reply to  ayush

yes i had the same problem thanks alot for the awesome tips

Alex
Alex
7 years ago

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

Tom B
Tom B
7 years ago

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
Harold Nathan
7 years ago

Fantastic! Thank you.

karthik
karthik
7 years ago

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
Person who knows all
6 years ago
Reply to  karthik

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

sunil
sunil
6 years ago

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

ALBERT WAMBUA
ALBERT WAMBUA
4 years ago

I appreciate for the code its very how-some so lets still help others

akki
8 months ago

very informative informaion sir

Back to top button