Layout

Alpha component

Layout component is subject to major changes and is for experimentation purposes only. Not recommended for use in production software.

A primitive for implementing common layout patterns seen within Contentful apps.

Import

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

Examples

Layout with header and sidebars

Full Screen Layout with header and sidebars

Basic Layout with body only

Layout with header

Layout with left sidebar

Layout with right sidebar

Props (API reference)

Open in Storybook

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

css
string
number
false
true
ComponentSelector
Keyframes
SerializedStyles
ArrayInterpolation<undefined>
ObjectInterpolation<undefined>
(theme: any) => Interpolation<undefined>

header
string
number
false
true
{}
ReactElement<any, string | JSXElementConstructor<any>>
ReactNodeArray
ReactPortal

leftSidebar
string
number
false
true
{}
ReactElement<any, string | JSXElementConstructor<any>>
ReactNodeArray
ReactPortal

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
false
true
{}
ReactElement<any, string | JSXElementConstructor<any>>
ReactNodeArray
ReactPortal

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