The Sidebar frame
A container that renders on the left-side of the viewport.
The Sidebar frame is a container that appears as next to the Main frame. Sidebar can automatically configure an optimized mobile layout when viewing web apps on devices with smaller screens. Only one instance of Sidebar can be used.
Properties
All properties for this object with supported data types or values. You can write JavaScript almost anywhere in Retool to manipulate or read property values.
enableFullBleed
Whether to expand the contents to fill available space.
| Type | boolean |
| Format | True/False |
| Configurability | Inspector > Appearance > Expand contents to fit |
| Default | |
Examples
true
footerPadding
The amount of padding used within the footer.
| Type | string | |||||||||
| Format | Plain Text | |||||||||
| Configurability | Inspector > Content > Add-ons > Footer > Padding | |||||||||
| Allowed Values |
| |||||||||
| Default | |
Examples
"8px 12px"
headerPadding
The amount of padding used within the header.
| Type | string | |||||||||
| Format | Plain Text | |||||||||
| Configurability | Inspector > Content > Add-ons > Header > Padding | |||||||||
| Allowed Values |
| |||||||||
| Default | |
Examples
"8px 12px"
hidden
Whether this object is hidden from view.
| Type | boolean |
| Format | True/False |
| Configurability | Inspector > Appearance > Hidden |
| Default | |
Examples
true
loading
Whether to display a loading indicator.
| Type | boolean |
| Format | True/False |
| Configurability | Inspector > Interaction > Loading |
| Default | |
Examples
true
padding
The amount of padding to render inside.
| Type | string | ||||||
| Format | Plain Text | ||||||
| Configurability | Inspector > Spacing > Padding | ||||||
| Allowed Values |
| ||||||
| Default | |
Examples
4px 8px
showBorder
Whether to show a border.
| Type | boolean |
| Format | True/False |
| Configurability | Inspector > Appearance > Show border |
| Default | |
Examples
true
showFooterBorder
Whether to show a border above the footer.
| Type | boolean |
| Format | True/False |
| Configurability | Inspector > Content > Add-ons > Footer > Appearance > Show separator |
Examples
true
showHeader
Whether to show the header area.
| Type | boolean |
| Format | True/False |
| Configurability | Inspector > Content > Add-ons > Header > Appearance > Show header |
| Default | |
Examples
true
showHeaderBorder
Whether to show a border under the header.
| Type | boolean |
| Format | True/False |
| Configurability | Inspector > Content > Add-ons > Header > Appearance > Show separator |
| Default | |
Examples
true
tooltipText
The tooltip text to display next to the label on hover.
| Type | string |
| Format | Markdown |
| Configurability | Inspector > Content > Add-ons > Helper text |
| Default | |
Examples
Submit
Examples
1280
Methods
JavaScript API methods for this object. You can write JavaScript almost anywhere in Retool and use methods to manipulate data and property values.
sidebar.setHidden()
Set the hidden value to toggle whether the component is visible. Defaults to true without a parameter.
sidebar.setHidden(hidden)
Parameters
Examples
true
Examples
Hide sidebar.
sidebar.setHidden(true);
Unhide sidebar.
sidebar.setHidden(false);
sidebar.showFooter(showFooter)
Examples
Show the footer of sidebar.
sidebar.setShowFooter(true);
Hide the footer of sidebar.
sidebar.setShowFooter(false);
sidebar.showHeader(showHeader)
Parameters
Examples
true
Examples
Show the header of sidebar.
sidebar.setShowHeader(true);
Hide the header of sidebar.
sidebar.setShowHeader(false);