Menu Tab

Learn more about tab menus

What is a menu tab?

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.

Menu tabs and navigation

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.

When should you use tab menus?

Navigation tabs are generally useful when you want to guide your users across two to nine different categories of content. These content categories should be logically similar in nature and unlikely to change on a regular basis to create a streamlined user interface.

Design experts suggest that tab menus be kept to a single line to help users remember which tabs they’ve already visited. If your content categories have long names or end up creating multiple rows of tabs, it can confuse users. Simplifying your design by replacing category names with tab icons, for example, can help make the user interface easy to navigate.

What are the advantages of menu tabs?

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 to 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.

Best ways to design tab menus

When designing tabs, it’s important to keep in mind that their function is to help organize content categories that are related and at the same level of hierarchy. For example, in a food delivery application, a tab menu for a restaurant might display the following categories: appetizers, salads, main dishes, drinks and desserts. In other words, tabs help you organize distinct content across different screens.

You can add both icons and text for each category but try to keep text labels short for readability. If you’re looking to just use icons in your tab menu, make sure that the icons are universally recognized and have been embedded in your users’ collective memory, like the shopping cart, search, and profile icons most commonly found in ecommerce applications.

For websites, tab menus are best placed at the top together with the header or even in lieu of a header. But for iOS and Android mobile apps, designers are increasingly adding tab menus below their associated content to help users navigate the app with just their thumbs.

How to create a tab navigation 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!