---
title: 'Layout'
type: 'layout'
status: 'stable'
slug: /components/layout/
github: 'https://github.com/contentful/forma-36/tree/main/packages/components/layout'
storybook: 'https://f36-storybook.contentful.com/?path=/story/components-layout--default'
typescript: ./src/Layout.tsx, .src/LayoutBody.tsx, .src/LayoutHeader.tsx, .src/Layout.Sidebar.tsx
---

The Layout component is the basis of every single page view.

The `Layout` component defines the page view by providing four distinct areas: header, body, left sidebar, and right sidebar. Use it at the top level of your page to create a clear and flexible structure. For best results, avoid placing the `Layout` inside modals or nesting multiple `Layout` components within each other.

## Import

```jsx static=true
import { Layout } from '@contentful/f36-components';
// or
import { Layout } from '@contentful/f36-layout';
```

## Layout Compound Components

The `Layout` exports the following compound components

<Table>
  <Table.Head>
    <Table.Row>
      <Table.Cell>
        <Subheading>Compound Component</Subheading>
      </Table.Cell>
      <Table.Cell>
        <Subheading>Description</Subheading>
      </Table.Cell>
      <Table.Cell>
        <Subheading>Typical Usage Area</Subheading>
      </Table.Cell>
    </Table.Row>
  </Table.Head>
  <Table.Body>
    <Table.Row>
      <Table.Cell>`Layout.Header`</Table.Cell>
      <Table.Cell>
        Should contain a `Header` component. When passing at least one sidebar,
        a divider is added underneath the header. Content inside will be
        centered. It follows through in the `max-width` adjustment from `1550px`
        to `1920px` on the `wide` variant.
      </Table.Cell>
      <Table.Cell>`header`</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>`Layout.Sidebar`</Table.Cell>
      <Table.Cell>
        Allows for variants `narrow` (sets `width: 280px`) and `wide` (default,
        sets `width: 340px`). Both sidebars can have different widths.
      </Table.Cell>
      <Table.Cell>`leftSidebar`, `rightSidebar`</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>`Layout.Body`</Table.Cell>
      <Table.Cell>
        Wrapper around all children, this compound component is essential for
        proper overflow and scrolling behaviors.
      </Table.Cell>
      <Table.Cell>wrapper around all children of `Layout`</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>

## Examples

### Basic Layout with body only

```jsx file=./examples/LayoutExampleWithNoSubComponents.tsx

```

### Layout with header

```jsx file=./examples/LayoutExampleWithHeader.tsx

```

### Layout with left sidebar

```jsx file=./examples/LayoutExampleWithLeftSidebar.tsx

```

### Layout with right sidebar

```jsx file=./examples/LayoutExampleWithRightSidebar.tsx

```

### Layout with header and sidebars

```jsx file=./examples/LayoutExampleWithAllSubComponents.tsx

```

### Full Screen Layout with header and sidebars

```jsx file=./examples/LayoutExampleWithAllSubComponentFullScreen.tsx

```

## Layout areas

The `Layout` component offers 4 individual areas, which can be set via the props `header`, `leftSidebar`, `rightSidebar`, and as `children` (for the main content area).

<Table>
  <Table.Head>
    <Table.Row>
      <Table.Cell>
        <Subheading>Prop</Subheading>
      </Table.Cell>
      <Table.Cell>
        <Subheading>Description</Subheading>
      </Table.Cell>
      <Table.Cell>
        <Subheading>Recommended Child components</Subheading>
      </Table.Cell>
    </Table.Row>
  </Table.Head>
  <Table.Body>
    <Table.Row>
      <Table.Cell>`children`</Table.Cell>
      <Table.Cell>
        Elements handed over as children to the Layout component render as the
        Layout's body. Ideally, all children should be wrapped inside
        `Layout.Body`
      </Table.Cell>
      <Table.Cell>`Layout.Body`</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>`header`</Table.Cell>
      <Table.Cell>
        Elements in the header overarch the whole width of the layout component.
        Child components should be wrapped inside `Layout.Header`. It is also
        recommended to use `Header` as the only child of `Layout.Header`
      </Table.Cell>
      <Table.Cell>`Layout.Header` with `Header` as a child</Table.Cell>
    </Table.Row>
    <Table.Row>
      <Table.Cell>`leftSidebar` | `rightSidebar`</Table.Cell>
      <Table.Cell>
        These child-components render on the left and right side of the body
        content. They should be wrapped in `Layout.Sidebar`
      </Table.Cell>
      <Table.Cell>`Layout.Sidebar`</Table.Cell>
    </Table.Row>
  </Table.Body>
</Table>

** Note ** When passing at least one sidebar, a divider is added underneath the header. There is no divider otherwise.

## Accessibility

- The Layout component renders a `<section>` by default. If you use multiple layouts or want to improve landmark navigation, provide a unique aria-label
- `Layout.Sidebar` renders as a semantic `<aside>` by default
- `Layout.Header` renders as a semantic `<header>` by default
- Keyboard navigation and focus management for interactive content inside the layout should be implemented by the consumer.

## Props (API reference)

### Layout

<PropsTable of="Layout" />

### Layout.Body

<PropsTable of="LayoutBody" />

### Layout.Header

<PropsTable of="LayoutHeader" />

### Layout.Sidebar

<PropsTable of="LayoutSidebar" />