Forma 36

Layout

Give feedback

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

import { Layout } from '@contentful/f36-components';
// or
import { Layout } from '@contentful/f36-layout';

Layout Compound Components

The Layout exports the following compound components

Compound Component

Description

Typical Usage Area

Layout.Header

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.

header
Layout.Sidebar

Allows for variants narrow (sets width: 280px) and wide (default, sets width: 340px). Both sidebars can have different widths.

leftSidebar, rightSidebar
Layout.Body

Wrapper around all children, this compound component is essential for proper overflow and scrolling behaviors.

wrapper around all children of Layout

Examples

Basic Layout with body only

function BasicLayoutExample() {

  const [submitting, setSubmitting] = useState(false);

  const submitForm = () => {

    setSubmitting(true);

    setTimeout(() => setSubmitting(false), 1000);

  };



  return (

    <Layout>

      <Layout.Body>

        <Box padding="none" marginBottom="spacingXl">

          <Form onSubmit={submitForm}>

            <FormControl>

              <FormControl.Label isRequired>Name</FormControl.Label>

              <TextInput />

              <FormControl.HelpText>

                Please enter your first name

              </FormControl.HelpText>

            </FormControl>



            <FormControl>

              <FormControl.Label>Description</FormControl.Label>

              <Textarea />

              <FormControl.HelpText>

                Tell me about yourself

              </FormControl.HelpText>

            </FormControl>



            <Button variant="primary" type="submit" isDisabled={submitting}>

              {submitting ? 'Submitted' : 'Click me to submit'}

            </Button>

          </Form>

        </Box>

      </Layout.Body>

    </Layout>

  );

}
Open in Playground

Layout with header

function BasicLayoutExample() {

  const [submitting, setSubmitting] = useState(false);

  const submitForm = () => {

    setSubmitting(true);

    setTimeout(() => setSubmitting(false), 1000);

  };



  return (

    <Layout

      header={

        <Layout.Header>

          <Header title="Your Details" />

        </Layout.Header>

      }

    >

      <Layout.Body>

        <Box padding="none" marginBottom="spacingXl">

          <Form onSubmit={submitForm}>

            <FormControl>

              <FormControl.Label isRequired>Name</FormControl.Label>

              <TextInput />

              <FormControl.HelpText>

                Please enter your first name

              </FormControl.HelpText>

            </FormControl>



            <FormControl>

              <FormControl.Label>Description</FormControl.Label>

              <Textarea />

              <FormControl.HelpText>

                Tell me about yourself

              </FormControl.HelpText>

            </FormControl>



            <Button variant="primary" type="submit" isDisabled={submitting}>

              {submitting ? 'Submitted' : 'Click me to submit'}

            </Button>

          </Form>

        </Box>

      </Layout.Body>

    </Layout>

  );

}
Open in Playground

Layout with left sidebar

function BasicLayoutExample() {

  const [submitting, setSubmitting] = useState(false);

  const submitForm = () => {

    setSubmitting(true);

    setTimeout(() => setSubmitting(false), 1000);

  };



  return (

    <Layout

      leftSidebar={

        <Layout.Sidebar>

          <Box padding="none" marginBottom="spacingXl">

            <Paragraph>Sidebar Content</Paragraph>

          </Box>

        </Layout.Sidebar>

      }

    >

      <Layout.Body>

        <Box padding="none" marginBottom="spacingXl">

          <Form onSubmit={submitForm}>

            <FormControl>

              <FormControl.Label isRequired>Name</FormControl.Label>

              <TextInput />

              <FormControl.HelpText>

                Please enter your first name

              </FormControl.HelpText>

            </FormControl>



            <FormControl>

              <FormControl.Label>Description</FormControl.Label>

              <Textarea />

              <FormControl.HelpText>

                Tell me about yourself

              </FormControl.HelpText>

            </FormControl>



            <Button variant="primary" type="submit" isDisabled={submitting}>

              {submitting ? 'Submitted' : 'Click me to submit'}

            </Button>

          </Form>

        </Box>

      </Layout.Body>

    </Layout>

  );

}
Open in Playground

Layout with right sidebar

function BasicLayoutExample() {

  const [submitting, setSubmitting] = useState(false);

  const submitForm = () => {

    setSubmitting(true);

    setTimeout(() => setSubmitting(false), 1000);

  };



  return (

    <Layout

      rightSidebar={

        <Layout.Sidebar>

          <Box padding="none" marginBottom="spacingXl">

            <Paragraph>Sidebar Content</Paragraph>

          </Box>

        </Layout.Sidebar>

      }

    >

      <Layout.Body>

        <Box padding="none" marginBottom="spacingXl">

          <Form onSubmit={submitForm}>

            <FormControl>

              <FormControl.Label isRequired>Name</FormControl.Label>

              <TextInput />

              <FormControl.HelpText>

                Please enter your first name

              </FormControl.HelpText>

            </FormControl>



            <FormControl>

              <FormControl.Label>Description</FormControl.Label>

              <Textarea />

              <FormControl.HelpText>

                Tell me about yourself

              </FormControl.HelpText>

            </FormControl>



            <Button variant="primary" type="submit" isDisabled={submitting}>

              {submitting ? 'Submitted' : 'Click me to submit'}

            </Button>

          </Form>

        </Box>

      </Layout.Body>

    </Layout>

  );

}
Open in Playground

