Sidebar Toggle

Last modified: August 20, 2024

Introduction

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.

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.

Properties

An example of sidebar toggle properties is represented in the image below:

Sidebar toggle properties consist of the following sections:

Common Section

For more information on properties in this section, see the Common Section section in Properties Common in the Page Editor.

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.

General Section

Caption

The Caption property defines a text that will be shown on the sidebar toggle.

Tooltip

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.

Icon

The Icon property determines the icon that will be shown in front of the caption of the sidebar toggle. Possible options are:

  • No icon
  • Glyphicon
  • (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.

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

Button Style

The Button style property applies a predefined styling to the sidebar toggle. Possible options are the following:

  • Default
  • Inverse
  • Primary
  • Info
  • Success
  • Warning
  • Danger

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.