More from Henry Kim

RSS

Notifications dropdown that live-updates with Turbo Streams

2644 views

0 comments

                  <%= turbo_stream_from [current_member, :notifications] %>

<div id="notification_badge">
  <%= render 'notifications/badge', count: current_member.notifications.unread.count %>
</div>

<%= turbo_frame_tag 'notification_panel' do %>
  <%= render 'notifications/list', notifications: current_member.notifications.recent.limit(10) %>
<% end %>

                  class Notification < ApplicationRecord
  belongs_to :member

  after_create_commit -> {
    broadcast_prepend_later_to [member, :notifications], target: 'notification_items'
    broadcast_replace_later_to [member, :notifications], target: 'notification_badge', partial: 'notifications/badge', locals: { count: member.notifications.unread.count }
  }
end

For a notifications dropdown, I keep the list server-rendered and let Turbo Streams keep it fresh. The dropdown content sits in a turbo_frame_tag (so you can also navigate to a full notifications page), and the unread badge is a separate small target that can be replaced. When a notification is created, I broadcast a prepend to the list and a replace to the badge counter. This gives users instant feedback without polling. The implementation is just partials and broadcast_* calls, which means it’s easy to keep styles and accessibility consistent. I also like to broadcast a “mark read” result so multiple tabs stay in sync.

Henry Kim

More from Henry Kim

Notifications dropdown that live-updates with Turbo Streams

0 Comments

More from Henry Kim