AdminLTE/docs/javascript/push-menu.md

layout	title
page	Push Menu Plugin

The PushMenu plugin controls the toggle button of the main sidebar.

Usage

This plugin can be activated as a jQuery plugin or using the data api.

Data API

{: .text-bold } Add data-widget="pushmenu" to a button to activate the plugin.

<button class="btn btn-primary" data-widget="pushmenu">Toggle Sidebar</button>

jQuery

{: .text-bold }

$('.sidebar-toggle-btn').PushMenu(options)

Options

{: .mt-4}

|---

Name	Type	Default	Description
autoCollapseSize	Boolean/Number	FALSE	Screen width in pixels to trigger auto collapse sidebar
screenCollapseSize	Number	768	Screen width in pixels for small screens.
{: .table .table-bordered .bg-light}

Tip!

You can use any option via the data-attributes like this to enable auto collapse sidebar on 768 pixels width.

<button class="btn btn-primary" data-widget="pushmenu" data-auto-collapse-size="768">Toggle Sidebar</button>

{: .quote-info}

Events

{: .mt-4}

|---

Event Type	Description
collapsed.lte.pushmenu	Fired when the sidebar collapsed.
shown.lte.pushmenu	Fired when the sidebar shown.
{: .table .table-bordered .bg-light}

Example: $(document).on('shown.lte.pushmenu', handleExpandedEvent)

Methods

{: .mt-4}

|---

Method	Description
toggle	Toggles the state of the menu between expanded and collapsed.
{: .table .table-bordered .bg-light}

Example: $('[data-widget="pushmenu"]').PushMenu('toggle')