Commonly, Sidebars will contain a SideNav but can also contain other content when necessary.

Default Sidebars

scaled: true
---
    const DefaultExample = () => {
        const [isActive, setActive] = React.useState(0)
        return (
            <Frame style={{height:400, minHeight:0}}>
                <Page
                    sidebar={
                        <Sidebar>
                            <Sidebar.Section padding="y">
                                <SideNav title="Marketing">
                                    <SideNav.Item onClick={() => setActive(0)} active={isActive===0}>Dashboard</SideNav.Item>
                                    <SideNav.Item onClick={() => setActive(1)} active={isActive===1}>Campaigns</SideNav.Item>
                                    <SideNav.Item onClick={() => setActive(2)} active={isActive===2}>Emails</SideNav.Item>
                                    <SideNav.Item onClick={() => setActive(3)} active={isActive===3}>Audiences</SideNav.Item>
                                </SideNav>
                            </Sidebar.Section>
                            <Sidebar.Section>
                                <Card>Test</Card>
                            </Sidebar.Section>
                        </Sidebar>
                    }
                >
                    Page Content
                </Page>
            </Frame>
        )
    }
    render ( DefaultExample )

Non-collapsible Sidebars

By default, Sidebars are responsive and will collapse to a smaller state if it is within a browser window of 900px or smaller. This functionality can be turned off for use-cases that require Sidebar content to always be visible. In this case, the Page itself should be designed to be more responsive to factor in the smaller available space.

scaled: true
---
const NonCollapsibleSidebarsExample = () => {
    const [isActive, setActive] = React.useState(0)
    return (
        <Sidebar collapsible={false}>
            <Sidebar.Section padding="y">
                <SideNav title="Marketing">
                    <SideNav.Item onClick={() => setActive(0)} active={isActive===0}>Dashboard</SideNav.Item>
                    <SideNav.Item onClick={() => setActive(1)} active={isActive===1}>Campaigns</SideNav.Item>
                    <SideNav.Item onClick={() => setActive(2)} active={isActive===2}>Emails</SideNav.Item>
                    <SideNav.Item onClick={() => setActive(3)} active={isActive===3}>Audiences</SideNav.Item>
                </SideNav>
            </Sidebar.Section>
            <Sidebar.Section>
                <Card>Test</Card>
            </Sidebar.Section>
        </Sidebar>
    )
}
render (NonCollapsibleSidebarsExample)

Best practices

  • Sidebars should be within a Page
  • Sidebars are always 240px wide unless collapsed
  • Sidebars should be responsive