Responsive navigation




Responsive navigation needs to be designed based on the device usage.



Since Whoobe is focused on shipping a real responsive experience we had many discussions about the most useful and user friendly navigation system for mobile devices.


Where is the burger?


We are not talking about hamburgers but the most used solution to create a responsive navigation for mobile devices, when normally a burger icon is set at the top-right or top-left of the screen.


But is it really useful or is just because most website are using this solution to implement the mobile navigation?


Using a mobile device is quite different then using a desktop/laptop. With mobile devices your pointing device are your fingers.


You do everything with them. Scroll, tap, double-tap, shrink, zoom and all the gestures that your device supports.


Navigation bar app style


Well it's quite difficult to move your finger to the top of the screen to tap the burger and access to the navigation, it's more useful since you are handling your device with your hand access to the navigation if it set in the bottom of the screen.


So we decided that the best solution is to set the burger in a navigation bar in a toolbar app style.


It's easier and makes your responsive website looks like a real app.

Created with code and coffee 
by Antonio Nardone
Made with 
Vue / NuxtJS/ Feathersjs / TailwindCSS
MIT License - Open source - Free