Sidebar

Layout Component
1import { Sidebar } from 'maker-ui'

The Sidebar component is a grid column that sits alongside the <Main> content wrapper for sidebar layouts.

Props#

The Sidebar doesn't have any special props, it's just a <div role="complementary" /> wrapper that gives you access to the css prop.

PropDescription
css
Type
object
Styles from the css prop will be applied to the Sidebar.

Maker UI Options#

Your options configuration has a sidebar object with the following properties:

OptionProperty
errorBoundary
Type
boolean
When true, this will wrap the inner contents of the Sidebar in an Error Boundary that you can customize with options.errors.
Defaultfalse
width
Type
string | number | (string | number)[]
In single sidebar layouts, this is the width of the Sidebar. In multiple sidebar layouts, this is the width of the first (left-hand) Sidebar column. Can be a responsive array.
Default300
width_2
Type
string | number | (string | number)[]
In multiple sidebar layouts, this is the width of the second (right-hand) Sidebar column. Can be a responsive array.
Default200

Usage#

The Sidebar can be used in 3 possible layouts. It is always nested under <Content> and alongside <Main>:

1import { Layout, Header, Content, Main, Sidebar } from 'maker-ui'
2
3// Render a Sidebar on the right
4
5export const Layout1 = ({ children }) => (
6 <Layout>
7 <Header />
8 <Content>
9 <Main>{children}</Main>
10 <Sidebar>custom content</Sidebar>
11 </Content>
12 </Layout>
13)
14
15// Render a Sidebar on the left
16
17export const Layout2 = ({ children }) => (
18 <Layout>
19 <Header />
20 <Content>
21 <Sidebar>custom content</Sidebar>
22 <Main>{children}</Main>
23 </Content>
24 </Layout>
25)
26
27// Render Sidebars on both sides of the main content.
28
29export const Layout3 = ({ children }) => (
30 <Layout>
31 <Header />
32 <Content>
33 <Sidebar>custom content</Sidebar>
34 <Main>{children}</Main>
35 <Sidebar>custom content</Sidebar>
36 </Content>
37 </Layout>
38)
Contents