A sidebar toggle is a button that when pressed will make either a left or a right region of a scroll container appear or disappear. This makes it possible to create a sidebar that is hidden by default and can be shown by clicking the button.
You can only have one sidebar toggle in a scroll container, and the behavior of the sidebar toggle is configured in the scroll container region properties.
For example, the image below shows for an example layout that uses the sidebar toggle to hide and make visible the Left region of the Scroll Container.
An example of sidebar toggle properties is represented in the image below:
Sidebar toggle properties consist of the following sections:
2.1 Common Section
For more information on properties in this section, see the Common Section section in Properties Common in the Page Editor.
2.2 Design Properties Section
The Design Properties allow you to change spacing and alignment of the widget and hide it on phone, tablet, or desktop, if needed. Design properties may vary depending on the type of the widget. For example, for the text widget you can change its font weight, color, alignment, and letter case.
2.3 General Section
The Caption property defines a text that will be shown on the sidebar toggle.
The Tooltip property determines a text end-users will see in the tooltip that appears when they hover over the sidebar toggle. The tooltip text is translatable. For more information on translatable texts, see Language Menu. If the tooltip is not specified, no tooltip will be shown when hovering over the sidebar toggle.
The Icon property determines the icon that will be shown in front of the caption of the sidebar toggle. Possible options are:
- no icon
- a glyphicon
- a (bitmap) image
Glyphicons come from the Bootstrap Halflings collection. The advantages of a glyphicon over a bitmap image are that they are scalable, look sharp on high-resolution screens, and their color can be changed by changing the font color. The advantage of an image icon is that it can have multiple colors.
2.3.5 Render Mode
Defines the way the sidebar toggle will be shown to the end-user. Possible options are the following:
- Button – the widget will be rendered as a button
- Link – the widget will be rendered as a hyperlink
Default render mode: Button
2.3.6 Button Style
The Button style property applies a predefined styling to the sidebar toggle. Possible options are the following:
2.4 Visibility Section
Visibility determines whether a widget is displayed to the end-user as part of the page.
For more information on properties of this section, see the Visibility Section section in Properties Common in the Page Editor.