Advanced Search

CSS Breadcrumb Markup

/ Published in: CSS
Save to your folder(s)
Nice clean, and semantically correct breadcrumb XHTML accompanied by the CSS.

Create a transparent GIF of the symbol '>' and save it in /img/gt.gif. This will be used for older browsers that don't support the :after pseudo element.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. <style type="text/css">
  2. #breadcrumbs li {
  3. 	display: inline;
  4. }
  5.  
  6. /* CSS3 breadcrumb */
  7. #breadcrumbs li:after {
  8. 	content: " > ";
  9. }
  10.  
  11. #breadcrumbs li.current:after {
  12. 	content: "";
  13. }
  14.  
  15. /* IE6 breadcrumb */
  16. *html #breadcrumbs li {
  17. 	background: url( /img/gt.gif ) no-repeat center right;
  18. 	padding-right: 10px;
  19. 	margin-right: 5px;
  20. }
  21.  
  22. *html #breadcrumbs li.current {
  23. 	background: none;
  24. 	padding-right: 0px;
  25. }
  26.  
  27. /* IE7 breadcrumb */
  28. html>body #breadcrumbs li {
  29. 	*background: url( /img/gt.gif ) no-repeat center right;
  30. 	*padding-right: 10px;
  31. 	*margin-right: 5px;
  32. }
  33.  
  34. html>body #breadcrumbs li.current {
  35. 	background: none;
  36. 	padding-right: 0px;
  37. }
  38. </style>
  39.  
  40. <ol id="breadcrumbs">
  41. 	<li><a href="/">Home</a></li>
  42. 	<li><a href="/lorum">Lorum</a></li>
  43. 	<li class="current">Ipsum</li>
  44. </ol>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.