On small screens, an extensive menu can fill the entire page. However, if you have a menu that has to work simultaneously on wide screens and on mobile devices, you want that menu to be as efficient as possible regarding the use of vertical space.
Present the navigation on a menu that on narrow screen devices dynamically changes to a native select component.
This type of menu can be a practical alternative for when vertical space is scarce and you want to display the menu on top of the page. However, it is not the most elegant of the alternatives, because it adds another layer of information with a distinctive interface. A more clean and elegant approach in terms of visual design can be achieved through the TOGGLE MENU pattern, which uses a comparable type of interaction but with a custom interface.
This type of menu is easier to recognize as something selectable because it uses the native controls of each device. Likewise, because it uses controls that are optimized for the respective device, you can be confident that it will work and be accessible in most of them. Though, as a downside, because it uses the native browser components, it is very difficult to achieve a consistent look across platforms (Figure 1).
You can also work with subitems, though, that can be even more confusing. In Figure 1 subitems are denoted by an indent, but dashes are also a common alternative.