How To Create Flat Style Breadcrumb Links with CSS

Home » Tutorials » How To Create Flat Style Breadcrumb Links with CSS

Line25 is reader supported. At no cost to you a commission from sponsors may be earned when a purchase is made via links on the site. Learn more

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

Author
Iggy
Iggy is a designer who loves experimenting with new web design techniques, collating creative website designs, and writing about the latest design trends, inspiration, design freebies, and more. You can follow him on Twitter

45 thoughts on “How To Create Flat Style Breadcrumb Links with CSS”

  1. Hello,
    I need to create a border for the chevron.
    How would this be possible?
    Haven’t been able to achieve this.
    Hope someone could help me.

    Here is the code:
    codepen.io/adida948/pen/xRBzOP

    Reply
  2. When using this approach, the inclusion of the ‘disabled’ class appears to stack and I’m having difficulty establishing why.

    Any thoughts? The example CSS is “as is”.

    Example of the issue at imgur.com/2Jdc81A

    The first 3 nodes are active, the last two are disabled.

    Reply
  3. Very informative post!!

    Nowadays, people would like to have flat style breadcrumb on their websites in order to attract website visitors.

    And this step by step guide will definitely help to non techie people in an effective manner

    Thanks.

    Reply
  4. 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.

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

    Reply
  6. i had my take on this concept:
    https://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

    Reply
  7. 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):

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

    Reply
  8. 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.

    Reply
  9. 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?

    Reply
  10. 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 ;-)

    Reply
  11. 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.

    Reply
    • 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.

      Reply

Leave a Comment

Verified by MonsterInsights