Tab Menu

Learn more about tab menus

What is a tab menu?

A tab menu, or tab bar, is a simple and effective way of displaying different pages of content in a web or mobile application. A tab menu typically consists of a horizontal bar at the bottom of the UI – and visible on every screen – featuring a handful of icons that can be clicked to take the user to other content.

The icons on a tab menu serve as easy navigation shortcuts, allowing the user to quickly move between the different pages of an app without becoming bogged down in a complicated page hierarchy. This is achieved by clearly highlighting the currently selected icon so that the user knows exactly where they are within the app at any given time.

Before tab menus became popular, most applications used the so-called hamburger design for displaying menu options. But while vertical hamburger-style menus occasionally still have their legitimate uses today - mostly on desktop – they are generally much less suitable for use in Android and iOS application designs due to the excessive amount of screen space they occupy.

What are the advantages of tab menus?

It will make no difference how attractive or potentially useful your website or mobile app may be if a user can’t easily navigate their way around it. The following three advantages make tab menus a great asset to any app – whether on mobile or desktop:

• Each tab clearly indicates whether it is active or inactive. For this reason tab menus enable users to easily understand at all times precisely where they are located within the app.
• All icons are displayed together - with none hidden or exceeding the limits of the page. Thus tab menus allow users to see what other locations in the app they can navigate to while also informing the user as to what they can expect find once they click into a given tab.
• Good app design not only means making the UI clear and easy to understand, but also convenient and practical to interact with. A tab menu fulfills both of these criteria.

Regardless of the preferred manner of using their phones, it’s estimated that in practice roughly half of all app users regularly rely on a single thumb to operate their mobile devices. Located as they are at the bottom of the screen, and featuring bold and easily clickable icons, tab menus are supremely usable. Even with just the thumb of one hand.

How to create a tab menu interaction in Framer

In Framer, you can use the Tabs Default Component to create a tab menu interaction. First, insert the component from the Insert Menu. Next, create multiple frames with different content – these will be your different pages. When your content is set, you can connect the Tab component to each one of your frames.

Once this is done, it’s time to customize your tabs. To do this, go to the properties panel where you will see the option to change the style of your active and inactive tabs. From here you can also choose which icon will appear on each tab. Now your tab menu should be up and running!