Layout

Ant Design Layout component with configurable Sider, Header, Footer, and Content.

Live Example

Loading component...

Try It

Edit the code below to experiment with the component:

Live Editor

function Demo() {
  return (
    <Layout style={{ minHeight: '300px' }}>
      <Layout.Sider theme="dark" width={200}>
        <div style={{ color: '#fff', padding: '16px' }}>Sidebar</div>
      </Layout.Sider>
      <Layout>
        <Layout.Header style={{ background: '#fff', padding: '0 16px' }}>
          Header
        </Layout.Header>
        <Layout.Content style={{ margin: '16px', padding: '24px', background: '#fff' }}>
          Content
        </Layout.Content>
        <Layout.Footer style={{ textAlign: 'center' }}>
          Footer
        </Layout.Footer>
      </Layout>
    </Layout>
  );
}

Result

Loading...

Content Only

Live Editor

function ContentOnly() {
  return (
    <Layout>
      <Layout.Header style={{ background: '#001529', color: '#fff', padding: '0 24px', lineHeight: '64px' }}>
        Application Header
      </Layout.Header>
      <Layout.Content style={{ padding: '24px', minHeight: '200px', background: '#fff' }}>
        Main content area without a sidebar
      </Layout.Content>
      <Layout.Footer style={{ textAlign: 'center', background: '#f5f5f5' }}>
        Footer Content
      </Layout.Footer>
    </Layout>
  );
}

Result

Loading...

Right Sidebar

Live Editor

function RightSidebar() {
  return (
    <Layout style={{ minHeight: '300px' }}>
      <Layout>
        <Layout.Header style={{ background: '#fff', padding: '0 24px' }}>
          Header
        </Layout.Header>
        <Layout.Content style={{ padding: '24px', background: '#fff' }}>
          Content with right sidebar
        </Layout.Content>
      </Layout>
      <Layout.Sider theme="light" width={200} style={{ background: '#fafafa' }}>
        <div style={{ padding: '16px' }}>Right Sidebar</div>
      </Layout.Sider>
    </Layout>
  );
}

Result

Loading...

Props

Prop	Type	Default	Description
hasSider	boolean	false	Whether the layout contains a Sider sub-component.
style	any	{"minHeight":200}	-

Import

import { Layout } from '@superset/components';

---

Improve this page

This documentation is auto-generated from the component's Storybook story. Help improve it by editing the story file.