Fake Day, October 15th, 2090
Sun	Mon	Tue	Wed	Thu	Fri	Sat
30	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31	1	2	3

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.