Framer
Framer
  • Learn
    • Speedruns
    • Starter Kit
    • Examples
    • Tutorials
    • Sessions
  • Teams
    • Teams
    • Enterprise
  • Pricing
  • Blog
  • Updates
  • Support

Magic Motion

Animated Tabs
Card List
Card Paging
Container Transitions
Dynamic Grid
Expand on Tap
Image Gallery
Image Gallery 2
Magic Motion
Stories UI
Swipe & Expand
To-Do List
Toggle Menu

Overlays

Bottom Sheet
Draggable Sheet
Modal Box
Side Menu

Components

Input Form
Loading Indicator
Radio Button Form
Tooltip on Hover

Flows

Checkbox Form
Splash Screen
Timeout Transition

Interactions

Accordion Menu
Drop on Scroll
Nested Scroll
Star Rating
Swipe Menu
Switch Sheet
Tab Menu
Wheel Picker

Effects

Cover Flow
Cube Effect
Flip Effect
Parallax Scroll
Perspective Tilt
Pile Effect
Shuffle
SVG Animation

Integrations

Google Sheets
Map
Signature Pad
Sound Effects

Code

Card Swipe
Carousel
Custom Effect
Drag Handle
Dynamic Header
Image Panning
Input Data
Input Validation
Like Animation
Like Counter
Lock Screen
Long Press Menu
Perspective 3D
Progress Bar
Scroll Progress
Show Password
Slider
Stories: Drag
Stories: Tap
Toast Prompt

Tab Menu

Open in Framer to interactPreview this example

Learn to use the Link tool's Instant transition to fake a complex state.

Open in FramerPreview Example

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.

Resources
  • Interactions Support
  • Transitions Support
  • Talk about this on Discord

Framer

  • Updates
  • Pricing
  • Tutorials
  • Teams
  • Enterprise
  • Blog
  • Motion

Platforms

  • Web
  • macOS
  • iOS
  • Android
  • Figma Importing
  • Sketch Importing
  • User Testing
  • Desktop PrototypingNew

Resources

  • Examples
  • Sessions
  • SpeedrunsNew
  • Packages
  • Volt
  • API
  • State of Prototyping
  • Wireframing Tool
  • Mockup Tool
  • Dictionary

About

  • Loupe
  • Community
  • Company
  • Careers
  • Security

Support

  • Using Framer
  • Accounts
  • Contact

  • Twitter
  • Discord
  • Dribbble

Copyright © 2021 Framer B.V.

  • Security
  • Terms of Service
  • Privacy Statement