Positioning header drop-down menus with fk-d-menu

UX
1

I’ve just done a first component adding a drop-down menu to the header, using fk-d-menu. It’s really nice and straightforward to set up. Just style-wise, I don’t really like how the panel is attached right below the header:

The image shows a user menu for "Manuel" with options like "Set custom status," "Pause notifications," and "Log Out." (Captioned by AI)
The image shows a user menu for "Manuel" with options like "Set custom status," "Pause notifications," and "Log Out." (Captioned by AI)309×524 18.5 KB

From what I see this is also the case with new official components:

Screenshot From 2025-05-30 23-20-49
Screenshot From 2025-05-30 23-20-49303×552 15.2 KB

I tried adjusting the position, so it hovers a bit above or below. But I couldn’t really figure out a good way to do it. Is there a recommended approach?

1 Like
2

You can get better help if you link to your code.

2 Likes
3

This was more of a general question about placing the DMenu component. But I should indeed have a better look at the component code.. :melting_face: Saw there’s also an offset argument, so I can place like:

<DMenu
 @placement="bottom-end"
 @offset="0"
 ..
>

And then it’s placed like the other menu panels, slightly above the header:

The image shows a user profile page for a sliver on Twitter, displaying options for status, notifications, summary, activity, invites, drafts, preferences, and logout. (Captioned by AI)
The image shows a user profile page for a sliver on Twitter, displaying options for status, notifications, summary, activity, invites, drafts, preferences, and logout. (Captioned by AI)381×640 24 KB

3 Likes