28 Jan Navigation Menu Patterns for Mobile Phones
Whether you have a website already up on the World Wide Web; or you are looking to develop a new website, there is a high chance that you will also need to optimize the website for mobile phone.
In this entry, we will discuss the available navigation menu patterns/options you have for your website (on the mobile phone).
This menu behavior mimics most of the iOS apps menus in sliding out from the left (can also be slding out from the right).
In the above example, users can click on the Menu (hamburger) icon and the navigation menu will slide down. There is a sub-menu for Services, which allows user to see more options (will slide down further).
It is also possible to fixed the menu to the top of the screens as per the example above. This way, the navigation menu will always be available at the top of the user’s mobile phone screen.
In this website, the desktop view shows the menu in text while in mobile view, the text are replaced with icons.
Stacked Up Menus
Another common navigation pattern is for the menu items to stack up in the mobile view. However, this might only work for short (and not complex) menus.
Another popular pattern is for the menu to take up the entire screen as an overlay on top of the website.