CodePenChallenge: Menus

June 25, 2018

Menus are such a ubiqutious need for websites they are hard to even talk about as a pattern. They are a million ways to do them, from the simple and mundane to the exotic and interactive. They stand between your users and your content though, so you have to do it right. Let's have a play at designing a menu this week.

How to Participate

Create a Pen and tag it codepenchallenge and cpc-menus. We'll be watching and sharing the best stuff on our blog, Twitter, and Instagram (Use the #CodePenChallenge tag on Twitter and Instagram as well).

Ideas

Notice the nested lists in these menus. Which way are you going to take it? Display all the items all the time, or make it interactive with some way to reveal the sub menus?

Menus these days have the unique challenge of needing to accomodate both huge and tiny screens. Can you make this menu work both ways?

The unstyled Pen is incredibly boring as-is. Is there some way to make it even more boring?

Resources

There are a number of official CodePen Patterns collections that you can reference, like menu icons, tabs, and dropdown menus. Notice on that Patterns page how there are three ways to browse: the collection, search, or the tag.