More about that bloody three lines navigation icon

I’m glad that the three-lines icon I suggested first, back in March is now being established as a sort of standard.

You know which icon I’m talking about, right? This one:


Jordan Moore (who has a name like a country singer) wrote about it last week for Smashing Magazine citing some great new examples and implementation techniques from Tim Kadlec and Stu Robson.

Back in March I thought:

Unless our navigation’s arranged in a grid (and so we should use a grid icon), I’m putting my weight behind three lines because I think it’s most recognisable as navigation to the average person.

My thinking’s developed since then as people have developed different navigation patterns and because these icons appear so similar those grippy, grabby devices we see in so many apps.

Three horizontal lines is still the right, not perfect but right icon to use for navigation that’s revealed vertically — either up, or down — as in Toggle Navigation and Footer Anchor from Brad’s This Is Responsive patterns.

But, when navigation’s revealed horizontally — left or right — as in the Left Nav Flyout pattern, I think three vertical lines make better sense.


Follow my grippy, grabby logic?

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