# Side Panels

###### These side panels slide out on mobile viewports and can be toggled using a button in slide in/out mode.

Tip: Control the width of the side panel by setting the `--sidepanel-width` variable in the `_sidepanels.scss` file, or by using the `style="--sidepanel-width: 20rem;"` attribute on the `.slide-on-mobile` element.

These side panels slide out on mobile view port and can be activated by a button as an "slide in/out" mode.
These buttons below can be placed anywhere on your screen. Applying the responsive utility classes, you control the visibility of the buttons, for only when they are needed.
left panel
right panel

These side panels slide out on mobile viewports and can be toggled using a button in "slide in/out" mode. To enable this functionality, apply the `.slide-on-mobile` class along with `.slide-on-mobile-{left,right}` to the panels. When activated, the `.slide-on-mobile-{left,right}-show` class is toggled to reveal the panel.

A backdrop is automatically inserted right after the closing tag of the `.slide-on-mobile` container. Typically, this slide panel is paired with `.layout-trimmed` and `.set-nav-minified` for a clean and streamlined appearance.

Trimmed Layout Minified Nav
You can place any content in these side panels, making it a secondary optional navigation panel.

#### Hi Sunny,

how can I help you today?
Analyze my data

Create a new report

Summarize my Calendar

App Builder
Unlock limitless design potential with 16+ layout combinations and extensive customization options—tailor your dashboard to fit your exact needs.
Header position fixed
Navigation full height
Navigation position fixed
Navigation collapsed
Navigation Minified
Dark Navigation
Colorblind Mode
High Contrast Mode