# Tabs **Category**: react **URL**: https://www.heroui.com/docs/react/components/tabs **Source**: https://raw.githubusercontent.com/heroui-inc/heroui/refs/heads/v3/apps/docs/content/docs/react/components/(navigation)/tabs.mdx > Tabs organize content into multiple sections and allow users to navigate between them. *** ## Import ```tsx import { Tabs } from '@heroui/react'; ``` ### Usage ### Anatomy Import the Tabs component and access all parts using dot notation. ```tsx import { Tabs } from '@heroui/react'; export default () => ( {/* Optional */} ) ``` ### Vertical ### Disabled Tab ### With Separator Add `` inside each `` (except the first) to display separator lines between tabs. ### Custom Styles ### Secondary Variant ### Secondary Variant Vertical ## Related Components - **Breadcrumbs**: Display the user's current location within a hierarchy ### Custom Render Function ```tsx "use client"; import {Tabs} from "@heroui/react"; import Link from "next/link"; export function CustomRenderFunction() { return (
}> } > Getting Started } > Components } > Releases

View your project overview and recent activity.

Track your metrics and analyze performance data.

Generate and download detailed reports.

 ); } ``` ## Styling ### Passing Tailwind CSS classes ```tsx import { Tabs } from '@heroui/react'; function CustomTabs() { return ( Daily Weekly Bi-Weekly Monthly

Daily

Manage your daily tasks and goals.

Weekly

Manage your weekly tasks and goals.

Bi-Weekly

Manage your bi-weekly tasks and goals.

Monthly

Manage your monthly tasks and goals.

 ); } ``` ### CSS Classes The Tabs component uses these CSS classes: #### Base Classes - `.tabs` - Base tabs container - `.tabs__list-container` - Tab list container wrapper - `.tabs__list` - Tab list container - `.tabs__tab` - Individual tab button - `.tabs__separator` - Separator between tabs - `.tabs__panel` - Tab panel content - `.tabs__indicator` - Tab indicator #### Orientation Attributes - `.tabs[data-orientation="horizontal"]` - Horizontal tab layout (default) - `.tabs[data-orientation="vertical"]` - Vertical tab layout #### Variant Classes - `.tabs--secondary` - Secondary variant with underline indicator ### Interactive States The component supports both CSS pseudo-classes and data attributes: - **Selected**: `[aria-selected="true"]` - **Hover**: `:hover` or `[data-hovered="true"]` - **Focus**: `:focus-visible` or `[data-focus-visible="true"]` - **Disabled**: `[aria-disabled="true"]` ## API Reference ### Tabs Props | Prop | Type | Default | Description | |------|------|---------|-------------| | `variant` | `"primary" \| "secondary"` | `"primary"` | Visual style variant. Primary uses a filled indicator, secondary uses an underline indicator | | `orientation` | `"horizontal" \| "vertical"` | `"horizontal"` | Tab layout orientation | | `selectedKey` | `string` | - | Controlled selected tab key | | `defaultSelectedKey` | `string` | - | Default selected tab key | | `onSelectionChange` | `(key: Key) => void` | - | Selection change handler | | `className` | `string` | - | Additional CSS classes | | `render` | `DOMRenderFunction` | - | Overrides the default DOM element with a custom render function.| ### Tabs.List Props | Prop | Type | Default | Description | |------|------|---------|-------------| | `aria-label` | `string` | - | Accessibility label for tab list | | `className` | `string` | - | Additional CSS classes | | `render` | `DOMRenderFunction` | - | Overrides the default DOM element with a custom render function.| ### Tabs.Tab Props | Prop | Type | Default | Description | |------|------|---------|-------------| | `id` | `string` | - | Unique tab identifier | | `isDisabled` | `boolean` | `false` | Whether tab is disabled | | `className` | `string` | - | Additional CSS classes | | `render` | `DOMRenderFunction` | - | Overrides the default DOM element with a custom render function.| ### Tabs.Separator Props | Prop | Type | Default | Description | |------|------|---------|-------------| | `className` | `string` | - | Additional CSS classes | ### Tabs.Panel Props | Prop | Type | Default | Description | |------|------|---------|-------------| | `id` | `string` | - | Panel identifier matching tab id | | `className` | `string` | - | Additional CSS classes | | `render` | `DOMRenderFunction` | - | Overrides the default DOM element with a custom render function.|