---
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 RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon';
import RhUiBranchFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-branch-fill-icon';
import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
import RhMicronsSortDownLargeToSmallIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-sort-down-large-to-small-icon';
import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-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"

```