Multi-Toggle Menu

This is probably one of the best navigation patterns for responsive design - especially when it comes to large menus. If you have huge drop-down menus with lots of pages in your navigation, then this method could be your best bet.

I am of the philosophy that you shouldn't hide any of your website's content when you view it on mobile. Some "experts" claim that when a user visits your site on their phone, they have different "context". Bullshit. It shouldn't matter where I view your website - I want the same content. I don't want the "lite" version of your website. If you think I need different content when I view your website on my phone, then you probably need to rethink your content strategy. This navigation pattern allows you to keep your full menu and allow your users to easily navigate your site's menu.

OK, getting back on topic.

The concept is really simple - once you get to a certain breakpoint, the menu is "opened" via javascript (although not totally necessary) and the user is presented with an accordion type navigation. jQuery probably popularized this layout pattern with it's UI library.

Overall, I love this navigation pattern because it's scalable, user-friendly, and easy to implement.

← back to the examples