Breadcrumb

Breadcrumb is a simple styled navigation menu which you can see on apple.com. People can easily be aware of which section the current page is. Decide what menus can be listed according to hierarchy of your site, and what menus should be always displayed on the right part.

* This widget is also included in Pro Pack. Pro versions enable users to save and load their code with additional customizable options.

Preview

Build your own

Input data in the fields below.
Click "Apply these settings", select the entire codes. Then, press Command + C (Mac) or Control + C (Windows) to copy.
Paste the source code into HTML snippet in iWeb. (Non-iWeb users can also copy & paste each code in the <head> and <body> to each tag.)

* Customize styles

width font family

* Insert contents (the first menu should be for "home" button.)

menu link position

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-us">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.breadcrumb-container
{
	/*widget_width*/width:600px;
  	/*font_family*/font-family:Arial, Helvetica, sans-serif;
  	/*widget_height*/height:30px;
	font-size:11px;
    background:url('https://lh6.googleusercontent.com/-jQ6rrEip68o/UXdEdLEDOEI/AAAAAAAAAK8/vEP6But0-uU/s30/bc_bg.png') repeat-x; 
    line-height:30px;
    color:gray;
    border:1px solid #cacaca;
    -khtml-border-radius:4px; -ms-border-radius:4px; -o-border-radius:4px; -moz-border-radius:4px; -webkit-border-radius:4px; border-radius:4px;
    overflow:hidden;
}
.breadcrumb-container ul {list-style:none; margin: 0;padding: 0;float:left;display:inline-block;}
.breadcrumb-container li {float:left;padding-left:10px;margin:0;}
.breadcrumb-container a {background:url('https://lh6.googleusercontent.com/-NDiGChWF0CM/UXdEdN7lN1I/AAAAAAAAALE/ROHUcZGh5Uo/s30/bc_separator.png') center right no-repeat;display:block; padding-right: 15px;text-decoration:none;color:gray;}
.breadcrumb-container ul.right {float:right;}
.breadcrumb-container ul.right a {background:url('https://lh6.googleusercontent.com/-0rSXbcJOIFE/UXdEdOmo6uI/AAAAAAAAAK0/hUBaNyfpUBo/s20/bc_separator_straight.png') center right no-repeat;}
.breadcrumb-container ul li.last a {background:none;}
.breadcrumb-container span.home{display:block;width:30px;margin:0;padding:0;background:url('https://lh6.googleusercontent.com/-WslKU8zjOS8/UXdEdgAn8tI/AAAAAAAAALA/nk978O96YHE/s16/home.png') center no-repeat;text-indent:-9999px;}
</style>
</head>
<body style="background: transparent; margin: 0pt;">
<div class="breadcrumb-container">
<!--begin to insert contents-->
<!--end to insert contents-->
</div>
</body>
</html>

* Copy and paste this code above into HTML snippet (iWeb) or snippet (for other tools, follow "Installation Guide"), and see if it works on your web browser.

I am Preview

This live demo is dynamically loaded when you push "Apply these settings" button. This preview may not be same to the actual view in your website.
* Important! Don't click a link from this preview. It will make you leave this page out so that you may lose your own code.