Add a sidebar

Problem

You would like to add a persistent page sidebar to one or more pages of your application.

Solution

1. In the Pages panel in the top-left, select the Page you’d like to update
2. Scroll down to the Sidebars panel
3. For each sidebar, choose from an existing Component or create a new one
4. Repeat for each page you’d like your sidebar to be visible

Discussion

• Sidebars will always appear to the left or right of your page content.
• The width of your component will become the width of the sidebar on your page. Your sidebar component will stretch to fill the height of the user’s viewport.
• Sidebars can either be programmatically opened and closed:

// open left sidebar
$currentPage.leftSidebarOpen = true
 
// close left sidebar
$currentPage.leftSidebarOpen = false
 
// toggle left sidebar
$currentPage.leftSidebarOpen = !$currentPage.leftSidebarOpen
 
// open right sidebar
$currentPage.rightSidebarOpen = true
 
// close right sidebar
$currentPage.rightSidebarOpen = false
 
// toggle right sidebar
$currentPage.rightSidebarOpen = !$currentPage.rightSidebarOpen

• You can configure whether each sidebar should Overlay over the the page or be rendered in-line.
  • Standard sidebars are most often used for navigation or filtering.
  • Overlay sidebars are most often used for detail views.
• Your sidebar is yours to design. Some suggested components include:
  • Text in text mode for your app’s title and description
  • Navigation Bar for your app’s primary navigation
  • Media for your logo

See also

• Create a custom reusable component
• Add a header
• Add a footer