# New header dropdown / notification menu styles
**URL:** https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574
**Category:** UX
**Tags:** feedback, design-experiment
**Created:** [June 10, 2025, 4:49pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574 "2025-06-10T16:49:41Z")
**Posts on this page:** 20
**Page:** 3
### Author:  [@david](https://meta.discourse.org/u/david)
#### Post date: [June 12, 2025, 4:55pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/41 "2025-06-12T16:55:01Z")
My blue unread dots seem a little zig-zaggy, and are causing the descriptions to be truncated quite early.
Maybe we don’t need the dots at all now that read notifications are “greyed out”?
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [June 12, 2025, 7:11pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/42 "2025-06-12T19:11:23Z")
> [@david](#):
>
> My blue unread dots seem a little zig-zaggy, and are causing the descriptions to be truncated quite early.
The truncation is due to truncating at “word break” which I think is better for readability.
The ragged / zig-zag dots are what we do in topic lists and sidebar. Based on feedback I went this direction but personally prefer if they were all to the right-most zone.
> [@david](#):
>
> Maybe we don’t need the dots at all now that read notifications are “greyed out”?
Hmm that is interesting.
At the moment we are now kind of merging and mimicking two patterns in our UI.
In the sidebar for unreads:
blue dot
In the topic list for unreads:
blue dot, and primary color for text
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [June 12, 2025, 8:12pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/43 "2025-06-12T20:12:55Z")
Maybe the dot with the notification type icon is similar enough that we don’t need another one on the right? (would it work with the lighter tertiary color to match?)
I am missing the second line for the title, 3 words is so short!
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [June 12, 2025, 8:59pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/44 "2025-06-12T20:59:17Z")
> [@awesomerobot](#):
>
> Maybe the dot with the notification type icon is similar enough that we don’t need another one on the right?
Yes I kind of now am seeing that the icon w/ bg color _sort_ of acts as a “blue” dot notification.
> [@awesomerobot](#):
>
> (would it work with the lighter tertiary color to match?)
Hmm… I am not sure of this. With the icon there the contrast is iffy. We could always change the icon color too though.
> [@awesomerobot](#):
>
> I am missing the second line for the title, 3 words is so short!
I think we’ve had enough feedback that people prefer more words than truncation. I’ll take that out.
---
### Author:  [@southpaw](https://meta.discourse.org/u/southpaw)
#### Post date: [June 13, 2025, 1:41am UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/45 "2025-06-13T01:41:22Z")
May we please have back some indication of which notifications have already been viewed/dismissed and which are new? I’m not seeing any difference at the moment.
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [June 13, 2025, 2:00am UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/46 "2025-06-13T02:00:12Z")
Are you saying you dont see this?
Or, is the difference here not strong enough?
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [June 13, 2025, 2:02am UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/47 "2025-06-13T02:02:09Z")
I do wonder about emulating Gmail mobile app styling? It’s such an established paradigm
(Bold vs thin)
Also Apple mobile mail is interesting, dot on left which you originally suggested
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [June 13, 2025, 2:07am UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/48 "2025-06-13T02:07:04Z")
> [@sam](#):
>
> (Bold vs thin)
That is a little nicer.
* * *
The goal is to mimic the topic list, but inherently we might need more differentiation due to such a compact & dense list of items here. I dont think straying slightly further from the norm of sidebar/topic list would be a bad thing.
---
### Author:  [@southpaw](https://meta.discourse.org/u/southpaw)
#### Post date: [June 13, 2025, 2:09am UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/49 "2025-06-13T02:09:43Z")
Since I only had new items in my notifications drop-down and didn’t see any markings that looked different, I did not noticed the depressing-gray icons on the already-read items until I looked at the full page notifications.
I liked the “sea of blue” when I had unread items, never even once thought “wow that’s too much color staring at me.” It was just easy to see that things needed my attention and/or someone actually wanted to talk to _me_.
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [June 13, 2025, 2:14am UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/50 "2025-06-13T02:14:33Z")
This is great feedback. With a sea of blue, it is pretty clear that “hey, I need to clear all of this”.
With that removed, the conspicuousness of it is definitely lost. Maybe bringing back the dots is a good thing for that purpose alone.
---
### Author:  [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [June 13, 2025, 6:21am UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/51 "2025-06-13T06:21:41Z")
For me, the difference between blue and gray is very small. This is perhaps partly due to the fact that the gray is darker because of the WCAG palette. I think I would prefer if the read notification was still a gray icon on white; then the difference is clearer.
So of course I see the color difference, but I find that if I only have read notifications, the read ones look like unread ones.
Also on [https://meta.discourse.org/my/notifications](https://meta.discourse.org/my/notifications) I now see black icons on gray
* * *
When I click the envelope to see only notifications related to PMs, all messages look unread, even though they are all read.
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [June 13, 2025, 2:19pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/52 "2025-06-13T14:19:00Z")
I wanted to pop in this morning and let you all know this feedback is all very much appreciated. It’s been nice to go through the iterations together in such a short span with all of the ideas presented here.
It does feel that we need a bit stronger of an indication for unreads, so Im leaning toward the blue dot again.
* * *
> [@Moin](#):
>
> Also on [Discourse Meta - The Official Support Forum for Discourse](https://meta.discourse.org/my/notifications) I now see black icons on gray
oh yeah… this is not ideal. thanks!
> [@Moin](#):
>
> When I click the envelope to see only notifications related to PMs, all messages look unread, even though they are all read.
Interesting… will take a look.
---
### Author:  [@manuel](https://meta.discourse.org/u/manuel)
#### Post date: [June 13, 2025, 2:21pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/53 "2025-06-13T14:21:10Z")
I really like the layout on the current iteration, it’s wraps all the relevant information in a compact item, and the overall list spacing still feels generous 👍
With respect to state, I don’t have a strong preference for the different options. But I think it would be great if it could be addressed more generally in a design exploration. There’s not a fully consistent system in place and rather than just looking for the right fit for the notification menu now, it could be great to have a wider exploration mapping state and context across the app and then applying it with variables.
For example, yes, the state (read/unread) is analogous to the topic list. But the context is different, and on similar context (other menu panels) a more subtle grey usually doesn’t indicate that state. Now it makes other menu items look a bit more as if they indicate some muted state as well. So I feel this could really profit from a more systematic mapping.
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [June 13, 2025, 5:33pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/54 "2025-06-13T17:33:11Z")
So at the moment, we really only have to different parts of Discourse using a “read/unread” styling state.
The other part in this menu is a “selected” state. This is to show the currently selected notification tab. In this iteration we are mimicking the selected state for sidebar items.
Here is a basic audit of the things we are looking at in the menu. Read, Unread, Selected
**Sidebar**
For sidebar, we just indicate “unread” with a dot. “Read” is assumed by default if no blue dot exists.
**Side bar - active**
Here is the currently selected sidebar item, aka active.
**Topic List**
For topic lists we currently show a blue dot && use color in the title & metadata to differentiate. One caveat is that we _dont_ show the blue dot on topics you are not following/watching. So whether the blue dot appears or not is not immediately clear to the user.
**Menus**
We use `selected` as a state here to show active selection. I do not think this translates to notifications, but it _does_ translate to the selected state of the menu notifications current tab.
There are inconsistencies at the moment of what color we use for selected.
For tracking, we use grey.
For currently selected category we use blue.
**User Notifications page**
This page needs some work in the current iteration.
---
### Author:  [@satonotdead](https://meta.discourse.org/u/satonotdead)
#### Post date: [June 13, 2025, 5:55pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/55 "2025-06-13T17:55:36Z")
I appreciate your work, as always, and I like that you are working specifically on this.
May I know the motivation for the padding on the corners of the buttons/sections?
I honestly don’t get it but I’m probably missing something.
> [@keegan](#):
>
> 
That looks beautiful with no extra padding on rounded corners 🙂
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [June 13, 2025, 6:12pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/56 "2025-06-13T18:12:24Z")
> [@satonotdead](#):
>
> May I know the motivation for the padding on the corners of the buttons/sections?
To more closely mimic the sidebar.
---
### Author:  [@satonotdead](https://meta.discourse.org/u/satonotdead)
#### Post date: [June 13, 2025, 6:37pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/57 "2025-06-13T18:37:52Z")
I understand it, last update with no extra padding on the buttons looks better to me 👌
What are your thoughts on this subtle improvement?
It’s about removing the hover effect from the active button panel on the right side, while applying a subtle blend effect to the left panel.
This would help differentiate the panels from the buttons and prevent the interface from appearing overly saturated or ‘fully painted’ when there are active notifications and panel at the same time.
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [June 13, 2025, 9:28pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/58 "2025-06-13T21:28:31Z")
Here is an iteration idea based on some more feedback received here.
---
### Author:  [@schneeland](https://meta.discourse.org/u/schneeland)
#### Post date: [June 14, 2025, 11:32am UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/59 "2025-06-14T11:32:38Z")
Maybe it’s because I’m so used to the white background for notifications I have already seen, but it does look a bit odd to have such large areas with grey background in a theme that otherwise does not use them.
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [June 17, 2025, 7:23pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/60 "2025-06-17T19:23:38Z")
This experiment is back to being live here on meta. Make sure to join the experiments group.
> [@Discourse Design team experimentation topic](https://meta.discourse.org/t/discourse-design-team-experimentation-topic/285362/1):
>
> ## Update
>
> To see these changes here on meta, please join this group: [Discourse-design-experiments - Discourse Meta](https://meta.discourse.org/g/discourse-design-experiments)
>
> The changes will be scoped to only those members belonging the group here on meta.
[Previous page](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574.md?page=2)
[Next page](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574.md?page=4)