---
id: Page
section: components
cssPrefix: pf-c-page
propComponents:
  [
    'Page',
    'PageHeader',
    'PageHeaderTools',
    'PageHeaderToolsGroup',
    'PageHeaderToolsItem',
    'PageSidebar',
    'PageSection',
    'PageGroup',
    'PageBreadcrumb',
    'PageNavigation',
    'PageToggleButton',
  ]
---

import BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
import './page.css';

## Examples

### Vertical nav

```ts file="./PageVerticalNav.tsx"
```

### Horizontal nav

```ts file="./PageHorizontalNav.tsx"
```

### Tertiary nav

```ts file="./PageTertiaryNav.tsx"
```

### With or without fill

```ts file="./PageWithOrWithoutFill.tsx"
```

### Main section padding

```ts file="./PageMainSectionPadding.tsx"
```

### Uncontrolled nav

```ts file="./PageUncontrolledNav.tsx"
```

### Group section

```ts file="./PageGroupSection.tsx"
```

### Vertical nav using PageHeader component

This example is provided because PageHeader and PageHeaderTools are still in use; however, going forward Masthead and Toolbar should be used to make headers rather than PageHeader and PageHeaderTools.

```ts file="./PageVerticalNavUsingPageHeaderComponent.tsx"
```

### Centered section

```ts file="./PageCenteredSection.tsx"
```