CSS Navigation Bar

Vertical

Horizontal


navigation bar

Skilled use of the navigation bar is very important for any website.

With CSS you can transform it into a good-looking navigation bar instead of a boring HTML menu.

Navigation bar = list of links

As a standard HTML foundation, a navigation bar is necessary.

In our example we will build a standard HTML list navigation bar.

A navigation bar is basically a list of links, so using the <ul> and <li> elements makes perfect sense:

Example

<ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul>

Try it Yourself »

Now, let's remove margins and padding from the list:

Example

ul { list-style-type: none; margin: 0; padding: 0; }

Try it Yourself »

Example analysis:

  • list-style-type:none - Removes the markers before list items. A navigation bar does not need list markers.
  • Remove the browser's default settings and set margin and padding to 0.

The code in the above example is the standard code used for both vertical and horizontal navigation bars.

Vertical navigation bar

With the above code, we only need to style the <a> element to build a vertical navigation bar:

Example

a { display:block; width:60px; }

Try it Yourself »

Example explanation:

  • display:block - Displays the link as a block element, making the whole area a clickable link area (not just text), and it allows us to specify a width.
  • width:60px - By default, block elements take up the maximum width. We want to specify a width of 60 pixels.

Tip:ViewExample of a fully styled vertical navigation bar。

Note:Be sure to specify the width of the <a> element in a vertical navigation bar. If the width is omitted, IE6 may produce unexpected results.

Vertical Navigation Bar Example

Create a simple vertical navigation bar example, and change the background color when the mouse moves over an option:


Example

ul { list-style-type: none; margin: 0; padding: 0; width: 200px; background-color: #f1f1f1; } li a { display: block; color: #000; padding: 8px 16px; text-decoration: none; } /*Change the background color when the mouse moves over an option*/ li a:hover { background-color: #555; color: white; }

Try it Yourself »

Active/current navigation bar example

After an option is clicked, we can add the "active" class to indicate which option is selected:

Example

li a.active { background-color: #4C7EAF; color: white; }

Try it Yourself »

Create links and add borders

Can be added on <li> or <a>text-align:centerStyle to center the links.

You canborderAdd to <ul>borderUse the property to give the navigation bar a border. If you want to add a border to each option, you can add it on each <li> element.border-bottom :

Example

ul { border: 1px solid #555; } li { text-align: center; border-bottom: 1px solid #555; } li:last-child { border-bottom: none; }

Try it Yourself »

Fixed navigation bar with full-screen height

Next we create a fixed navigation bar of full screen height on the left, with scrollable content on the right.

Example

ul { list-style-type: none; margin: 0; padding: 0; width: 25%; background-color: #f1f1f1; height: 100%; /*Full screen height*/ position: fixed; overflow: auto; /*Allow scrolling if the navigation bar has many options*/ }

Try it Yourself »

Note:This example can be used on mobile devices.

Horizontal navigation bar

There are two ways to create a horizontal navigation bar. UseInlineorFloatlist items.

Both methods are good, but if you want the links to have the same size, you must use the floating method.

Inline list items

One way to build a horizontal navigation bar is to specify the elements as inline; the following code is the standard inline:

Example

li { display:inline; }

Try it Yourself »

Example Analysis:

  • display:inline; - by default,<li>The <li> element is a block element. Here, we remove the line breaks before and after each list item to display them in one line.

Tip:ViewExample of a fully styled horizontal navigation bar。

Floating list items

In the above example, the links have different widths.

For all links to have equal width, float the <li> elements and specify the width of the <a> elements:

Example

li { float:left; } a { display:block; width:60px; }

Try it Yourself »

Example Analysis:

  • float:left - Use float to make block elements slide next to each other.
  • display:block - Displays the link as a block element, making the whole area a clickable link area (not just text), and it allows us to specify a width.
  • width:60px - By default, block elements take up the maximum width. We want to specify a width of 60 pixels.

Tip:ViewExample of a fully styled horizontal navigation bar。

Horizontal Navigation Bar Example

Create a horizontal navigation bar and change the background color when the mouse moves over an option.

Example

ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 14px 16px; text-decoration: none; } /*Change the background color when the mouse moves over an option*/ li a:hover { background-color: #111; }

Try it Yourself »

Active/current navigation bar example

After an option is clicked, we can add the "active" class to indicate which option is selected:

Example

.active { background-color: #4C7EAF; }

Try it Yourself »

Right-aligned links

Set the rightmost option of the navigation bar to right alignment (float:right;):

Example

<ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li style="float:right"><a class="active" href="#about">About</a></li> </ul>

Try it Yourself »

Add dividers

via <li>border-rightStyle to add dividing lines:

Example

/*Add dividers to all options except the last one (last-child)*/ li { border-right: 1px solid #bbb; } li:last-child { border-right: none; }

Try it Yourself »

Fixed navigation bar

You can set the page's navigation bar to be fixed at the top or bottom:

Fixed at the top

ul { position: fixed; top: 0; width: 100%; }

Try it Yourself »

Fixed at the bottom

ul { position: fixed; bottom: 0; width: 100%; }

Try it Yourself »

Note:This example can be used on mobile devices.

Gray Horizontal Navigation Bar

Gray Horizontal Navigation Bar

ul { border: 1px solid #e7e7e7; background-color: #f3f3f3; } li a { color: #666; }

Try it Yourself »

More Examples

  • Responsive top navigation - How to use CSS3 media queries to create a responsive navigation.

  • Responsive sidebar navigation - How to use CSS3 media queries to create a sidebar navigation.

  • Navigation dropdown menu - Set up a dropdown menu inside the navigation bar.

  • Navigation icons - Use icons as navigation bar options

other extensions