Tab with React Router

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

Tab Routing React Router Abstracted examples

Edit example

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
import { MemoryRouter, Outlet, Route, Routes } from "react-router-dom";
import "./style.css";
import { Tab, TabList, TabPanel, Tabs } from "./tabs.tsx";

function GroceriesTabs() {
  return (
    <div className="wrapper">
      <Tabs>
        <TabList aria-label="Groceries">
          <Tab to="/">Fruits</Tab>
          <Tab to="/vegetables">Vegetables</Tab>
          <Tab to="/meat">Meat</Tab>
        </TabList>
        <div className="panels">
          <TabPanel>
            <Outlet />
          </TabPanel>
        </div>
      </Tabs>
    </div>
  );
}

function Fruits() {
  return (
    <ul>
      <li>🍎 Apple</li>
      <li>🍇 Grape</li>
      <li>🍊 Orange</li>
    </ul>
  );
}

function Vegetables() {
  return (
    <ul>
      <li>🥕 Carrot</li>
      <li>🧅 Onion</li>
      <li>🥔 Potato</li>
    </ul>
  );
}

function Meat() {
  return (
    <ul>
      <li>🥩 Beef</li>
      <li>🍗 Chicken</li>
      <li>🥓 Pork</li>
    </ul>
  );
}

export default function Example() {
  return (
    // We're using MemoryRouter for demonstration purposes. But you can use
    // BrowserRouter, HashRouter, etc. depending on your needs.
    <MemoryRouter>
      <Routes>
        <Route path="/" element={<GroceriesTabs />}>
          <Route index element={<Fruits />} />
          <Route path="/vegetables" element={<Vegetables />} />
          <Route path="/meat" element={<Meat />} />
        </Route>
      </Routes>
    </MemoryRouter>
  );
}

import { MemoryRouter, Outlet, Route, Routes } from "react-router-dom";
import "./style.css";
import { Tab, TabList, TabPanel, Tabs } from "./tabs.tsx";

function GroceriesTabs() {
  return (
    <div className="wrapper">
      <Tabs>
        <TabList aria-label="Groceries">
          <Tab to="/">Fruits</Tab>
          <Tab to="/vegetables">Vegetables</Tab>
          <Tab to="/meat">Meat</Tab>
        </TabList>
        <div className="panels">
          <TabPanel>
            <Outlet />
          </TabPanel>
        </div>
      </Tabs>
    </div>
  );
}

function Fruits() {
  return (
    <ul>
      <li>🍎 Apple</li>
      <li>🍇 Grape</li>
      <li>🍊 Orange</li>
    </ul>
  );
}

function Vegetables() {
  return (
    <ul>
      <li>🥕 Carrot</li>
      <li>🧅 Onion</li>
      <li>🥔 Potato</li>
    </ul>
  );
}

function Meat() {
  return (
    <ul>
      <li>🥩 Beef</li>
      <li>🍗 Chicken</li>
      <li>🥓 Pork</li>
    </ul>
  );
}

export default function Example() {
  return (
    // We're using MemoryRouter for demonstration purposes. But you can use
    // BrowserRouter, HashRouter, etc. depending on your needs.
    <MemoryRouter>
      <Routes>
        <Route path="/" element={<GroceriesTabs />}>
          <Route index element={<Fruits />} />
          <Route path="/vegetables" element={<Vegetables />} />
          <Route path="/meat" element={<Meat />} />
        </Route>
      </Routes>
    </MemoryRouter>
  );
}

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

Controlling the Tab state

To control the selected tab state, you can pass the selectedId prop to TabProvider. This prop allows you to synchronize the tab state with other state sources, such as the browser history.

const location = useLocation();

<TabProvider selectedId={location.pathname}>
const location = useLocation();

<TabProvider selectedId={location.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 control the selected tab.

const selectedId = tab.useState("selectedId");

<TabPanel tabId={selectedId}>
  <Outlet />
</TabPanel>;
const selectedId = tab.useState("selectedId");

<TabPanel tabId={selectedId}>
  <Outlet />
</TabPanel>;

Related examples

Dialog with React RouterUsing React Router to create a modal Dialog that's controlled by the browser history.

Tab with Next.js App RouterUsing Next.js Parallel Routes to create accessible Tabs and tab panels that are rendered on the server and controlled by the URL.

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.

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

Tab with React Router

Components

Controlling the Tab state

Rendering a single TabPanel

Related examples

Stay tuned