Sidebar

A Sidebar is an always-present 300px wide vertical content area to the left of a Page. A Sidebar should be used within a Page to have correct positioning and structure.

The Sidebar component will eventually handle collapsing and expanding variants, but does not currently.

See the Page layout foundations for more information on different layout options and styles.

Import

import { Sidebar } from '@wpmedia/arc-ui-layout'

Usage

caution

Sidebar is intended to be used in combination with a Page.

interface SidebarProps
PropsDescription
bg
(optional)
undefined | string = gray.100

Sidebar background color.

<Frame navConfig={...}>
  <Page
    sidebar={
      <Sidebar bg="gray.900">Sidebar</Sidebar>
    }
  >
    Body w/ Sidebar
  </Page>
</Frame>