Cleaner Header Navigation: Introducing the User Menu Dropdown
Cleaner Header Navigation: Introducing the User Menu Dropdown
Release: v1.0.106 · UI/UX · Navigation
Overview
In v1.0.106, the UserMenu component in the application header has been redesigned. What was previously a flat row of inline elements — avatar, name, theme toggle, and sign-out button — is now a tidy dropdown triggered by the user's avatar or name.
This change brings the navigation pattern in line with standard conventions used across tools like Vercel, Linear, and Stripe, and is particularly impactful on smaller screens where header space is limited.
What Was the Problem?
The previous implementation placed all account-related controls directly in the header bar:
[ Avatar ] [ Name ] [ 🌙 Theme ] [ Sign Out ]
This caused a few issues:
- Visual clutter — unrelated-looking controls sitting side by side with no grouping.
- Accidental sign-outs — the Sign Out button had no separator or confirmation context, making it easy to click unintentionally.
- Poor mobile experience — the user's name was hidden on small screens (
sm: hidden), leaving the avatar in isolation with no obvious affordance. - No room to grow — adding future account actions (e.g. billing, notifications) would make the header even more congested.
What Changed
The UserMenu in src/components/user-menu.tsx now renders a dropdown menu when the user clicks their avatar or name.
Dropdown Contents
| Section | Content |
|---|---|
| Header | User's full name and email address |
| Navigation | Link to Profile settings |
| Preferences | Theme toggle (light / dark) |
| Account | Sign Out action |
Benefits
- Saves header space — only the avatar (and name on larger screens) is visible until the dropdown is opened.
- Intentional sign-out — the action is clearly scoped within an account context, reducing accidental clicks.
- Better mobile experience — the dropdown is accessible via the avatar on all screen sizes.
- Extensible — new account actions can be added to the dropdown without touching the header layout.
Usage
No configuration is required. The dropdown is part of the UserMenu component and activates automatically once the update is applied.
Click your avatar or name in the top-right corner of the header to open the account menu.
Related Files
src/components/user-menu.tsx— updated component implementation.