Reusable sidebar

Overview

Reusable sidebar serves as a navigation bar in your application. The sidebar can be customized according to your requirements, and it saves its state across all the application pages so you don't have to add it to each page separately.

Properties

Name
Type
Description

collapsed

boolean

Indicates if the component is collapsed

Methods

Name
Parameters
Returns
Description

expand

void

Expand the sidebar

collapse

void

Collapse the sidebar

toggle

void

Toggle the sidebar between expanded and collapsed

Triggers

Name
Description

On Init

Triggered when the component is initialized

On Expand

Triggered when the component is expanded

On Collapse

Triggered when the component is collapsed

Working with the component

To activate the sidebar in your application, access the Settings sidebar of the current page (click on the app area or select the page in the Pages tab), and select the Show global app sidebar checkbox.

You can configure sidebar content and appearance using the following parameters:

  • Expand content to fit - select this option if you want your component (for example, Menu) to occupy all available space inside the sidebar (works with single component only). Check out this article to learn more about the feature.

  • Sticky sidebar - select this option to make sure the sidebar stays in the same place while users are scrolling down the page

  • Width - in pixels

  • Background color

  • Disable container styles - select to disable all styles or specific ones if you want the sidebar to look more like part of the page and not a separate container

To configure sidebar navigation, you can simply drag and drop components inside it, for example, the Menu component. From there, you can configure additional in-app or external navigation if needed.

Last updated

Was this helpful?