The idea is: show as many navigation items as will fit horizontally with a UI toggle to show the rest. I like the idea. Why hide everything behind a toggle if there is room to expose the most important links? How it looks and how it is implemented could vary. Let’s look at some examples!
The pattern made it into Brad’s Responsive Patterns:
In that demo, the navigation jumps from either showing all the links, or showing just three with a “More” link.
The whole idea for this post came from a little thought I had where I wondered if there was a simple CSS way to have navigation items “drop off” the edge only as there was room, disappearing behind a menu toggle. My idea was to make the navigation of a fixed height with hidden overflow and wrap them. So as a navigation item wrapped, it would visually disappear. Here’s that concept:
The only thing that I don’t love about that technique is the fixed height. That’s always a warning flag in CSS. When text is involved, it ends up being a bit of a magic number. That is subsided a bit by the fact that you could set it in em or rem so it increases as text increases. But still.
And Wonderful Machine:
Luke Jacksonn made a demo he calls the “Greedy Navigaton”. Interesting in how it knows how many navigation items are hidden.
There is some sentiment that The Guardian may have been the first example of this out there. See:
Use it? Love it? Hate it?