A sidebar displays a column of column which overlays the primary content area. It is used to provide additional detail about selected elements.
Example
⌘ Cmd + ⌥ Option + 1
Properties
| property | propType | required | default | description |
|---|---|---|---|---|
| anchor | oneOf 'left' | 'right' | - | 'right' | Determines whether the sidebar should render on the left or right side of the page |
| border | bool | - | false | Determines if the sidebar should have a border |
| docked | bool | - | false | Docked sidebars push page-content to left or right when open. Un-docked sidebars render open over page-content (i.e postition absolute) |
| isOpen | bool | - | false | Determines if the sidebar is visible |
| width | number | - | 0 | The pixel width of the sidebar |
| boxShadow | bool | - | - | Determines if the sidebar should have a box shadow |
| children | node | yes | - | Sidebar children |
| testSection | string | - | - | Hook for automated JavaScript tests |
Usage
Instead of using a modal dialog, the Sidebar component provides a way to view and interact with content without blocking the content below.
Best Practices
Do
Sidebar works best with short tabluar content and key/value pairs
Don't
Avoid Sidebar when requiring lots of user input, consider Sheet instead