Priority+ navigation with flexbox

Priority+ navigation is an interesting pattern. The main idea of it is to place the more important items of your menu at the left of it. It means that the most important stuff will be available on all viewports and the less importants items will popup as the screen enlarge.

After an unsuccessful search for a priority+ navigation built with flexboxes, I have build one.

And here’s the result.

Pros

Cons

The code

All the documented code is available on Codepen. Feel free to play with it.

See the Pen Priority+ navigation by Cédric Aellen (@alienlebarge) on CodePen.

Next step

I would be very happy to implement the ability to have more than one menu level to solve the sub-nav dilemma.

My notes about a sub-navigation
My notes about a sub-navigation