Home » Web » CSS » The Priority+ Navigation Pattern

The Priority+ Navigation Pattern

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!

According to this Brad Frost post, this pattern was coined by Michael Scharnagl, and this is the visual demo:

The pattern made it into Brad’s Responsive Patterns:

See the Pen Priority+ Navigation by Brad Frost (@bradfrost) on CodePen.

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:

See the Pen Drop Away Nav by Chris Coyier (@chriscoyier) on CodePen.

The toggle in this case is a three line menu navicon, but it could say “More” or be a “+” or whatever easily. It’s also triggered with JavaScript, but could easily be JavaScript-free by using the checkbox hack.

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.

An alternative, if you’re OK with even more JavaScript, would be to sum the widths of each navigation element and compare to the width available. If the sum is too high, hide menu items behind the toggle until the rest fit.

Ben Callahan showed me some examples in the wild. Here’s on at NCSBN.org:

And Wonderful Machine:

Luke Jacksonn made a demo he calls the “Greedy Navigaton”. Interesting in how it knows how many navigation items are hidden.

See the Pen Greedy Navigation by lukejacksonn (@lukejacksonn) on CodePen.

AWS implements the pattern as well, as implemented by Tom Horton:

John Oxton King designed an interesting variation on the pattern he called the “Infinite horizontal navigation”:

There is some sentiment that The Guardian may have been the first example of this out there. See:

Use it? Love it? Hate it?


The Priority+ Navigation Pattern is a post from CSS-Tricks

Feed Source: CSS-Tricks
Article Source: The Priority+ Navigation Pattern

About Admin

Powered by WP Robot