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.

Tab Routing Next.js Next.js App Router Abstracted examples

Edit example

1234567891011121314151617181920212223242526272829303132
import Link from "next/link.js";
import type { ReactNode } from "react";
import "./style.css";
import { Tab, TabList, TabPanel, Tabs } from "./tabs.tsx";

export default function Layout(props: { tabs: ReactNode }) {
  return (
    <main className="main">
      <h1 className="heading">Posts</h1>
      <p>
        Check out the{" "}
        <Link href="/previews/tab-next-router" className="link">
          trending posts
        </Link>{" "}
        or stay up to date with the{" "}
        <Link href="/previews/tab-next-router/new" className="link">
          latest posts
        </Link>
      </p>
      <div className="wrapper">
        <Tabs>
          <TabList>
            <Tab href="/previews/tab-next-router">Hot</Tab>
            <Tab href="/previews/tab-next-router/new">New</Tab>
          </TabList>
          <TabPanel>{props.tabs}</TabPanel>
        </Tabs>
      </div>
    </main>
  );
}

import Link from "next/link.js";
import type { ReactNode } from "react";
import "./style.css";
import { Tab, TabList, TabPanel, Tabs } from "./tabs.tsx";

export default function Layout(props: { tabs: ReactNode }) {
  return (
    <main className="main">
      <h1 className="heading">Posts</h1>
      <p>
        Check out the{" "}
        <Link href="/previews/tab-next-router" className="link">
          trending posts
        </Link>{" "}
        or stay up to date with the{" "}
        <Link href="/previews/tab-next-router/new" className="link">
          latest posts
        </Link>
      </p>
      <div className="wrapper">
        <Tabs>
          <TabList>
            <Tab href="/previews/tab-next-router">Hot</Tab>
            <Tab href="/previews/tab-next-router/new">New</Tab>
          </TabList>
          <TabPanel>{props.tabs}</TabPanel>
        </Tabs>
      </div>
    </main>
  );
}

Components

TabDisplay one panel of content at a time with a tabbed interface. This component is based on the WAI-ARIA Tabs Pattern.

View all 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();

<TabProvider
  selectedId={pathname}
  setSelectedId={(id) => {
    router.push(id || pathname)
  }}
>
const router = useRouter();
const pathname = usePathname();

<TabProvider
  selectedId={pathname}
  setSelectedId={(id) => {
    router.push(id || pathname)
  }}
>

You can learn more about controlled state on the Component providers guide.

Rendering a single TabPanel

It's possible to render a single TabPanel component and use the tabId prop to point to the selected tab.

const tabId = useStoreState(tab, "selectedId");

<TabPanel tabId={tabId}>{props.children}</TabPanel>;
const tabId = useStoreState(tab, "selectedId");

<TabPanel tabId={tabId}>{props.children}</TabPanel>;

Related examples

Dialog with Next.js App RouterUsing Next.js Parallel Routes to create an accessible modal Dialog that is rendered on the server and controlled by the URL, with built-in focus management.

Select with Next.js App RouterControlling the value of a Select component via the URL using the Next.js App Router and React.useOptimistic to ensure a responsive and accessible UI.

Tab with React RouterUsing React Router to create Tab links and tab panels controlled by the browser history, while maintaining keyboard navigation.

Navigation MenubarUsing Menubar, Menu, and Portal to create an accessible, tabbable navigation menu widget with links and menu buttons that expand on hover and focus.

Combobox with TabsOrganizing Combobox with Tab components that support mouse, keyboard, and screen reader interactions. The UI remains responsive by using React.startTransition.

View all examples