Computer Nerd

Bottom-bar navigation

An experiment with bottom-bar navigation

I experimented with bottom-bar navigation in this template. Download the template here.. As you can see, there's a navigation menu at the bottom on both desktop and mobile versions.

Bottom navigation, especially with icons, is familiar to mobile users, since a lot of major apps use it, including YouTube, Facebook, and Twitter. In these cases, the functions correspond to the most important pages. In Twitter's case, these are Home (Recommended and followed tweets), Search, Notifications, and Messages. So does it have merit in web design?

Advantages and disadvantages

Bottom navigation is easier to use for mobile users, since it is easiest for the left thumb to reach the screen's bottom left, and the right thumb to reach the screens bottom right.

Since it's at the bottom, people will see it last. This is advantageous for sites where content is a focus, since it gets out of the user's way. On the other hand, for online shopping sites or other sites where people should be looking at the navigation first, it's a disadvantage.

Furthermore, putting navigation at the bottom moves it away from the main content, adding to the difficulty of usage on desktop.

Bottom navigation should not be used for more than five important pages, since adding more can lead to problems.

Issues could also arise because people will be visiting your site in apps that have their own bottom bar, so you could be facing the Android buttons bar stacked with a browser's bottom bar and your website's bottom bar, and that's not a good look.

So... should I use a bottom nav?

I'd recommend using a bottom bar for navigation if your site has five or fewer important pages and its focus is on the main content. In other situations it can be a detriment to UX.

What should I use instead?