# 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:** 1
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [June 10, 2025, 4:49pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/1 "2025-06-10T16:49:41Z")
This is merged → [UX: Notification panel update by jordanvidrine · Pull Request #33795 · discourse/discourse · GitHub](https://github.com/discourse/discourse/pull/33795)
* * *
UPDATE:
This is now active on meta for all users
## Summary
Experiment for a new look & style for header dropdown menus along with notification item styles.
We remove the “active” border styling from dropdowns in header. This border adds a complication to styling when creating themes.
We add spacing, and change the “active” icon styling on the notification menu.
## Screenshots
| Before | After |
| --- | --- |
|  |  |
---
### Author:  [@keegan](https://meta.discourse.org/u/keegan)
#### Post date: [June 10, 2025, 5:27pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/2 "2025-06-10T17:27:53Z")
Cool, this experiment is exciting! Love the new look here Jordan 😃
Some initial feedback: the spacing _feels_ a bit tight, could we experiment with a tad bit more spacing? I think it’s because of the padding on the ⌄ ✓ Dismiss buttons is quite larger. I think it would be nice if we aligned them with the same padding (`0.75rem` ?)
Something like this?:
---
### Author:  [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [June 10, 2025, 5:28pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/3 "2025-06-10T17:28:21Z")
I definitely miss the titles of the topics. When there is one like or two likes by users with short names, there is enough information. But one or two words of the title are not enough for me.
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [June 10, 2025, 5:29pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/4 "2025-06-10T17:29:38Z")
Thanks for the feedback you two. Both are really spot on 👍 Im going to let more feedback pile up before addressing, but rest assured, I will be adding these to the list.
---
### Author:  [@mcwumbly](https://meta.discourse.org/u/mcwumbly)
#### Post date: [June 10, 2025, 5:37pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/5 "2025-06-10T17:37:27Z")
A few first impressions:
For Default and Horizon:
- Like Keegan, the spacing feels a bit tight to me
- Having no shading in the negative space between items makes it feel busier to me, compared to when that all blended together
Horizon-specific:
- On Horizon, the items’ background have color – should there be? (On Default, its now gray).
- On Horizon, the rounded corners in the top left look off to me… the container looks sharper than the items within – on Default, it feels like they match better.
---
### Author:  [@Falco](https://meta.discourse.org/u/Falco)
#### Post date: [June 10, 2025, 5:38pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/6 "2025-06-10T17:38:46Z")
I’ve found the trade-off of making more space for old notifications (that I’ve potentially already dealt with) in exchange for losing context of the newer notifications (which I still need to deal with): an unexpected one.
Goes into the same thing @moin said above, and the denser design, as pointed out by @keegan, is at odds with the move towards less density we’ve been aiming for with components like the sidebar.
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [June 10, 2025, 5:39pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/7 "2025-06-10T17:39:18Z")
> [@mcwumbly](#):
>
> On Horizon, the rounded corners in the top left look off to me… the container looks sharper than the items within – on Default, it feels like they match better.
This is due to the larger border radius set by horizon && core setting this radius as “large”. I have since moved this border in core to inherit the regularly set border radius.
> [@mcwumbly](#):
>
> On Horizon, the items’ background have color – should there be? (On Default, its now gray).
Good callout. This is due to an incorrect setting I think.
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [June 10, 2025, 5:41pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/8 "2025-06-10T17:41:53Z")
wrt spacing… what do you think of this?
Here I am limiting the title to one line, but allowing the signifier to have it’s own line as well. I’ve also added left and right padding of the same space to match the buttons below.
---
### Author:  [@keegan](https://meta.discourse.org/u/keegan)
#### Post date: [June 10, 2025, 5:51pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/9 "2025-06-10T17:51:34Z")
This is possibly deviating a bit too much from the purpose of the experiment, but I think a larger issue that restricts our design is the amount of notifications we show. I don’t think we need to show a whole page long of notifications just because the browser height permits it. Users can click show more and be directed to `/my/notifications` when they need to see everything.
> [@jordan.vidrine](#):
>
> I am limiting the title to one line, but allowing the signifier to have it’s own line as well.
💯 I think this is a step in the right direction, and we could possibly:
- reduce the number of notifications we show
- show more information per notification
This [design I found on Dribbble](https://dribbble.com/shots/23177344-Finanzen-Notifications-Detail) for example, has a nice ratio of amount of notifications / information on each notification / density.
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [June 10, 2025, 5:54pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/10 "2025-06-10T17:54:21Z")
Ah yeah, I really like that display.
---
### Author:  [@Moin](https://meta.discourse.org/u/Moin)
#### Post date: [June 10, 2025, 6:44pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/11 "2025-06-10T18:44:26Z")
I also noticed that the avatars aren’t as covered by the icon in your screenshot as in mine. Choosing “smaller” for the text size in the preferences seems to cause that. Maybe it was the case before, too, that a larger part of the avatar was covered because I changed the text size, but now the avatars are more covered than before. (I still prefer the old icon-only version, so I don’t mind.)
For comparison: with the experiment and in [safe mode](https://meta.discourse.org/t/53504?silent=true)
 
And some icons are indented
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [June 10, 2025, 7:04pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/12 "2025-06-10T19:04:01Z")
Thoughts?
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [June 10, 2025, 7:56pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/13 "2025-06-10T19:56:55Z")
I think we need more space around the notifications, this also would fix this misalignment:
Can these radii be the same?
I don’t feel like the grey background works well to indicate new and active… we usually use tertiary for both new and active states and grey for hover
The icons feel a little too small to me now, I find myself squinting to make out some
Do you have any ideas around how this would work out with search menu changes? we recently went full-width on highlights there so it feels a little off to be back to boxes
---
### Author:  [@chapoi](https://meta.discourse.org/u/chapoi)
#### Post date: [June 10, 2025, 8:02pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/14 "2025-06-10T20:02:55Z")
I like the stylechange on the tab in general.
One more spot to have a bit more spacing: the click target for the tabs on mobile is very small
It’s quite hard to tap.
---
### Author:  [@saquetim](https://meta.discourse.org/u/saquetim)
#### Post date: [June 10, 2025, 8:04pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/15 "2025-06-10T20:04:41Z")
TBH, I didn’t enjoy it and prefer the old layout.
- As others said above, the layout is too packed. The screenshot above improves that.
- The border radius and gap between all items makes the list feels busier. It adds visual noise to the information:
- The background colors for the unread items don’t look as good in other color palettes. They all look grey-ish and lost the color accent.
Old:
New:
- Since we don’t have the border anymore separating the notifications from the icons, the misalignment between them and the items gives the impression that something is off, specially in the first icon.
- The icons are too small, and in mobile mode the spacing is off. It makes it harder to click on the correct icon. I already accidentally clicked a notification instead of the icon, twice.
> [@keegan](#):
>
> This is possibly deviating a bit too much from the purpose of the experiment, but I think a larger issue that restricts our design is the amount of notifications we show. I don’t think we need to show a whole page long of notifications just because the browser height permits it. Users can click show more and be directed to `/my/notifications` when they need to see everything.
I disagree. It’s nice that we take advantage of the available viewport.
> [@keegan](#):
>
> show more information per notification
This would be nice.
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [June 10, 2025, 8:30pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/16 "2025-06-10T20:30:25Z")
I am merging some changes. Here is the latest iteration.
---
### Author:  [@awesomerobot](https://meta.discourse.org/u/awesomerobot)
#### Post date: [June 10, 2025, 8:39pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/17 "2025-06-10T20:39:10Z")
how would the avatar look aligned to the top so it’s always closer to where the username is? I wonder if the centered avatars would feel a bit “unanchored” if I had a lot of double-line notifications… very rough comparison
 
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [June 10, 2025, 8:42pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/18 "2025-06-10T20:42:16Z")
I did try this locally and it felt “off”, but I can implement here to see how it feels for everyone.
---
### Author:  [@saquetim](https://meta.discourse.org/u/saquetim)
#### Post date: [June 10, 2025, 8:46pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/19 "2025-06-10T20:46:57Z")
> [@jordan.vidrine](#):
>
> 
>
> CleanShot 2025-06-10 at 15.30.04@2x780×1082 96.8 KB
Can you try increasing the gap between the items to match the outer padding to see how it feels?
---
### Author:  [@jordan.vidrine](https://meta.discourse.org/u/jordan.vidrine)
#### Post date: [June 10, 2025, 9:02pm UTC](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574/20 "2025-06-10T21:02:27Z")
> [@saquetim](#):
>
> Can you try increasing the gap between the items to match the outer padding to see how it feels?
[Next page](https://meta.discourse.org/t/new-header-dropdown-notification-menu-styles/369574.md?page=2)