Re-Imagining The Bottom Navigation Bar

Michael Barsky
Dec 24, 2019 · 5 min read

Inspired by Suchit Poojari’s article, Redesigning the bottom navigation for 2020, I have decided to re-evaluate the way we treat bottom navigation.

Bottom navigation iterations of Facebook

The importance of the bottom navigation bar

The bottom navigation bar breaks an interface into its core components and allows users to quickly and easily toggle between high-level functions. Its easily accessible and comfortable location makes it incredibly pervasive on mobile applications.

Photo from UX Matters

The current state of the bottom navigation bar

While the bottom navigation bar is incredibly useful, the sheer diversity in device size, shape, and edges makes it very difficult to design a uniform bottom navigation bar.

Diversity of Phone Sizes and Edges

As Poojari puts it, the problem is “that designers, as well as developers, would/are facing is the different corner radius and bottom chin of the devices.”

With all of this in mind, how might we redesign the bottom navigation bar to accommodate for the increase in device diversity?

Bottom Navigation Bar Exploration

I created 6 different iterations for what the future of the bottom navigation bar could be. I used the Facebook app when creating my mockups as it is commonly used and has 4 key functions (generally navigation bars have between 3–5).

The Vertical Pop Up Side Navigation

The Vertical Pop Up Side Nav relies on a single icon to show more options. It can be fixed to either the right or left side of the device depending on which hand the user prefers.

Vertical Pop Up Side Navigation

The floating icon would change depending on the page the user is currently on. For example, if the user is on Notifications, the floating icon would change to the Bell icon. Its fixed location slightly above the bottom edge accommodates any device type.

The Horizontal Pop Up Side Navigation

The Horizontal Pop Up Side Nav also relies on an icon to open up more options. The open nav does not span the full screen to accommodate for all device types.

Horizontal Pop Up Side Navigation

This iteration provides slightly more space to view content and is similar to existing interaction patterns. This should make it easier for new users to adjust to this navbar.

Reduced Horizontal Navigation

This design is based on Pinterest’s beta version navigation. The interaction patterns are the same, but the goal of this iteration is to show their concept could be applied to other applications.

Reduced Horizontal Navigation

This design condenses the navigation more toward the center which accommodates any device size. When a user scrolls down the navigation disappears allowing them to see more content. When they scroll up, the navigation bar re-appears and users can dive into any function.

Center Navigation Drop Down

This design relies on a centered icon to display more options. Upon pressing the icon, the entire navigation window opens and is fixed on the scroll.

Center Navigation Drop Down

Having one icon slightly above the rest is a salient design choice to show the user where they are on the interface. From a development/design standpoint, it fits slightly more content on your navigation horizontally. The icon in the center is relatively small, so it shouldn’t distract too much from the page content.

Diamond Navigation

The diamond navigation bar has a central icon that folds out similar to the way people navigate on a game controller. While this interaction pattern is slightly less space-efficient, it does easily divide up the content.

Diamond Navigation

This iteration is more playful which could make it useful for entertainment applications. For apps like Facebook or Instagram, I am not sure how productive it would be.

Condensed Fixed Navigation

This navigation option is most similar to the traditional bottom navigation bar. However, the content is slightly more condensed to the center of the page, accommodating any device shape.

Condensed Fixed Navigation

Due to its similarities with existing navigation bars, this would be the easiest adjustment for users. The rounded edges also make the application feel more friendly and organic.

Concluding Thoughts

2020 could be the year where we change the traditional bottom navigation bar. Although the existing iteration is very strong, new design choices could improve the overall user experience and make it far easier for designers/ developers to create uniform navigation.

This was a preliminary exploration of how might we improve the bottom navigation and I encourage you to try some iterations as well. Please let me know your thoughts on which navigation style you like the best!

Thanks for reading!

I am a student designer with a lot to learn! Any insights, differing opinions, or expert advice is always welcome. I am always open to having a dialogue with others and recognize that I am not an industry expert just yet. Thanks so much for reading!

The Startup

Get smarter at building your thing. Join The Startup’s +788K followers.

Sign up for Top 10 Stories

By The Startup

Get smarter at building your thing. Subscribe to receive The Startup's top 10 most read stories — delivered straight into your inbox, once a week. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Michael Barsky

Written by

Digital product designer and student at the University of Michigan. He/Him/His. Learn more about me at: https://www.mbarskydesign.com/

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +788K followers.

Michael Barsky

Written by

Digital product designer and student at the University of Michigan. He/Him/His. Learn more about me at: https://www.mbarskydesign.com/

The Startup

Get smarter at building your thing. Follow to join The Startup’s +8 million monthly readers & +788K followers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store