Skip to content

Instantly share code, notes, and snippets.

@lukasborawski
Created October 28, 2012 15:25
Show Gist options
  • Save lukasborawski/3968898 to your computer and use it in GitHub Desktop.
Save lukasborawski/3968898 to your computer and use it in GitHub Desktop.
CSS3 Breadcrumbs Concept
<div class="content_row content_row_01">
<div class="breadcrumb">
<ul>
<li><a href="#" title="Main Link" class="link">Main</a></li>
<li><a href="#" title="Main Link" class="link">Main Category</a></li>
<li><a href="#" title="Main Link" class="link">Sub Category</a></li>
<li><a href="#" title="Main Link" class="link">Current</a></li>
</ul>
</div>
</div>
<div class="content_row content_row_02">
<div class="breadcrumb">
<ul>
<li><a href="#" title="Main Link" class="link">Main</a></li>
<li><a href="#" title="Main Link" class="link">Main Category</a></li>
<li><a href="#" title="Main Link" class="link">Sub Category</a></li>
<li><a href="#" title="Main Link" class="link">Current</a></li>
</ul>
</div>
</div>
<div class="content_row content_row_03">
<div class="breadcrumb">
<ul>
<li><a href="#" title="Main Link" class="link">Main</a></li>
<li><a href="#" title="Main Link" class="link">Main Category</a></li>
<li><a href="#" title="Main Link" class="link">Sub Category</a></li>
<li><a href="#" title="Main Link" class="link">Current</a></li>
</ul>
</div>
</div>
.breadcrumb {
width: 100%;
display: inline-block;
padding-bottom: 1%;
font-family: Georgia, sans-serif;
}
.breadcrumb ul li {
display: inline-block;
}
.content_row_01 .breadcrumb ul li:after {
content: "»";
}
.content_row_02 .breadcrumb ul li:after {
content: "›";
}
.content_row_03 .breadcrumb ul li:after {
content: "/";
color: #ccc;
margin-left: 10px;
}
.breadcrumb ul li:after {
display: inline-block;
margin: 0 5px;
}
.breadcrumb ul li:last-child:after {
content: "";
}
.breadcrumb a {
color: #985ab8;
}
.breadcrumb ul li:last-child a {
text-decoration: none;
cursor: default;
color: gray;
}
.content_row_03 .breadcrumb ul li:first-child a {
font-weight: bold;
}
.breadcrumb a:hover {
text-decoration: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment