Line25

How To Create Flat Style Breadcrumb Links with CSS

Read the full post

With all the progressions of CSS and CSS3 over recent years we’ve reached a point where many of the old coding techniques that involved background images can now be created entirely with CSS. In this tutorial we’ll look at creating a series of breadcrumb navigation links in a flat design style without the need for the previously popular “sliding doors background image” method.

CSS breadcrumb links

The breadcrumb links we’ll be creating are styled with chevron shapes to support the idea of drilled down content. Previously a background PNG image would be used to create this chevron shape, but with the help of clever border techniques the same effect can be created purely with CSS.

View the CSS breadcrumb links demo

<div id="crumbs">
	<ul>
		<li><a href="#">Breadcrumb</a></li>
	</ul>
</div>

We’ll begin by quickly fleshing out the breadcrumb navigation links as an unordered list. Each breadcrumb link will appear as an <li> with a nested anchor element.

#crumbs ul li a {
	display: block;
	float: left;
	height: 50px;
	background: #3498db;
	text-align: center;
	padding: 30px 40px 0 40px;
	position: relative;
	margin: 0 10px 0 0; 
	
	font-size: 20px;
	text-decoration: none;
	color: #fff;
}

The initial CSS code styles up each list item anchor as a neat blue rectangle. The text is positioned centrally within the space and equal padding is added to either side. In order to position elements absolutely later, position: relative; is added so those absolutely positioned objects will display relative to this parent element.

#crumbs ul li a:after {
	content: "";  
	border-top: 40px solid red;
	border-bottom: 40px solid red;
	border-left: 40px solid blue;
	position: absolute; right: -40px; top: 0;
}

We’ll now recreate the chevron effect in CSS that would previously only be achievable with a background image. Use the :after selector to create an extra element that can be styled up individually. The triangle shape is generated through the use of various CSS borders, so as you can see in the initial demo a single blue triangle can be created by applying top and bottom borders to intersect the overlap. These are currently coloured red for demonstration, but making these transparent will produce a single blue triangle. This border effect is then moved into place through absolute positioning.

border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid #3498db;

The border effect with the correct colour values will produce the desired triangle which gives the breadcrumb link the popular chevron shape.

#crumbs ul li a:before {
	content: "";  
	border-top: 40px solid transparent;
	border-bottom: 40px solid transparent;
	border-left: 40px solid #d4f2ff;
	position: absolute; left: 0; top: 0;
}

Using the same principle another triangle shape can be applied to the left of the breadcrumb link. This time the border colour is set the same as the page background to disguise parts of the blue link background colour.

padding: 30px 40px 0 80px;

This additional triangle before the link affects the appearance of the text, but a simple padding adjustment will quickly rectify its appearance.

<div id="crumbs">
	<ul>
		<li><a href="#1">One</a></li>
		<li><a href="#2">Two</a></li>
		<li><a href="#3">Three</a></li>
		<li><a href="#4">Four</a></li>
		<li><a href="#5">Five</a></li>
	</ul>
</div>

As more links are added to the HTML the series of breadcrumbs increases, each separated by the cool chevron shape thanks to the CSS border triangle effect and a touch of right margin.

#crumbs ul li:first-child a {
	border-top-left-radius: 10px; border-bottom-left-radius: 10px;
}
#crumbs ul li:first-child a:before {
	display: none; 
}

#crumbs ul li:last-child a {
	padding-right: 80px;
	border-top-right-radius: 10px; border-bottom-right-radius: 10px;
}
#crumbs ul li:last-child a:after {
	display: none; 
}

The full breadcrumb navigation list can be further styled by removing the triangle effect on the first and last items with the help of the :first-child and :last-child selectors, then given subtle rounded corners with border-radius.

CSS breadcrumb links

#crumbs ul li a:hover {
	background: #fa5ba5;
}
	#crumbs ul li a:hover:after {
		border-left-color: #fa5ba5;
	}

All that’s left is to apply a hover effect to the links. Don’t forget to change the border-left-color on the hover state of the triangle effect so the whole breadcrumb link changes colour.

View the CSS breadcrumb links demo

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

28 Comments

  1. Its really awesome for upcoming peoples and great efforts.

  2. Timoveld says:

    I tried something similar to this once, but couldn’t figure out how to compensate for the offset difference in Firefox and Chrome.

    Your demo appears to have the same issue.

    When viewing the demo in firefox, the triangles are offset by 1 pixel.

    • Timoveld says:

      How embarrassing, my browser wasn’t zoomed at 100% but was 1 click off, that created the offset in firefox.
      Your demo appears to be working fine now.

  3. Jon Ewing says:

    Looks great and your step-by-step instructions are excellent.

    In the past, coming from the old school, I’ve done menus like this, but with image maps. Haven’t attempted it lately and obviously if I do I’ll be returning to this tutorial to “borrow” your code ;-)

  4. Derek Nutile says:

    The next step would be handling the crumbs responsively…

  5. Henri D says:

    tried this but the navigation tabs are not aligning to the top of the page and instead cascades down like a row of steps?

  6. Jelle P says:

    I’ve got the same problem as Henri D. Everything looks good, but the tabs are not aligned to each other…

  7. Amit says:

    Superb tutorial.. Its help me!

    Thanx!!
    :)

  8. Leanne says:

    I am having a problem where the :after element tips are hidden behind the :before elements. It is almost like the layering order needs to be reversed somehow.

    Can anyone help, it sounds like the same problem HenriD is having?

  9. Donto says:

    To solve the missing point with the :after problem, add

    “z-index: 1;”

    at the end of

    #crumbs ul li a:after {

    }

  10. Hello, this weekend is pleasant in support of me, for the reason
    that this point in time i am reading this enormous educational piece of
    writing here at my house.

  11. Leanne says:

    Thanks Donto, that worked perfectly!

  12. Jonas says:

    Great tutorial! I have been using this technique for a while now, on several websites, so I created a kind of automated generator for it to make it raiser to change sizes and colors (on Codepen):

    http://codepen.io/pocketjoso/pen/foLAd

  13. Fisnik says:

    You sir deserve a medal ! Thanks

  14. tomasz stryjewski says:

    i had my take on this concept:
    http://codepen.io/stryju/pen/kHrAE

    differences:
    - transparent “border” between the blocks
    - inline-block blocks, not floating, so can be centered
    - animated transition

    let me know what you think.
    cheers

  15. tomasz stryjewski says:

    um… any reason why my comment got removed?

  16. Fernando says:

    Amazing tuto, as always. Thank you very much, Chris!

  17. Another great tutorial Chris, breadcrumb flat style is really awesome. Thanks a lot for sharing this, it’s simple and easy to follow.

  18. reza says:

    Excellent tutorial. Much appreciated.

  19. Izmir says:

    Thanks for the tips I would like to know how to reduce the size of all the objects and getting the text middle of each rectangle.

  20. Kim says:

    Thanks for the tutorial, can’t wait to try it out.

Comments are now closed