
Three ways to create a menu for sites with a lot of content
After a few magic tricks and certainly dozens of hours of work, you’ve reached the point of choosing a navigation method for your website and you’re unsure how to organize the menu. You’re in luck! We’ve written this article to offer you some solutions.
1 – The burger menu
The term “burger” refers to the famous icon it represents, but today, the two or three horizontal lines can be replaced by new concepts. A “+” sign, the word “menu,” or a more personalized design work just as well.
The principle remains the same: hide the navigation behind a click. After this click, a world of possibilities opens up! One, two, three levels of navigation; a horizontal or vertical menu; few elements with large font; many elements with smaller font, etc. You get the point.
The burger menu leaves a lot of room for imagination. It’s not always the best friend of clients who still believe that the three-click rule is universal. The reality is that several clicks within a well-organized information architecture are better than two or three clicks in an interface where all possible information is given at once.
For example, the French e-commerce site, La Fnac, could have benefited from these tips to better display its product offerings.
A good example of a burger menu outside of e-commerce is the Cégep de Trois-Rivières website. When the menu is opened, the main sections appear, each with its own sub-navigation on the page.

Here’s a simpler example of a burger menu created by Kryzalid for the Quebec company Naya.

2 – Dropdown menu
This method is probably the most classic. In other words, it may not be very original, but it works well in most cases. The only limitation is on the first level. Ideally, no more than six or seven main sections should be displayed.
A well-known example is the Indigo Chapters website. This entertainment and home decor company has a very extensive catalog. The main sections are clearly defined, and the dropdown menus are well structured.

If needed, a secondary navigation can be added at the top to provide access to unique pages. This idea is used on Indigo’s site and also on the new website for the Centre de services scolaires de Laval, created by Kryzalid.

3 – Dropdown menu + burger menu
When you want to have it all, you can combine several methods. If you want to highlight several sections while keeping a “miscellaneous” space, it’s possible. Placing a dropdown menu and a burger menu allows you to promote certain parts of the client’s offerings while keeping a structured space for less easily classifiable elements.
The Loyola Marymount University site uses this system well. In the horizontal menu, you find the main functions of the university site: apply, visit, donate. Then, the burger icon provides more information on programs, for example.

The new IKEA website uses this type of menu, highlighting Products, Rooms, and SALE, along with a burger menu that contains the site’s full navigation.

Kryzalid used this dropdown and burger menu technique to organize the extensive menu for the Cégep de Sorel-Tracy.

4 – That’s all well and good, but how does it work on mobile?
Great question! Let me grab my ukulele and sing you a little song.
The accordion is your friend,
Section titles as well,
Make the elements slide,
So you don’t see everything at the same time!
These gentle words can be interpreted according to each project. The accordion is useful for storing second-level information. If you go beyond two levels, it’s wiser to use a slider navigation. This means displaying the titles of the main sections first, and then, upon tapping, revealing the next level’s items. A back arrow is, of course, provided to return to the previous section. IKEA gets it right by choosing this system. This way, the user focuses only on the information they want to see.

The challenge of a redesign mainly lies in the reconstruction of the navigation. It’s essential to spend time on the site structure to find the best way for future visitors to navigate. Ideally, if the budget allows, multiple solutions should be tested with typical users to come up with a nearly perfect product. This is something you likely already know, but it’s important to emphasize.
The Kryzalid team is fully available to guide you on this topic. With that, have a great day!