Learn how to use JavaScript notifications to improve user experience with these 35+ examples from popular developers in CodePen.
1. Pretty Notification Badges for menu by Ying Zhang
Author: Ying Zhang
Links: Source Code / Demo
Made with: HTML CSS js
2. Radial Nav Menu by Hyperplexed
Author: Hyperplexed
Links: Source Code / Demo
Made with: HTML CSS js
3. YAUI Kit by Hugo Darby brown
Author: Hugo Darby brown
Links: Source Code / Demo
Made with: HTML CSS js
4. Thanks for notifications by Piotr Galor
Author: Piotr Galor
Links: Source Code / Demo
Made with: HTML CSS js
5. ecommerce product notifications by Rob Stinson
Author: Rob Stinson
Links: Source Code / Demo
Made with: HTML CSS js
6. Bell Ring โ Notifications by Braydon Coyer
Author: Braydon Coyer
Links: Source Code / Demo
Made with: HTML CSS js
7. Flat Notifications โ FlatNotify.js v0.1 by sarazond
Author: sarazond
Links: Source Code / Demo
Made with: HTML CSS js
8. Do not forget by Aleksandrs Cudars
Author: Aleksandrs Cudars
Links: Source Code / Demo
Made with: HTML CSS js
9. Front End Day 68 โ A notification menu! by sean_codes
Author: sean_codes
Links: Source Code / Demo
Made with: HTML CSS js
10. Music App by Hรฅvard Brynjulfsen
Author: Hรฅvard Brynjulfsen
Links: Source Code / Demo
Made with: HTML CSS js
11. Animated folding (notifications concept) by Pavel Komiagin
Author: Pavel Komiagin
Links: Source Code / Demo
Made with: HTML CSS js
12. Collapsable notifications by Jonas Badalic
Author: Jonas Badalic
Links: Source Code / Demo
Made with: HTML CSS js
13. Animated notifications by Yanni
Author: Yanni
Links: Source Code / Demo
Made with: HTML CSS js
14. Notification by Katherine Kato
Author: Katherine Kato
Links: Source Code / Demo
Made with: HTML CSS js
15. mobile menu with pure css by Ramnek Singh
Author: Ramnek Singh
Links: Source Code / Demo
Made with: HTML CSS js
16. Notification Bell Button Interaction Design | User by Himalaya Singh
Author: Himalaya Singh
Links: Source Code / Demo
Made with: HTML CSS js
17. Curvy dropdown by Carsten Jacobsen
Author: Carsten Jacobsen
Links: Source Code / Demo
Made with: HTML CSS js
18. Push Notification UI by Tyler Fry
Author: Tyler Fry
Links: Source Code / Demo
Made with: HTML CSS js
19. Notifications by Robin Brons
Author: Robin Brons
Links: Source Code / Demo
Made with: HTML CSS js
20. Notifications everywhere! by Mauricio Allende
Author: Mauricio Allende
Links: Source Code / Demo
Made with: HTML CSS js
21. Notification popups by Icebob
Author: Icebob
Links: Source Code / Demo
Made with: HTML CSS js
22. Pulsing Notification by Derek Wheelden
Author: Derek Wheelden
Links: Source Code / Demo
Made with: HTML CSS js
23. Dashboard / Admin Panel by Jacek Dunikowski
Author: Jacek Dunikowski
Links: Source Code / Demo
Made with: HTML CSS js
24. Notifications by Evans Pauliuts
Author: Evans Pauliuts
Links: Source Code / Demo
Made with: HTML CSS js
25. Tab Bar Menu Animation by Doฤukan รavuล
Author: Doฤukan รavuล
Links: Source Code / Demo
Made with: HTML CSS js
26. Notifications by No Mam
Author: No Mam
Links: Source Code / Demo
Made with: HTML CSS js
27. Notifications by Keith Pickering
Author: Keith Pickering
Links: Source Code / Demo
Made with: HTML CSS js
28. Sliding Notifications card by Sabine Robart
Author: Sabine Robart
Links: Source Code / Demo
Made with: HTML CSS js
29. iOS 12 Dark Mode Notifications by Gabrielle Wee ๐งง
Author: Gabrielle Wee ๐งง
Links: Source Code / Demo
Made with: HTML CSS js
30. Notifications, Alerts, Modals by DevTips
Author: DevTips
Links: Source Code / Demo
Made with: HTML CSS js
31. Circle notifications by Adam Mortka
Author: Adam Mortka
Links: Source Code / Demo
Made with: HTML CSS js
32. iOS Notifications by Yoav Kadosh
Author: Yoav Kadosh
Links: Source Code / Demo
Made with: HTML CSS js
33. CSS by Damiรกn Muti
Author: Damiรกn Muti
Links: Source Code / Demo
Made with: HTML CSS js
34. Hop Over Notification Badge by Paul
Author: Paul
Links: Source Code / Demo
Made with: HTML CSS js
35. Chrome Title Bar CSS (Chrome 69) by Zed Dash
Author: Zed Dash
Links: Source Code / Demo
Made with: HTML CSS js
36. Responsive Header by Andy Fitzsimon
Author: Andy Fitzsimon
Links: Source Code / Demo
Made with: HTML CSS js
37. Notifications by Hampus Persson
Author: Hampus Persson
Links: Source Code / Demo
Made with: HTML CSS js
38. Notifications widget by Alex Marinenko
Author: Alex Marinenko
Links: Source Code / Demo
Made with: HTML CSS js
39. YAUI v2 by Hugo Darby brown
Author: Hugo Darby brown
Links: Source Code / Demo
Made with: HTML CSS js
40. Notifications Dropdown by Fauzan Khan
Author: Fauzan Khan
Links: Source Code / Demo
Made with: HTML CSS js