Layout

The built-in Layout component provides a component-based API for creating a responsive page layout with sidebar navigation. This page uses the Layout component.

import React from 'react'
import { Layout } from 'mdx-go'

export const Root = props =>
  <Layout>
    <Layout.MenuToggle />
    <Layout.Sidebar>
      Sidebar content
    </Layout.Sidebar>
    <Layout.Main>
      {props.children}
    </Layout.Main>
  </Layout>

Props

The root Layout component supports the following props.

Sidebar

Use the Layout.Sidebar component to create a left sidebar that displays as an off-canvas drawer at narrow viewport widths.

Props

Main

Use the Layout.Main component for the main content area.

Props

MenuToggle

Use the Layout.MenuToggle button component to toggle the visibility of the sidebar at narrow viewport widths. This can be positioned anywhere on the page and will be rendered before the Sidebar and Main components.

The MenuToggle component includes a hamburger menu icon as its default children prop.

<Layout>
  <Layout.MenuToggle />
  <Layout.Sidebar />
  <Layout.Main />
</Layout>

Props

NavBar

An optional Layout.NavBar component can be used to add a fixed position header to the top of the page.

<Layout>
  <Layout.Navbar
    color='white'
    bg='black'>
    <Layout.MenuToggle />
  </Layout.Navbar>
</Layout>

Props