Breadcrumb navigation is very useful to indicate content’s hierarchy. It can also increase content’s visibility. Breadcrumb navigation is good for SEO, too. Over the years, CSS breadcrumb techniques have undergone several changes — the old ‘sliding door background image’ technique (back in 2000’s) is no more in use. With the advent of CSS3, developers are relying entirely on CSS-only solutions to create breadcrumb navigation. Most front-end frameworks come packed with built-in styles for breadcrumbs. In this post, I will share a few hand-picked tutorials that focus on creating breadcrumb navigation from scratch.
Breadcrumb Navigation with CSS Triangles
Chris Coyier’s CSS Tricks article on breadcrumb navigation is probably the best tutorial. The tutorial presents clever
::after techniques to create triangles with pseudo elements. What I like most about the tutorial is how Chris makes it so easy to grasp how a complex technique like pseudo-elements work. If you are completely new to CSS, I would highly recommend you check this article.
This article shows four different styles to create breadcrumb navigation. In each of the techniques, pseudo-elements have been used.
Breadcrumbs & Multi-Step Indicator
This is a classic article showcasing 9 different types of CSS breadcrumb navigation. If you are in a hurry and want to quickly add breadcrumb to your site, this is your go-to page.
Coding a Graceful Breadcrumb Navigation Menu in CSS3
This tutorial is pretty self-sufficient in describing how complex breadcrumb navigation is created, beginning from the simplest possible solution. The tutorial is very detailed and can teach even expert CSS developers a thing or two.
Fancy Breadcrumb Navigation
This tutorial on CSS Menu Maker shows how to create breadcrumb menu with only HTML and CSS3 flexbox. Interesting is how navigation menus are reversed in order to achieve the fancy effect.
Create Flat Style Breadcrumb Links with CSS
This tutorial gives very detailed instructions about how to create breadcrumb menu in an easy-to-follow manner. The menus are styled with chevron shapes to support the idea of drilled down content.
These above tutorials are very detailed and easy to learn. If you are looking for quick plug-and-play code, there are a few Codepen snippets which may come handy. Although these snippets don’t have any instructions, they are high standard material.