10 Best Snackbar Plugins In jQuery And Pure JavaScript (2024 Update)

What Is Snackbar

Snackbar is a contextual notification UI component introduced in the Google Material Design that provides brief messages about app processes at the bottom of the screen.

Snackbars inform users of a process that an app has performed or will perform. They appear temporarily, towards the bottom of the screen. They shouldn’t interrupt the user experience, and they don’t require user input to disappear.

In general, a snackbar will automatically dismiss after a timeout just like a temporary notification popup. 

It also contains an action button which allows the user to interact with your web app.

The Best Snackbar Plugin

This is a list of 10 best jQuery and pure (Vanilla) JavaScript plugins that makes it simple to display customizable Material Design inspired snackbars on the web applications.

If you're developing an Android or Material Design styled web app, you might find useful. 

Originally Published July 30, 2019, updated Feb 21 2024

Table of contents:

• jQuery Snackbar Plugins
• Vanilla JavaScript Snackbar Plugins

jQuery Snackbar Plugins:

Bootstrap 5 Toast & Snackbar Manager - jQuery Toast.js

The upgraded version of the Script47's jQuery Toast plugin that helps you generate Android style snackbars and toasts in the fresh new Bootstrap 5 framework.

[Demo] [Download]

---

Customizable Material Design Snackbars In jQuery - mSnackbar.js

A lightweight and customizable jQuery notification plugin for creating Material Design inspired snackbars on the page.

[Demo] [Download]

---

Snackbar Notification Component For jQuery - js-snackbar

js-snackbar is a really small JavaScript (jQuery) plugin which provides an easy way to create Android & Material Design snackbar notifications with custom action support.

[Demo] [Download]

---

Material Design Inspired jQuery Snackbar and Toast Plugin - snackbarjs

snackbarjs is a lightweight jQuery plugin to create Google Material Design style snackbars and toasts that automatically disappear after a timeout.

[Demo] [Download]

---

Material Design Snackbar Style Alert Notification With jQuery

A tiny jQuery plugin used to display Material Design Snackbar style alert notifications on your website.

[Demo] [Download]

---

Vanilla JS Snackbar Plugins:

Smooth Snackbar & Toast Notification In JavaScript – js-snackbar

A pure JavaScript plugin that helps you create Material Design inspired non-blocking snackbars & toast notifications on the web app.

[Demo] [Download]

---

Google Style Toast & Snackbar Popup In JavaScript – Material Toast

Yet another Google Material inspired toast & snackbar plugin written in Vanilla JavaScript.

[Demo] [Download]

---

Simple Interactive Snackbar & Toast Notification In Vanilla JavaScript – notifyjs

A vanilla JS notification plugin that shows Material Snackbar and Toasts style notification messages to the user.

[Demo] [Download]

---

Sliding Toaster & Snackbar In JavaScript – toastnotify

A tiny notification plugin to create Google-style toasts and snackbars sliding from the left side of the screen when triggered.

[Demo] [Download]

---

Tiny Snackbar & Toast Message Library – simpleSnackbar.js

A tiny and easy-to-use JavaScript (ES6) plugin to show snackbar & toast style notification popups in the document.

[Demo] [Download]

---

Conclusion:

Seeking more jQuery plugins or JavaScript libraries to create awesome Snackbar Notifications on the web & mobile? See jQuery Snackbar and JavaScript Snackbar sections for more details.

See Also:

• 10 Best Toast Notification jQuery/JavaScript Plugins
• 10 Best Growl Style Notification Plugins In JavaScript
• Best Notification Bar Plugins In JavaScript
• 10 Best Toast Notification JavaScript Libraries
• 7 Best Material Design Inspired Toast Components For Vue.js
• 100+ Android & Google Material Design Freebies