Dropdown UI - Light & Dark Mode
I designed this functional dropdown menu for a user profile, featuring both light and dark modes. This design focuses on clean typography, intuitive navigation, and a modern aesthetic with a subtle gradient touch on the "Upgrade to PRO" button.
Key features:
- Color mode switch between light and dark modes.
- Minimalist layout with clear hierarchy.
- Highlighted call-to-action for the PRO upgrade.
Reviews
4 reviews
Hey Nicholas,
First off, I just want to say—great job on this dropdown UI concept. It's clear you’ve put thoughtful effort into creating something clean, functional, and visually consistent. Designing for both light and dark modes is no small task, and I really appreciated the attention to detail you brought to each version. The aesthetic is modern and polished, and you’ve done a great job highlighting primary actions like the “Upgrade to PRO” button without overwhelming the user.
One thing that really stood out to me is your use of space and typography—it feels intentional, and that adds a lot to the clarity of the interface. Also, the way you maintained harmony between the light and dark themes shows a solid understanding of visual balance and accessibility in terms of contrast.
If you’re open to a few suggestions to take it even further, I’d love to share a few ideas:
- Interactivity: Seeing how the dropdown behaves on hover or click (maybe even a short animation or prototype) would add another layer of depth to the experience. It would really bring your vision to life and help others understand the flow.
- Accessibility: It’s great that contrast is already considered—maybe you could also mention how you might support keyboard navigation or screen readers, just to round out the inclusivity aspect. It doesn’t have to be fully implemented, but a small note on your thought process there could go a long way.
- Real-world context: I’d be curious to know what kind of product or platform this dropdown would live in. Even a brief scenario or user story could help ground the component and show how it fits into a larger experience.
All in all, this is a super strong piece that reflects a keen eye for UI detail and a user-first mindset. With just a few additional touches, it could really shine as a showcase of both your design craft and your UX thinking. Keep going—you're definitely on the right track!
This dropdown feels clean and well thought out. Both light and dark versions hold up nicely—nothing feels out of place. The layout is simple, the spacing’s tight, and the flow makes sense. I liked how you added the "⌘ + N" shortcut. Small touch, but it shows you're designing for real users, not just visuals. The "Upgrade to PRO" CTA looks great too—gradient is soft, not screaming for attention, but still catches the eye.
That said, a few things could be improved. The "My Profile" tooltip above the avatar feels a bit redundant once the dropdown is open. Maybe keep it only on hover before clicking. Also, the hover effect is visible only on “Notifications”—would be nice to see the same feedback on all menu items. Makes it feel more interactive. The email text in dark mode is a bit too dim. A little more contrast there would help. One more thing—you could separate “Log Out” and “Upgrade to PRO” slightly more from the rest. Just a bit of padding or a divider could improve scan-ability.
Overall, it looks solid. You’ve got the structure right, and the styling feels modern without being overdone. Just needs a few small tweaks to really polish it up. If you're thinking mobile or interaction states next, I’d be curious to see how you’d carry this forward.
Hi Nicholas,
This dropdown UI stands out with its clean design and seamless light/dark mode switch. The attention to readability is clear and makes the experience feel polished. Introducing a stronger hover effect could make interactions feel even more intuitive. Nicely done—really solid work!
Nice work on the dropdown! It looks clean and simple. I like that you added both light and dark modes—it’s very useful. The text is easy to read, and everything is in the right place.
The "Upgrade to PRO" button looks great with the soft gradient. It really catches the eye.
If you want to make it even better, you could add a small hover effect when someone moves the mouse over the items. It will feel more fun and smooth.
Great job! Keep going—you’re doing really well! 👍
You might also like

FOURm - Landing Page for High-Conversion Fitness Startup

Security Expert Group — Web & Brand Identity Redesign

Digital Banking: Empathy Map for Kendra

Fresh Baladi | Real-Time Bakery Alerts App | UI UX Case Study

Rummly - A zero-friction freecycle app
