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:
The full menu, in a straight line.
Then, on smaller screens:
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.
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.