Tab Menu

Learn more about tab menus

Tab menus or tab bars are great for displaying different pages of content in a web application or mobile application. This form of navigation became quite popular after the decline in popularity of hamburger menus. The reason that tab menus are so widely used today is because they have three key features.

First, they allow users to see where they are currently in the app because of the active vs. inactive states of the tabs. Second, they allow users to see what other locations in the app they can navigate to, since all the tabs are always displayed together - nothing is hidden. Finally, tab menus can provide some context up front as to what the user will find when they click into a tab because the tabs are typically labeled with icons. These three things make tab menus a great asset to any app either on mobile or desktop.

How to create one 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. Once your content is set, you can connect the Tab component to each one of your frames. Then, you can customize your tabs. In the properties panel 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.