Tab select

Introduction

The Tab Select example shows a common UI pattern: a set of tabs where the selected indicator smoothly animates from the old tab to the new one.

In this example, the selected indicator looks like one element but it's actually several elements, all animating between each other as if there were just one.

This shared element "magic move" effect can be complex to build manually, but Motion makes it simple. In this tutorial, we'll learn to use:

• The layoutId prop to create a shared layout animation.
• Gesture props like whileTap and whileFocus to add satisfying micro-interactions.

Get started

Let's begin with the basic structure of the tabs. We'll use React's useState hook to keep track of the currently selected tab and then map over an array of tab names to render the list.

For now, this will be a functional but unanimated component.

import { useState } from "react"

const tabs = ["Home", "React", "Vue", "Svelte"]

export default function TabSelect() {
    const [selectedTab, setSelectedTab] = useState(0)

    return (
        <nav className="container">
            <ul>
                {tabs.map((name, index) => {
                    const isSelected = selectedTab === index

                    return (
                        <li
                            key={index}
                            className={isSelected ? "selected" : ""}
                            role="tab"
                            aria-selected={isSelected}
                        >
                            <button onClick={() => setSelectedTab(index)}>
                                {name}
                            </button>
                        </li>
                    )
                })}
            </ul>
            {/* Copy StyleSheet component from example source code */}
        </nav>
    )
}