Using entities as separators in breadcrumb navigation

Over the next few weeks, I’m going to share some of the things that I’ve learned while designing and developing Inspired Guides, starting today with using HTML entities as separators in breadcrumb navigation.

What’s the first link separator that springs to mind when you think of breadcrumb navigation. Maybe a | vertical line or a / solidus? I think that we can do a little better.

How about a Double Solidus Operator?

A Double Succeeds?

Or a Right Pointing Small Triangle?

To use entities like these as breadcrumb separators, start with meaningful markup. An ordered list is the obvious choice:

‹ol class="breadcrumb"›
‹li›‹a href="">Aquatint‹/a>‹/li›
‹li›‹a href=""›Chromolithography‹/a>‹/li›
‹li aria-current="page">Etching‹/li›

HTML entities are a fabulous source of symbols that you can use to spice up a design. There can browse through screens full on entities all with their names and Unicode codes. For example:

Double Succeeds ⪼ ⪼ ⪼
Double Solidus Operator ⫽ ⫽ ⫽
Full Block █ █ █
Right Pointing Small Triangle ▸ ▸ &#9656

Add the breadcrumb separators using the CSS generated content property and bind it to a :before pseudo element:

.breadcrumb li:before {
content : "\02588"; }

Where does that \02588 come from?

We can’t use HTML entity names in CSS so we’ll need to escape the Unicode value with a backslash immediately before it. █ becomes \02588.

I’ve made a Pen to experiment with making more inspired breadcrumb navigation components.

See the Pen Inspired.Guide breadcrumb navigation by Andy Clarke (@malarkey) on CodePen.

Have fun with it.

Contact us


Let’s design something fabulous together

Call 01745 851848, tweet or email us.

Answer these questions if you’d prefer to send us a little information about your project before you call.

Our projects start at £5,000 plus VAT with an average project costing between £10,000 and £20,000 plus VAT.

We’ll keep your information private and we won’t share it with anyone else.

Registered office

Eversleigh, Lon Capel, Gwaenysgor, Flintshire, North Wales, LL18 6EJ

(Here’s a map showing how to find our studio.)