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?