Tabs

Flexible navigation tool with various modes and features.

You can explore the tabs component in the following curated examples.

Anatomy

<Tabs.Root>
  <Tabs.List>
    <Tabs.Trigger />
    <Tabs.Indicator />
  </Tabs.List>
  <Tabs.Content />
</Tabs.Root>

Examples

Controlled

To create a controlled Tabs component, manage the current selected tab using the value prop and update it when the onValueChange event handler is called:

Root Provider

An alternative way to control the tabs is to use the RootProvider component and the useTabs hook. This way you can access the state and methods from outside the component.

Indicator

To provide a visual cue for the selected tab, use the Tabs.Indicator component:

Disabled

To disable a tab, simply pass the disabled prop to the Tabs.Trigger component:

Vertical

The default orientation of the tabs is horizontal. To change the orientation, set the orientation prop to vertical.

Lazy Mount

Lazy mounting is a feature that allows the content of a tab to be rendered only when the tab is first activated. This is useful for performance optimization, especially when tab content is large or complex. To enable lazy mounting, use the lazyMount prop on the Tabs.Content component.

In addition, the unmountOnExit prop can be used in conjunction with lazyMount to unmount the tab content when the tab is deactivated, freeing up resources. The next time the tab is activated, its content will be re-rendered.

Manual Activation

By default, the tab can be selected when it receives focus from either the keyboard or pointer interaction. This is called automatic tab activation.

In contrast, manual tab activation means the tab is selected with the

Enter key or by clicking on the tab.

Links

Use the asChild prop to render tab triggers as anchor links. This is useful for SEO and allows tabs to work with browser navigation.

Guides

Router Integration

When using frameworks like Next.js, Remix, or React Router, controlling the active tabs based on the URL can be useful.

To achieve this, you need to do two things:

• Set the value prop to the current URL path.
• Listen to the onValueChange event and update the URL path.

Here's an example using Remix Router

import { Tabs } from '@ark-ui/<framework>/tabs'
import { useLocation, useNavigate, Link } from '@remix-run/react'

export default function App() {
  const { pathname } = useLocation()
  const navigate = useNavigate()
  const lastPathFragment = pathname.substring(pathname.lastIndexOf('/') + 1)
  const activeTab = lastPathFragment.length > 0 ? lastPathFragment : 'homepage'

  return (
    <Tabs.Root
      value={activeTab}
      onValueChange={({ value }) => {
        navigate(`/${value === 'home' ? '' : value}`)
      }}
    >
      <Tabs.List>
        <Tabs.Trigger asChild value="home">
          <Link to="">Home</Link>
        </Tabs.Trigger>
        <Tabs.Trigger asChild value="page-1">
          <Link to="page-1">Page 1</Link>
        </Tabs.Trigger>
        <Tabs.Trigger asChild value="page-2">
          <Link to="page-2">Page 2</Link>
        </Tabs.Trigger>
      </Tabs.List>
    </Tabs.Root>
  )
}

API Reference

Props

Root

Renders a <div> element.

TabContent

Renders a <div> element.

TabIndicator

Renders a <div> element.

TabList

Renders a <div> element.

TabTrigger

Renders a <button> element.

RootProvider

Renders a <div> element.

Context

API

Accessibility

Complies with the Tabs WAI-ARIA design pattern.

Keyboard Support