# 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:** 2
### Author:  [@saquetim](https://meta.discourse.org/u/saquetim)
#### Post date: [June 10, 2025, 9:04pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/21 "2025-06-10T21:04:55Z")
It feels much better when there are multiple notifications highlighted.
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [June 10, 2025, 9:05pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/22 "2025-06-10T21:05:28Z")
Yes, I think I like it along with Kris’ suggestion of avatar balance.
EDIT: For consitency sake, I used the same gap spacing we have for sidebar.
---
### Author:  [@SkyeDragon](https://meta.discourse.org/u/SkyeDragon)
#### Post date: [June 10, 2025, 9:33pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/23 "2025-06-10T21:33:31Z")
Stylistically: Personally I prefer the original boxy style vs rounded edges style, mostly due to personal preferences and consistency with how the other UI popup boxes have been shown (ex: compose). However, that’s mostly just aesthetic preference.
Functionally: More importantly though, in a situation with no highlights / all read notifications, the right button icons are not sufficiently differentiated IMO versus the left notification column. Especially in a situation with no highlighted notifications, it’s easy for the icons to feel too connected with the information on the left, giving a new user the impression the right icon is related to the left notification. This is due to a combination of three changes all removing this cue: 1) the button icons are now the same size / showing on the same lines (at least in original revision, not in recent screenshot), 2) there is no more differing background color for the column, 3) there is no more vertical line separating them. As #1 seems already resolved then maybe that is enough, but I’m a bit unsure.
But even more challenging, this is also going to be more confusing for account access and cueing to the user that account setting is also via this menu, since the behavior of the bottom account button shows completely different things versus the rest of the notification buttons. (More generally, it’s super weird to have account access and notification in the same header dropdown, instead of two separate ones. However, that may be a fair trade-off given the space savings/limitations on mobile devices).
TLDR of my post: I recommend the account icon has some special differentiation so people find it.
---
### Author:  [@schneeland](https://meta.discourse.org/u/schneeland)
#### Post date: [June 10, 2025, 9:34pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/24 "2025-06-10T21:34:27Z")
This reminds me: while it’s probably beyond the scope of this experiment, I think it would improve the Discourse UX if notifications moved out into their own menu (which could then have four horizontal tabs/sections for likes, replies, mentions and badges).
I feel this is also a pretty common pattern (e.g. on Youtube, Reddit, Twitter/Bluesky, etc., but also in other forum software like XenForo).
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [June 10, 2025, 9:43pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/25 "2025-06-10T21:43:07Z")
Definitely agree with you. You are right though, it is out of scope for this change. Splitting the user menu from the notification menu would be a great change for us to look into.
---
### Author:  [@mcwumbly](https://meta.discourse.org/u/mcwumbly)
#### Post date: [June 10, 2025, 10:28pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/26 "2025-06-10T22:28:17Z")
> [@chapoi](#):
>
> It’s quite hard to tap.
Yeah, been trying it on mobile this afternoon and the tap area feels quite small, especially for the tabs on the right.
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [June 10, 2025, 11:54pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/27 "2025-06-10T23:54:38Z")
This is what facebook do…
To me there are multiple aspects that make this a bit problematic: (which compounds on previous problems we had)
1. Avatars are too small
2. Sea of blue when you have unread - which is now compounded cause the tiny white line between notifications draws too much attention.
3. Tiny highlight on the right hand side which is hard to click
I wonder if one path here is to junk the blue highlight and use the “blue dot” (which we already use on the sidebar) for new notifications.
Then we can make avatar a bit bigger and restore the right hand sides click target and highlight.
Not saying we go the full facebook here with HUGE avatars, but there may be a bit of a middle ground, giving up on the “see of blue” seems to me an unlocking factor here potentially.
---
### Author:  [@martin](https://meta.discourse.org/u/martin)
#### Post date: [June 11, 2025, 1:35am UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/28 "2025-06-11T01:35:02Z")
For me, I like this change, but the font size is too small. In the notification menu it’s ~13px, and the main topic body font is 16px. You can see them close together here:
It makes the items a lot harder to read for me, a person with already terrible vision 🤓 It would be nice if the fonts were the same size.
---
### Author:  [@NateDhaliwal](https://meta.discourse.org/u/NateDhaliwal)
#### Post date: [June 11, 2025, 11:49am UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/29 "2025-06-11T11:49:07Z")
I’m not sure what I think of the big gap below the icons on the right… I think it’s overly large.
Also, I second the suggestion to increase the font size - it _is_ a bit small, on mobile too.
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [June 11, 2025, 6:24pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/30 "2025-06-11T18:24:19Z")
> [@martin](#):
>
> For me, I like this change, but the font size is too small. In the notification menu it’s ~13px, and the main topic body font is 16px. You can see them close together here:
Yeah I felt the same after a bit. It is now back to 16px. I am trying to mimic a lot of the spacing & sizing in the sidebar. Along with active & hover states.
> [@sam](#):
>
> Avatars are too small
Ive made these back to their original size.
> [@sam](#):
>
> Sea of blue when you have unread - which is now compounded cause the tiny white line between notifications draws too much attention.
> [@sam](#):
>
> I wonder if one path here is to junk the blue highlight and use the “blue dot” (which we already use on the sidebar) for new notifications.
I do think this is a good idea generally. It would bring us even closer to the sidebar states. I can make a pass at this.
> [@sam](#):
>
> Then we can make avatar a bit bigger and restore the right hand sides click target and highlight.
Do you mind elaborating on how moving toward a blue dot helps us make the avatar larger?
> [@sam](#):
>
> 1. Tiny highlight on the right hand side which is hard to click
Also increased this.
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [June 11, 2025, 8:12pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/31 "2025-06-11T20:12:54Z")
@sam
What are your thoughts of this? This was a very simple change, possible without any template / core edits aside from css.
Here it is with nav on top
---
### Author:  [@keegan](https://meta.discourse.org/u/keegan)
#### Post date: [June 11, 2025, 9:57pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/32 "2025-06-11T21:57:20Z")
These follow-up designs look cool!
If we’re going with nav on top, could we try it styled like our existing designs we use in `horizontal-overflow-nav` elsewhere in core.
---
### Author:  [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [June 11, 2025, 10:06pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/33 "2025-06-11T22:06:41Z")
> [@jordan.vidrine](#):
>
> Here it is with nav on top
This looks very similar to the menu we had before the last update.
> [@Try out the new sidebar and notification menus!](https://meta.discourse.org/t/try-out-the-new-sidebar-and-notification-menus/238821/195):
>
> we will move from this
>
> 
>
> to that:
>
> 
> [@keegan](#):
>
> If we’re going with nav on top, could we try it styled like our existing designs we use in `horizontal-overflow-nav` elsewhere in core.
Don’t these already cause confusion for users on mobile? (For example, when people fail to [find the admin button on user profiles](https://meta.discourse.org/t/admin-button-on-user-page-is-obscured-on-mobile/315330)). If the last icon was hidden like that, it will be very difficult to find, for example, the logout button.
---
### Author:  [@keegan](https://meta.discourse.org/u/keegan)
#### Post date: [June 11, 2025, 10:44pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/34 "2025-06-11T22:44:56Z")
Ah yes you’re right. I do think we should keep it with the nav on the right to avoid the overflow confusion.
I was actually meaning just imitating the design stylistically. I think we could still do that too while it’s on the right actually. Just so that we have a more clear division between the filters and the notification area.
Was thinking something like this:
---
### Author:  [@keegan](https://meta.discourse.org/u/keegan)
#### Post date: [June 11, 2025, 10:56pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/35 "2025-06-11T22:56:14Z")
Just throwing around, another idea is we could dim the read notifications:
A precedent we already have on the topic list
---
### Author:  [@sam](https://meta.discourse.org/u/sam)
#### Post date: [June 12, 2025, 12:36am UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/36 "2025-06-12T00:36:03Z")
### Circles position
I prefer (personally) notification circles on the right, I think it is worth trying out circles on the left first to see how people feel, maybe it will be natural and we all will like it.
### Nav on top vs side
I far prefer nav on side, it is way easier to use and click. Plus huge room constraints.
### Nav highlight
With the nav, I prefer to keep the “big blue highlight box” vs shrinking it like it is now, there is some weird psychology at play for me with the tiny nav boxes. It feels really hard to click, despite no mechanics changing.
My brain is oddly saying, got to hit the tiny tiny box to change nav.
* * *
> [@jordan.vidrine](#):
>
> Do you mind elaborating on how moving toward a blue dot helps us make the avatar larger?
My thinking is that when stuff is less visually busy, there is a bit more room for larger avatars. That said, I think the current size you have is OK.
Anyway feel free to scratch that feedback for now.
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [June 12, 2025, 1:16pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/37 "2025-06-12T13:16:51Z")
I still think we need to find a way to go edge-to-edge with the highlighted items to match our other menus, we do this almost everywhere now… I think the only remaining big exception is the sidebar
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [June 12, 2025, 2:04pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/38 "2025-06-12T14:04:26Z")
> [@awesomerobot](#):
>
> I still think we need to find a way to go edge-to-edge with the highlighted items to match our other menus, we do this almost everywhere now
I do think that consistency is important, but the issue I am finding is that when there are loads of unreads… it feels like a sea of blue, with no delineation between the items.
With our menus, we do not show lots of items with an active highlight. Usually… I think it is only one, or even none.
Maybe if we move forward with the ragged blue dots, this would no longer matter.
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [June 12, 2025, 2:04pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/39 "2025-06-12T14:04:46Z")
I like the idea you presented here Keegan, thanks for sharing! I will try and incorporate some of this into the next iteration this morning.
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [June 12, 2025, 4:45pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/40 "2025-06-12T16:45:24Z")
Latest update is live here on meta.
[Previous page](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574.md?page=1)
[Next page](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574.md?page=3)