Three level dropdown

Is there any way to have a three level dropdown menu? Below is what I see using menu manager as well as just creating new dropdown items… I would like the third level to appear under second level item instead off to the right. Another problem with this is the window on desktop has to be wide enough to see the third level.

The hamburger displays the third level under the second level.

Multi level dropdown menus are really a hangover from the old days of web design. In today’s world, where internet browsing is dominated by mobile users, dropdown menus become a little tedious and cumbersome. They are not really conducive to the “Touch and Swipe” method of web browsing. Most web sites should really look and feel like a native app rather than a reincarnation of a website from the past. It should also be remembered that multi-level menus were the product of an age where hover actions were the norm. Simply hovering your mouse pointer over a menu item would cause the sub menu to appear. Sliding the mouse pointer over the sub menu would cause other sub menus to appear until you reached the item that you wanted. This doesn’t happen on touch-screen devices, so users are having to face physically clicking or tapping through menus to get to where they want to go.

There are many better ways to create a navigation system that works more like the devices people view websites on. In-page buttons or links would be one way to go. The key is that most modern websites are designed as pre-planned journeys through the site to ensure that a desired objective is achieved. Creating multiple choice menu structures actually removes your ability to take your visitors on the pre-planned route that achieves your marketing objective.

Of course, there are some types of sites where it’s beneficial to have visitors bypass any sales messages on your home page, and let them wander off in any direction they choose. Information sites are a good example, particularly those where visitors know what they are looking for. For such sites you could incorporate a mega menu that is activated by the toggle visibility function in Blocs. Essentially, you create a multi-line, multi-column, menu of button or text links in a bloc immediately below the main menu. This bloc is initially hidden, but when clicking or tapping a link in the main menu the mega menu of options is revealed. This option works effectively across all devices and overcomes the problem of sub-menus displaying outside of the screen area.

Whilst it is possible to have several layers of sub menus, you are going to have to do quite a bit of “under the hood” fiddling to get everything positioned correctly on all breakpoints.

5 Likes

@hendon52… Thanks for such a detailed reply… You make some great points as well as gave me a couple of thoughts for a better design to accomplish what I want.