---
id: Tabs
section: components
---

import { Fragment, useCallback, useRef, useState } from 'react';
import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
import display from '@patternfly/react-styles/css/utilities/Display/display';
import sizing from '@patternfly/react-styles/css/utilities/Sizing/sizing';
import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';

## Demos

### Open tabs

```ts file="examples/Tabs/TabsOpen.tsx" isFullscreen

```

### Open tabs with secondary tabs

```ts file="examples/Tabs/TabsOpenWithSecondaryTabs.tsx" isFullscreen

```

### Nested tabs

```ts isFullscreen file="examples/Tabs/NestedTabs.tsx"

```

### Nested, unindented tabs

```ts isFullscreen file="examples/Tabs/NestedUnindentedTabs.tsx"

```

### Tables and tabs

```ts isFullscreen file="examples/Tabs/TabsAndTable.tsx"

```

### Modal tabs

```ts isFullscreen file="examples/Tabs/ModalTabs.tsx"

```