Tab
Display one panel of content at a time with a tabbed interface. This component is based on the WAI-ARIA Tabs Pattern.
import "./style.css";
import * as Ariakit from "@ariakit/react";
export default function Example() {
const defaultSelectedId = "default-selected-tab";
return (
<div className="wrapper">
Vegetables
<div className="panels">
<ul>
<li>🍎 Apple</li>
<li>🍇 Grape</li>
<li>🍊 Orange</li>
</ul>
<ul>
<li>🥕 Carrot</li>
<li>🧅 Onion</li>
<li>🥔 Potato</li>
</ul>
<ul>
<li>🥩 Beef</li>
<li>🍗 Chicken</li>
<li>🥓 Pork</li>
</ul>
</div>
</div>
);
}
Examples
Tab with React RouterUsing React Router to create Tab links and tab panels controlled by the browser history, while maintaining keyboard navigation.
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.
API
Follow updates
Join 1,000+ subscribers and receive monthly updates with the latest improvements on Components.