Line25

Modern Examples of the Classic Sidebar Menu Layout

Modern Examples of the Classic Sidebar Menu Layout
Published May 19, 2014 - (Updated March 27, 2018)

The sidebar menu seems to be coming back into fashion once again after it was left behind for horizontal navigation bars. The sidebar menu was most common back in the early days of web design, but these days we’re starting to see designers ditch the horizontal nav bar in favour of the vertical list once again. Nowadays though these menus are built with large icons or clever animation effects that allow them to slide in and out of view. Today’s web design showcase features 20 sites that all feature modern examples of the classic sidebar menu layout.

Mammoth Media

Mammoth MediaPin

Wallmob

WallmobPin

Electrik Company

Electrik CompanyPin

Hyperakt

HyperaktPin

FLIPP

FLIPPPin

Q Ideas

Q IdeasPin

The Conference by Media Evolution 2014

The Conference by Media Evolution 2014Pin

PUSH Collective

PUSH CollectivePin

ZINDHAI

ZINDHAIPin

Georgina Bousia

Georgina BousiaPin

Gareth Emery

Gareth EmeryPin

Dash Light

Dash lightPin

Broken Twill

Broken TwillPin

Kick Point

Kick PointPin

Eat Drink Inc.

Eat Drink Inc.Pin

PFD

PFDPin

2Creative

2CreativePin

Design Council

Design CouncilPin

Written by Iggy

Iggy is a designer who loves experimenting with new web design techniques, collating creative website designs, and writing about the latest design trends, inspiration, design freebies, and more. You can follow him on Twitter

13 Comments

Would you like to say something?

  1. 美国代购 says:

    Thanks for sharing.

    Very nice designs!

  2. 纽约网站设计 says:

    They are very good designs. But I am looking for something with some 3D effect.

  3. Jim says:

    Great article and great examples. Over the years I’ve come to lament the dull boring sameness of top navigation and to me the look of the Left navigation is just more natural, as in English speaking countries we learn to read and scan Left to Right. It just looks great.

    • Monique says:

      Beautiful examples and just the thing I’m searching for, but now in real life …. does anyone know where to find a responsive vertical menu to download?
      I’m not a code writer, but can adjust css.
      Really searching the web for days, a lot of menus but nothing like the above ideas.

  4. لوله پلی اتیلن says:

    very nice subject.thx

  5. Alessandro Alessio says:

    My site have this kind of sidebar but every entry of this collection it’s better than mine! I should improve it!

  6. دانلود فیلتر شکن says:

    very nic , good luck and tnx a lot

  7. اس ام اس says:

    Those are really minimal yet very effective sites. Thanks.

  8. Tom says:

    The screenshots you have on this page provide a nice impression of the designs used on each site. To fully appreciate their beauty, you really have to take the time to click through to each one and spend a little while there.

    Great list, thanks for sharing.

  9. Kevin Mamaqi says:

    Thanks for sharing, now I’m working on a project with sidebar menu and this is helpful.

  10. Noah says:

    Nice, though I’d like to see an article on how to handle / or examples on how to handle clients who insist on lots of sidebar advertising. How to prevent that kind of advertising from distracting the user.

    Thanks

  11. سانترال says:

    very very nice :)

    thanck you so much

  12. Teelah says:

    Love the side navigation on full width sites and so much better usability on mobile devices. Thanks for sharing! Are there any tutorials that you suggest for creating this menu?

Please Share