CSS Navigation Bar






<!--
main_leaderboard, all: [728,90][970,90][320,50][468,60]
-->



CSS Navigation Bar



❮ Previous
Next ❯


Demo: Navigation Bars





Vertical



  • Home

  • News

  • Contact

  • About





Horizontal




  • Home

  • News

  • Contact

  • About




  • Home

  • News

  • Contact

  • About





Navigation Bars


Having easy-to-use navigation is important for any web site.


With CSS you can transform boring HTML menus into good-looking navigation bars.



Navigation Bar = List of Links


A navigation bar needs standard HTML as a base.


In our examples we will build the navigation bar from a standard HTML list.


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



Example



<ul>
 
<li><a href="default.asp">Home</a></li>
 
<li><a href="news.asp">News</a></li>
 
<li><a href="contact.asp">Contact</a></li>
 
<li><a href="about.asp">About</a></li>
</ul>

Try it Yourself »


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



Example



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

Try it Yourself »


Example explained:




  • list-style-type: none; - Removes the bullets. A navigation bar
    does not need list markers

  • Set margin: 0; and padding: 0;
    to remove browser default settings


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






<!--
mid_content, all: [300,250][336,280][728,90][970,250][970,90][320,50][468,60]
-->




Vertical Navigation Bar


To build a vertical navigation bar, you can style the <a> elements
inside the list, in addition to the code above:



Example



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

Try it Yourself »


Example explained:




  • display: block; - Displaying the links as block elements makes the whole
    link area clickable (not just the text), and it allows us to specify the width
    (and padding, margin, height, etc. if you want)


  • width: 60px; - Block elements take up the full width available by default. We want to specify a 60 pixels width


You can also set the width of <ul>, and remove the width of <a>,
as they will take up the full width available when displayed as block elements.
This will produce the same result as our previous example:



Example



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


li
a
{
   
display: block;
}

Try it Yourself »


Vertical Navigation Bar Examples



Create a basic vertical navigation bar with a gray background color and
change the background color of the links when the user moves the mouse over
them:



  • Home

  • News

  • Contact

  • About



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 link color on hover */
li a:hover {
   
background-color: #555;
    color: white;
}

Try it Yourself »


Active/Current Navigation Link


Add an "active" class to the current link to let the user know which page he/she is on:



  • Home

  • News

  • Contact

  • About



Example



.active {
    background-color: #4CAF50;
   
color: white;
}

Try it Yourself »


Center Links & Add Borders


Add text-align:center to <li> or <a> to center the links.


Add the border property to <ul> add a border around the navbar. If you also want
borders inside the navbar, add a border-bottom to all <li> elements, except for the
last one:



  • Home

  • News

  • Contact

  • About



Example



ul {
    border: 1px solid #555;
}

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

li:last-child {
   
border-bottom: none;
}

Try it Yourself »


Full-height Fixed Vertical Navbar


Create a full-height, "sticky" side navigation:






Example



ul {
    list-style-type: none;
   
margin: 0;
    padding: 0;
    width:
25%;
    background-color: #f1f1f1;
   
height: 100%; /* Full height */
    position: fixed; /*
Make it stick, even on scroll */
   
overflow: auto; /* Enable scrolling if the sidenav has too much content */
}

Try it Yourself »

Note: This example might not work properly on mobile devices.




Horizontal Navigation Bar


There are two ways to create a horizontal navigation bar. Using
inline or floating list items.



Inline List Items


One way to build a horizontal navigation bar is to specify the <li> elements
as inline, in addition to the "standard" code above:



Example



li
{
   
display: inline;
}

Try it Yourself »


Example explained:




  • display: inline; - By default, <li> elements are block elements. Here, we
    remove the line breaks before and after each list item, to display them on one line


Floating List Items


Another way of creating a horizontal navigation bar is to float the <li>
elements, and specify a layout for the navigation links:




Example



li
{
   
float: left;
}

a
{
   
display: block;
    padding: 8px;
    background-color:
#dddddd;
}

Try it Yourself »


Example explained:




  • float: left; - use float to get block elements to slide next to each other


  • display: block; -
    Displaying the links as block elements makes the whole link area
    clickable (not just the text), and it allows us to specify padding (and
    height, width, margins, etc. if you want)


  • padding: 8px; - Since block elements take up the full width available, they
    cannot float next to each other. Therefore, specify some padding to make
    them look good


  • background-color: #dddddd; - Add a gray background-color to each a element


Tip: Add the background-color to <ul> instead of each <a> element if you want
a full-width background color:



Example



ul
{
    background-color: #dddddd;
}

Try it Yourself »


Horizontal Navigation Bar Examples



