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›
‹/ol›

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.


Availability

I’m interested in remote design and consulting projects world-wide and speaking at conferences in Asia, Australia, and New Zealand.

Available now

Talk to me

For work enquiries email

Or call Sue on +44 (0)1745 851848

Your call won’t cost more than calling the UK.

Studio

Stuff & Nonsense Ltd.
Eversleigh, Lon Capel
Gwaenysgor
Flintshire, LL18 6EJ, UK

I’m currently in Sydney, Australia