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 | ▸ | ▸ ▸ |
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.