Download the PHP package laravelcm/livewire-slide-overs without Composer

Livewire Slide Over Panel

Livewire Slide Over Panel is a Livewire component that provides drawers (slide overs) that support multiple children while maintaining state.

This package is inspired by wire-elements/modal. If you've already used it, then the behavior is the same, except that instead of a modal, it will open a drawer (slide over).

Requirements

• PHP 8.3 or higher
• Laravel 11.x or 12.x
• Livewire 3.4 or 4.x

Installation

To get started, require the package via Composer:

Usage

Add the Livewire directive @livewire('slide-over-panel') to your template layout:

Creating a Slide Over

You can run php artisan make:livewire ShoppingCart to make the initial Livewire component. Open your component class and make sure it extends the SlideOverComponent class:

Opening a Slide Over

To open a slide over you will need to dispatch an event. To open the ShoppingCart slide over for example:

Instant Open (Optimistic UI)

Dispatching openPanel waits for a full Livewire round-trip before the drawer animates. The window.$slideOver helper opens the drawer chrome immediately while the Livewire content hydrates inside it during the slide transition:

How the cache works. No registration or config is required. The first time a given component is opened in a session, the helper falls back to a standard Livewire round-trip (the drawer can't animate without knowing its width and position). Once the server response returns, the resolved panel attributes are stored in sessionStorage, and every subsequent open of the same component during that session is instant.

If you want the very first open to be instant too, pass the relevant attributes explicitly as the third argument — they bypass the cache and let the helper animate immediately.

Passing Data

You can pass data to the slide over component by adding an arguments object to the dispatch event:

The arguments will be passed to the mount() method of your slide over component:

Model binding is automatic - just type-hint the model and pass the ID as the argument.

Resizing a Slide Over Dynamically

A slide over's width is normally set once via panelMaxWidth() on the component class. To change the width while the panel is open (for example, expanding when the user reveals additional content), call resizePanel() from your component:

The argument is a Tailwind max-width utility class (max-w-sm through max-w-7xl) or any arbitrary class string — including JIT values such as max-w-[800px]. The change is applied client-side via a smooth CSS transition; no full re-render of the panel is required.

To target a specific panel in a stacked configuration, pass its id as the second argument:

When omitted, the currently active panel is resized.

Closing the Slide Over

From within your slide over component, you can call $this->closePanel():

Force Close

If you have multiple slide overs open and want to close them all at once, use forceClose():

Skip Previous Panels

You can skip one or more previous panels in the stack:

Close with Events

Close the panel and emit events to other components:

Component Properties

You can customize the slide over behavior by overriding static methods in your component:

Configuration

You can publish the configuration file:

Available configuration options:

TailwindCSS

The slide over uses TailwindCSS classes. If you use TailwindCSS in your project, you need to configure it to scan the package views.

Tailwind CSS v4

Add the package views using the @source directive in your CSS file:

Tailwind CSS v3

Add the package views to your tailwind.config.js content array:

Without TailwindCSS

If you don't use TailwindCSS, set include_css to true in your configuration file to include the precompiled styles.

Testing

Credits

• Arthur Monney
• Philo Hermans
• All Contributors

License

Livewire Slide Over is open-sourced software licensed under the MIT license.