Using Ampersands for a classier Responsive Navigation Icon

It looks like everyone’s settled on the three horizontal lines for collapsed responsive navigation menus.  It’s good, it’s a great icon, very descriptive.

However, sometimes you want something a little more classy. Let me propose a new alternative standard, using a single, solitary &.

Here’s how it looks in action:

First, the full width navigation:

Edit Room's Menu, full width

The full menu, in a straight line.

Then, on smaller screens:

Ampersand Menu, closed

Screen actions in Edit Room, collapsed into a menu.

Clicking will (as usual) reveal a vertical menu, using the same markup as the full width menu, just some different CSS and of course JavaScript.

Ampersand Menu opened.

Screen Actions revealed.

So there you have it, a classy alternative. I hope to see this in wider practice on fine hand-crafted sites everywhere.  Mine may be a simple ampersand, but you’ll be able to use whatever typeface’s characters you like, and make some really nice ones.



This entry was posted in Interaction Design, Responsive Design. Bookmark the permalink.

Comments are closed.