Submit your widget
HomeMenu & NavigationjQuery Plugin xBreadcrumbs (Extended Breadcrumbs) navigation

jQuery Plugin xBreadcrumbs (Extended Breadcrumbs) navigation

Created 14 years ago   Views 17103   downloads 2972    Author n/a
jQuery Plugin xBreadcrumbs (Extended Breadcrumbs) navigation
View DemoDownload
115
Share |

xBreadcrumbs (Extended Breadcrumbs) is a jQuery plug-in to create categorized breadcrumbs for your site. This may be useful if your website has a deep structure and you want allow your visitors to quickly navigate through one section of the site to another. xBreadcrumbs works with unordered lists (UL/LI) which would make your breadcrumbs fully optimized for search engines. An SEO freindly breadcrumb has many benefits.

 

Add the following code to your <head>…</head> tag to connect jQuery framework, xBreadcrumbs plugin and CSS. (Make sure paths to files are correct.)

<script type="text/javascript" src="../jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../xbreadcrumbs.js"></script>
<link rel="stylesheet" href="../xbreadcrumbs.css" />

 

 

Create your breadcrumbs structure inside of your <body>…</body> tag.

 

<ul id="breadcrumbs">
     <li>
          <a href="#">Home</a>
          <ul>
               <li><a href="#">Servers</a></li>
               <li><a href="#">Desktop Computers</a></li>
               <li><a href="#">Laptops</a></li>
          </ul>
     </li>
     <li>
          <a href="#">Laptops</a>
          <ul>
               <li><a href="#">Dell</a></li>
               <li><a href="#">HP</a></li>
               <li><a href="#">Apple</a></li>
               <li><a href="#">IBM</a></li>
          </ul>
     </li>
     <li>
          <a href="#">Apple</a>
          <ul>
               <li><a href="#">MacBook Pro</a></li>
               <li><a href="#">MacBook Air</a></li>
          </ul>
     </li>
     <li><a href="#">MacBook Air</a></li>
</ul>

 

 

 

Use the following code (preferably inside of your <head>…</head> tag) to initialize xBreadcrumbs.

 

<script type="text/javascript">
     $(document).ready(function(){
          $('#breadcrumbs').xBreadcrumbs();
     });
</script>

 

 

That’s it ;)


You might also like