Breadcrumb example , breadcrumb navigation

Breadcrumbs is a navigation aid used in user interfaces. It allows users to keep track of their locations within programs or documents. Breadcrumbs typically appear horizontally across the top of a web page, often below title bars or headers. They provide links back to each previous page the user navigated through to get to the current page or—in hierarchical site structures—the parent pages of the current one. Breadcrumbs provide a trail for the user to follow back to the starting or entry point.A greater-than sign (>) often serves as hierarchy separator, although designers may use other glyphs (such as » or ›), as well as various graphical treatments.

Suppose , you have an java tutorial site is on a page for struts2 , the breadcrumb trail structure will show the main categories leading to the page and back to the home page according to their proper order of page appearance. Hence, the viewers will find the breadcrumb something like "Home > java > struts2 > OGNL". This trail is typically based on the specific hierarchy structure in the backend system of the web site. The user can go to any of the pages of the trail by clicking on the text.if you want to go to home page you can directly go there by clicking on the home , java etc.. link on the breadcrumb trail.

Breadcrumbs are mainly used for navigation.

Typical breadcrumbs look like this:-

Home > java > struts2 > OGNL

or

Home : java : struts2 : OGNL

you can modify in your way here in simple breadcrumbs example :-
Breadcrumb.js

function breadcrumbs() {
var output = "
"
    + "
"
    + "
Home
"     + "
Java
"     + "
Struts2
OGNL
";
document.write("" + output + "");
}  

Breadcrumb.css

.breadCrumb
{
 display: block;
 height: 21px;
 width: auto;
 padding:5px;
 border:solid 1px #dedede;
 background:#fff;
}
.breadCrumb ul
{
 margin: 0;
 padding: 0;
 height: 21px;
 display: block;
}
.breadCrumb ul li
{
 display: block;
 float: left;
 position: relative;
 height: 21px;
 overflow: hidden;
 line-height: 21px;
 margin: 0px 6px 0px 0;
 padding: 0px 10px 0px 0;
 font-size: .9167em;
 background: url(../../images/rightarrow.gif) no-repeat 100% 0;
}
.breadCrumb ul li a
{
 display: block;
 position: relative;
 height: 21px;
 line-height: 21px;
 overflow: hidden;
 float: left;
}
.breadCrumbHolder
{
 margin:0 0 -20px 0;
}
.breadcurmbdecoration{text-decoration: none;font-size: 12px;color:#0072C6;cursor: pointer;}

Breadcrumb.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>










breadcrumbs allows users to keep track of their locations within programs or documents

run jsp output look like this :-


also you can try this :-
Breadcrumb.js

function breadcrumbs() {
var output ="
"
     + "
"
     + "
Your Are Here →
Home →
"      + "
Java →
"           + "
Struts2 →
"      + "
OGNL
";
    document.write("" + output + "");
document.write("" + output + "");
}  

Breadcrumb.css

.breadCrumb
{
 display: block;
 height: 21px;
 width: auto;
 padding:5px;
 border:solid 1px #dedede;
 background:#fff;
}
.breadCrumb ul
{
 margin: 0;
 padding: 0;
 height: 21px;
 display: block;
}
.breadCrumb ul li
{
 display: block;
 float: left;
 position: relative;
 height: 21px;
 overflow: hidden;
 line-height: 21px;
 margin: 0px 6px 0px 0;
 padding: 0px 10px 0px 0;
 font-size: .9167em;
}
.breadCrumb ul li a
{
 display: block;
 position: relative;
 height: 21px;
 line-height: 21px;
 overflow: hidden;
 float: left;
}
.breadCrumbHolder
{
 margin:0 0 -20px 0;
}
.breadcurmbdecoration{text-decoration: none;font-size: 12px;color:#0072C6;cursor: pointer;}

Another Breadcrumb.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>










breadcrumbs allows users to keep track of their locations within programs or documents

run jsp and you get following look :-