The user needs to navigate among sections of a website, but space to show such navigation is limited.
A list of main sections are displayed as links in a single vertical strip. When a user hovers their cursor over a list item or clicks a list item, a sub list is displayed (usually adjacent and below). The user can then follow the now horizontally extended list item down, and select the subsection they are interested in.
Traditionally, when the user’s cursor leaves a drop down menu, the menus are no longer visible. However, this is an unforgiving interaction method.
As humans, we do not always act perfectly as the system would like us to. To cope with human errors and to guide us to act as you would like us to, you can implement the following:
Drop-down menus save space by organising and concealing information. Drop-down menus are not regarded as a technique that increases usability, as they can often be difficult to use.
Flyout menus allow for only showing top levels of the page’s hierarchy permanently, while still giving the option to show deeper levels on mouse over.
This and others patterns are available and ready to use in this massive Wireframe Bundle. Suitable for a wide variety of projects: Website and landing pages, Ecommerce, Dashboard, Flowchart and iOS.