Styling breadcrumb

      No Comments on Styling breadcrumb

Styling breadcrumb in pure CSS – there can be multiple ways to display breadcrumb on a web page.

Styling breadcrumb

Styling breadcrumb

Html -markup

<div class="container">
  <div class="breadcrumb">
    <ul class="breadcrumb_list">
      <li class="li-0"><a href='#'>Home</a></li>
      <li class="li-0"><a href='#'>Blog</a></li>
      <li><a href=''>Post</a></li>
    </ul>
  </div>
  <!-- type 2-->
  <div class="breadcrumb">
    <ul class="breadcrumb_list">
      <li class="li-1"><a href='#'>Home</a></li>
      <li class="li-1"><a href='#'>Blog</a></li>
      <li><a href=''>Post</a></li>
    </ul>
  </div>
<!-- type 3-->
 <div class="breadcrumb">
    <ul class="breadcrumb_list">
      <li class="li-2"><a href='#'>Home</a></li>
      <li class="li-2"><a href='#'>Blog</a></li>
      <li><a href=''>Post</a></li>
    </ul>
  </div>
  <!-- type 4-->
  <div class="breadcrumb">
    <ul class="breadcrumb_list">
      <li class="li-3"><a href='#'>Home</a></li>
      <li class="li-3"><a href='#'>Blog</a></li>
      <li><a href=''>Post</a></li>
    </ul>
  </div>
    <!-- type 5-->
    <div class="breadcrumb">
    <ul class="breadcrumb_list">
      <li class="li-4"><a href='#'>Home</a></li>
      <li class="li-4"><a href='#'>Blog</a></li>
      <li><a href=''>Post</a></li>
    </ul>
  </div>

CSS

body
{
  background:#000099;
}
.container
{
  padding:4%;
}
.breadcrumb
{
  background: #000080;
  box-shadow:0px 1px 4px 1px #00004d;
}
.breadcrumb_list
{
   padding:15px 0;
   margin:25px 0;
}
.breadcrumb_list li
{
  list-style-type:none;
  display:inline;
  margin:0px 20px;
}
.breadcrumb_list a
{
  color:#b3b3b3;
  font-size:18px;
  text-decoration:none;
  font-family: "Arial";
}
.breadcrumb_list a:visited,.breadcrumb_list a:hover
{
  color:#e6e6e6;
}
.li-0:after
{
  content:" ";
  padding-left:24px;
}
.li-1:after
{
  content:"/";
  padding-left:20px;
  color:#b3b3b3;
}
.li-2:after
{
  content:"-";
  padding-left:20px;
  color:#b3b3b3;
}
.li-3:after
{
  content:'\2192';
  padding-left:13px;
  color:#b3b3b3;
}
.li-4:after
{
  content:'\00bb';
  padding-left:20px;
  color:#b3b3b3;
}

Demo:

Summary
Styling breadcrumb
Article Name
Styling breadcrumb
Description
Styling breadcrumb using pure CSS styling to display them in various forms. Creating your UI with effective css codes.
Author
Publisher Name
Scanfcode
Publisher Logo

Leave a Reply

Your email address will not be published. Required fields are marked *