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.

Features

A layout component for setting an Arc-standard sidebar within a Page.

Version:v2.0.0

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/ads-layout'

#Usage

Caution

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

interface SidebarProps

Props	Description
`bg` (optional)	`undefined \| string = gray.100` Sidebar background color. See Background colors for available background color tokens.
`p` (optional)	`keyof DimensionValue = $large` Padding size.

const navConfig = {
  appname: 'Arc UI',
  homeLink: { href: '/' },
  links: [
    {
      name: 'Components',
      href: '/',
      text: {
        en: 'Components',
      },
    },
  ],
}

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