Sidebar
Layout Component1import { 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.
Prop | Description |
---|---|
css | Type object css prop will be applied to the Sidebar. |
Maker UI Options#
Your options configuration has a sidebar
object with the following properties:
Option | Property |
---|---|
errorBoundary | Type boolean options.errors . Defaultfalse |
width | Type string | number | (string | number)[] Default300 |
width_2 | Type string | number | (string | number)[] 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'23// Render a Sidebar on the right45export const Layout1 = ({ children }) => (6 <Layout>7 <Header />8 <Content>9 <Main>{children}</Main>10 <Sidebar>custom content</Sidebar>11 </Content>12 </Layout>13)1415// Render a Sidebar on the left1617export const Layout2 = ({ children }) => (18 <Layout>19 <Header />20 <Content>21 <Sidebar>custom content</Sidebar>22 <Main>{children}</Main>23 </Content>24 </Layout>25)2627// Render Sidebars on both sides of the main content.2829export 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