Breadcrumbs

by secretgspot

HTML

<div class="top-bar id-topBar">
    <div class="id-breadcrumb">
        <div class="breadcrumb">
            <span class="breadcrumb-cell breadcrumb-first-cell">
                <a href="/home" class="breadcrumb-link" style="z-index: 5">
                    <span class="breadcrumb-home"></span>Product<span class="breadcrumb-arrow"></span>
                </a>
            </span>
            <span class="breadcrumb-cell ">
                <a href="/Other" class="breadcrumb-link" style="z-index: 4">Campaign<span class="breadcrumb-arrow"></span></a>
            </span>
            <span class="breadcrumb-cell ">
                <a href="/Other" class="breadcrumb-link" style="z-index: 3">Adgroup<span class="breadcrumb-arrow"></span></a>
            </span>
            <span class="breadcrumb-cell ">
                <a href="/Other" class="breadcrumb-link" style="z-index: 2">Keywords<span class="breadcrumb-arrow"></span></a>
            </span>
            <span class="breadcrumb-cell ">
                <a href="/Other" class="breadcrumb-link" style="z-index: 1">Details<span class="breadcrumb-arrow"></span></a>
            </span>
        </div>
    </div>

    <div class="top-bar-settings-button">
        <div class="settings-button id-settingsButton unselectable" tabindex="0">
            Settings
        </div>
    </div>

</div>

CSS

body {
font-family: 'Open Sans',arial,sans-serif;
}

/* Helper function */
.unselectable {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-o-user-select: none;
user-select: none;
}


/* Toolbar wrap */
.top-bar {
position: relative;
height: 32px;
width: 100%;
background-color: #eee;
border-bottom: 1px solid #ddd;
border-left: 1px solid #f3f3f3;
padding: 0;
margin: 0;
z-index: 100;
}

/* Breadcrumbs */
.breadcrumb {
position: absolute;
top: 3px;
left: 3px;
bottom: 3px;
right: auto;
padding: 0;
margin: 0;
font-size: 12px;
line-height: 1;
}
.breadcrumb-cell { display: inline }
.breadcrumb-cell a,
.breadcrumb-cell a:link,
.breadcrumb-cell a:visited {
    color: #666;
    display: inline-block;
    position: relative;
    text-decoration: none;
    background: #ececec;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#f3f3f3');
    background: -webkit-gradient(linear,left top,left bottom,from(#ffffff),to(#f3f3f3));
    background: -moz-linear-gradient(top,#ffffff,#f3f3f3);
    padding: 5px 8px 5px 20px;
    border-color: #adadad;
    border-width: 1px;
    border-top-style: solid;
    border-bottom-style: solid;
    height: 13px;
}
.breadcrumb-first-cell a,
.breadcrumb-first-cell a:link,
.breadcrumb-first-cell a:visited {
    border-left-style: solid;
    border-top-left-radius: 3px;
    border-bottom-left-radius: 3px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-bottomleft: 3px;
}
.breadcrumb-cell:hover a,
.breadcrumb-cell a:focus { color: #4d7bd6 }
.breadcrumb-cell:active a {
    background: #ececec;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3f3f3',endColorstr='#ffffff');
    background: -webkit-gradient(linear,left top,left bottom,from(#f3f3f3),to(#ffffff));
    background: -moz-linear-gradient(top,#f3f3f3,#ffffff);
    color: #1c5ac4;
}

.breadcrumb-cell .breadcrumb-home {
background:...