Offcanvas V06

Author: Colorlib

Released: September 2026

License: CC BY 3.0

A dark notifications drawer for a project management app, opened from a bell button with an unread badge. Notifications are grouped by Today, Yesterday and Earlier this week, and can be filtered to unread items or mentions. Opening a notification marks it read, and Mark all as read clears every unread dot, the header count and the bell badge.

It is plain HTML and CSS plus a few lines of vanilla JavaScript: no jQuery, no Bootstrap files, no plugins, and the download is 130 KB. Use it on its own, or drop it into a Bootstrap 4, 5 or 6 project and it looks the same.

• Unread state shown with a dot plus hidden text, not colour alone
• Bell badge and accessible name kept in sync with the unread count
• All, Unread and Mentions filters as pressed toggle buttons
• Empty state when a filter has nothing to show
• Native dialog modal with Esc, backdrop click, focus return and scroll lock