Tab with Next.js App Router
Using Next.js Parallel Routes to create accessible Tabs and tab panels that are rendered on the server and controlled by the URL.
Components
Abstracting the Tab components
In this example, we're abstracting the Ariakit Tab components into higher-level components with a simpler API integrated with the Next.js App Router. Check out the tabs.tsx
file above to see the source code.
Controlling the Tab state
To control the selected tab state, you can pass the selectedId
and setSelectedId
props to TabProvider
. These props allow you to synchronize the tab state with other state sources, such as the browser history.
const router = useRouter();
const pathname = usePathname();
router.push(id || pathname)
}}
>
You can learn more about controlled state on the Component providers guide.