Create a basic horizontal navigation bar with a dark background color and
change the background color of the links when the user moves the mouse over
them:



  • Home

  • News

  • Contact

  • About



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 link color to #111 (black) on hover */
li a:hover {
    background-color:
#111;
}

Try it Yourself »


Active/Current Navigation Link


Add an "active" class to the current link to let the user know which page he/she is on:



  • Home

  • News

  • Contact

  • About



Example



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

Try it Yourself »


Right-Align Links


Right-align links by floating the list items to the right (float:right;):



  • Home

  • News

  • Contact

  • About



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 »


Border Dividers


Add the border-right property to <li> to create link dividers:



  • Home

  • News

  • Contact

  • About



Example



/* Add a gray right border to all list items, except the last item
(last-child) */
li {
    border-right: 1px solid #bbb;
}

li:last-child {
    border-right: none;
}

Try it Yourself »


Fixed Navigation Bar


Make the navigation bar stay at the top or the bottom of the page, even when the user scrolls the page:









Fixed Top



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

Try it Yourself »









Fixed Bottom



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

Try it Yourself »





Note: Fixed position might not work properly on mobile devices.




Gray Horizontal Navbar


An example of a gray horizontal navigation bar with a thin gray border:



  • Home

  • News

  • Contact

  • About



Example



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

li a {
    color:
#666;
}

Try it Yourself »


Sticky Navbar


Use position: sticky; to <li> to create a sticky navbar.


A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).



Example



ul {
    position: -webkit-sticky; /* Safari */
   
position: sticky;
    top: 0;
}

Try it Yourself »


Note: Internet Explorer, Edge 15 and earlier versions do not support sticky positioning. Safari requires a -webkit-
prefix (see example above). You must also specify at least one of top, right, bottom or left for
sticky positioning to work.




More Examples




Responsive Topnav


How to use CSS media queries to create a responsive top navigation.





Try it Yourself »



Responsive Sidenav


How to use CSS media queries to create a responsive side navigation.





Try it Yourself »



Dropdown Navbar


How to add a dropdown menu inside a navigation bar.






Try it Yourself »




❮ Previous
Next ❯

-

Popular posts from this blog

Colors HSL

googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); }); Colors HSL ❮ Previous Next ❯ HSL Calculator   rgb(255, 0, 0) #ff0000 H: S: L: HSL Colors HSL color values are supported in IE9+, Firefox, Chrome, Safari, and in Opera 10+. HSL stands for hue, saturation, and lightness. HSL color values are specified with: hsl( hue , saturation , lightness ) . Hue Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, 240 is blue. Saturation Saturation is a percentage value; 0% means a shade of gray and 100% is the full color. Lightness Lightness is also a percentage; 0% is black, 100% is white. function submitOnEnter(e) { keyboardKey = e.which || e.keyCode; if (keyboardKey == 13) { setFullColor(); } } function clickHue(hue) { var h = document.getElementById("hue01"); h.v...
Read more

Google Hardware Icons

googletag.cmd.push(function() { googletag.display('div-gpt-ad-1422003450156-2'); }); Google Hardware Icons ❮ Previous Next ❯ Hardware Icons Below is a list of all Google Hardware icons: Icon Description Example cast cast Try it cast_connected cast_connected Try it computer computer Try it desktop_mac desktop_mac Try it desktop_windows desktop_windows Try it developer_board developer_board Try it device_hub device_hub Try it devices_other devices_other Try it dock dock Try it gamepad gamepad Try it headset headset Try it headset_mic headset_mic Try it keyboard keyboard Try it keyboard_arrow_down keyboard_arrow_down Try it keyboard_arrow_left keyboard_arrow_left Try it keyboard_arrow_right keyboard_arrow_right Try it keyboard_arrow_up keyboard_arrow_up ...
Read more

SVG Filters

<!-- main_leaderboard, all: [728,90][970,90][320,50][468,60] --> SVG Filters ❮ Previous Next ❯ SVG Filters SVG Filters are used to add special effects to SVG graphics. Browser Support The numbers in the table specify the first browser version that supports SVG filters.   SVG Filters 8.0 10.0 3.0 6.0 9.6 SVG Filter Elements In the next chapters, we will only demonstrate a touch of the filter effects that are possible - and give you an idea of what can be done with SVG. The available filter elements in SVG are: <feBlend> - filter for combining images <feColorMatrix> - filter for color transforms <feComponentTransfer> <feComposite> <feConvolveMatrix> <feDiffuseLighting> <feDisplacementMap> <feFlood> <feGaussianBlur> <feImage> <feMerge> <feMorphology> <feOffset> - filter for drop sh...
Read more