Layout with header and sidebars

function BasicLayoutExample() {

  const [submitting, setSubmitting] = useState(false);

  const submitForm = () => {

    setSubmitting(true);

    setTimeout(() => setSubmitting(false), 1000);

  };



  return (

    <Layout

      header={

        <Layout.Header>

          <Header title="Your Details" />

        </Layout.Header>

      }

      leftSidebar={

        <Layout.Sidebar>

          <Box padding="none" marginBottom="spacingXl">

            <Paragraph>Sidebar Content</Paragraph>

          </Box>

        </Layout.Sidebar>

      }

      rightSidebar={

        <Layout.Sidebar>

          <Box padding="none" marginBottom="spacingXl">

            <Paragraph>Sidebar Content</Paragraph>

          </Box>

        </Layout.Sidebar>

      }

    >

      <Layout.Body>

        <Box padding="none" marginBottom="spacingXl">

          <Form onSubmit={submitForm}>

            <FormControl>

              <FormControl.Label isRequired>Name</FormControl.Label>

              <TextInput />

              <FormControl.HelpText>

                Please enter your first name

              </FormControl.HelpText>

            </FormControl>



            <FormControl>

              <FormControl.Label>Description</FormControl.Label>

              <Textarea />

              <FormControl.HelpText>

                Tell me about yourself

              </FormControl.HelpText>

            </FormControl>



            <Button variant="primary" type="submit" isDisabled={submitting}>

              {submitting ? 'Submitted' : 'Click me to submit'}

            </Button>

          </Form>

        </Box>

      </Layout.Body>

    </Layout>

  );

}
Open in Playground

Full Screen Layout with header and sidebars

function BasicLayoutExample() {

  const [submitting, setSubmitting] = useState(false);

  const submitForm = () => {

    setSubmitting(true);

    setTimeout(() => setSubmitting(false), 1000);

  };



  return (

    <Layout

      variant="fullscreen"

      header={

        <Layout.Header>

          <Header title="Your Details" />

        </Layout.Header>

      }

      leftSidebar={

        <Layout.Sidebar>

          <Box padding="none" marginBottom="spacingXl">

            <Paragraph>Sidebar Content</Paragraph>

          </Box>

        </Layout.Sidebar>

      }

      rightSidebar={

        <Layout.Sidebar>

          <Box padding="none" marginBottom="spacingXl">

            <Paragraph>Sidebar Content</Paragraph>

          </Box>

        </Layout.Sidebar>

      }

    >

      <Layout.Body>

        <Box padding="none" marginBottom="spacingXl">

          <Form onSubmit={submitForm}>

            <FormControl>

              <FormControl.Label isRequired>Name</FormControl.Label>

              <TextInput />

              <FormControl.HelpText>

                Please enter your first name

              </FormControl.HelpText>

            </FormControl>



            <FormControl>

              <FormControl.Label>Description</FormControl.Label>

              <Textarea />

              <FormControl.HelpText>

                Tell me about yourself

              </FormControl.HelpText>

            </FormControl>



            <Button variant="primary" type="submit" isDisabled={submitting}>

              {submitting ? 'Submitted' : 'Click me to submit'}

            </Button>

          </Form>

        </Box>

      </Layout.Body>

    </Layout>

  );

}
Open in Playground

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).

| Prop | Description | Recommended Child components | | ----------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | | children | Elements handed over as children to the Layout component render as the Layout's body. Ideally, all children should be wrapped inside Layout.Body | Layout.Body | | header | 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 | Layout.Header with Header as a child | | leftSidebar | rightSidebar | These child-components render on the left and right side of the body content. They should be wrapped in Layout.Sidebar | Layout.Sidebar |

** 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)

Open in Storybook

Layout

Name

Type

Default

children
ReactNode

The body of the layout.

className
string

CSS class to be appended to the root element

contentClassName
string

Classname that will be passed to the main content div, which holds the sidebars and children div

contentTestId
string

header
string
number
bigint
false
true
ReactElement<unknown, string | JSXElementConstructor<any>>
Iterable<ReactNode>
ReactPortal
Promise<AwaitedReactNode>

leftSidebar
string
number
bigint
false
true
ReactElement<unknown, string | JSXElementConstructor<any>>
Iterable<ReactNode>
ReactPortal
Promise<AwaitedReactNode>

leftSidebarVariant
"narrow"
"wide"

Defines the width of the layout left sidebar.

'narrow' (280px)
offsetTop
number

Offset for layout heights calculation. Set to `0` for layout usage without navbar.

60 (= navbar height)
rightSidebar
string
number
bigint
false
true
ReactElement<unknown, string | JSXElementConstructor<any>>
Iterable<ReactNode>
ReactPortal
Promise<AwaitedReactNode>

rightSidebarVariant
"narrow"
"wide"

Defines the width of the layout right sidebar.

'wide' (340px)
testId
string

A [data-test-id] attribute used for testing purposes

variant
"narrow"
"wide"
"fullscreen"

Defines the width of the layout and its content.

'wide'
withBoxShadow
false
true

Layout.Body

Layout.Header

Layout.Sidebar

Help improve this page

Edit on GithubRead the contribution guide