Beautiful form design by all means:

- “Required” dropdown in which you can select “I prefer not to respond”
- Asking for details when you choose not to give a reason

Attention! You have 1 unread button

Thanks @vanadium23 for the picture

Dude, a switch makes for a terrible dropdown control

Thanks @HID_DEVICE for the video

Profile is a link. Wolt+ is a submenu. Language is a dropdown menu. Contact Support is a link again. Log out is a button.

Welcome to 2025, where nothing has affordances and everything can look like anything else.

If you implement a dropdown menu, make ONE and shove everything into it. No one will remember how you decided to split it between four dropdowns.

Thanks Joe for the video

Dropdowns that take you to a different page...

Thanks Fuchen for the video

Made this a couple of years ago on @codepen but for some reason never shared it: a hopefully accessible base for a smooth elastic dropdown https://codepen.io/thebabydino/pen/qBJENKM

Based on a thing at a now dead link which did something of the kind with a huge div soup.

Jeez... Draw some borders (it’s a dropdown)

Thanks Fuchen for the video

I am looking for a lightweight #ui #compontent library for #react #nextjs , ideally compatible with #tailwind #tailwindcss only with basic components like #dropdown #dialog #modal #popover #button #checkbox
any tips?

Custom dropdowns just got a whole lot easier (finally!)
by @wesbos.com

#dropdown #css #webdev

https://youtu.be/MA9WAHEEfGM

Artículo acerca de anchor positioning para posicionar elementos como dropdowns dentro del viewport y que no se salgan con css.
Tether elements to each other with CSS anchor positioning  |  Blog  |  Chrome for Developers.
https://developer.chrome.com/blog/tether-elements-to-each-other-with-css-anchor-positioning ·
#css #dropdown #popover #positioning #scroll

Artículo acerca de popover API en html para hacer tooltips o dropdowns sólo con html y también con js sencillo.
Future of CSS: Popover API - DEV Community.
https://dev.to/link2twenty/future-of-css-popover-api-3ba0
##html #css #dropdown #modal #popover #tooltip #article

The Lowdown on Dropdowns in HTML & CSS
by David Darnes @darn.es @daviddarnes at @zeroheight
#webdev #dropdown

https://zeroheight.com/blog/the-lowdown-on-dropdowns-in-html-css/

Самая сложная директива Taiga UI

Часто необходимо знать, с какой областью страницы взаимодействует пользователь. Например, если вы создаете выпадающее меню, нужно понять, когда его закрывать. Наивная реализация будет просто слушать клики и проверять, произошел ли клик вне элемента выпадающего меню. Но мышь — это не единственный способ взаимодействия, не стоит забывать и про клавиатуру. Кроме того, выпадающее меню может иметь вложенную многоуровневую структуру, что делает простую проверку цели клика проблематичной. В этой статье исследуем директиву ActiveZone — подход, который мы использовали в библиотеке компонентов Taiga UI. Она полагается на два моих любимых инструмента Angular: Dependency Injection и RxJS . Нам понадобится глубокое понимание нативных событий DOM. Как бы ни был далек Angular от чистого JavaScript и DOM, он все равно полагается на старые добрые Web API, поэтому важно качать свои знания и в области ванильного frontend.

https://habr.com/ru/companies/tbank/articles/863842/

#Development #Opportunities
CSS anchor positioning is disruptive · “It’s going to unlock some surprising new layouts.” https://ilo.im/160y47

_____
#ModernCSS #Layout #Dropdown #AnchorPositioning #Polyfill #Chrome #Browser #WebDev #CSS

Google, please, make up your mind. Does Save button live in the menu or not? I prefer that it doesn’t, but if it does, make it always the case, otherwise I can’t form a habit

Ah yes. The famous UI component, drop... input?

#Development #Techniques
Drop-down menu with modern CSS · CSS now does what once needed tricky scripts https://ilo.im/15zx3d

_____
#ModernCSS #Navigation #Menu #DropDown #Accessibility #WebDev #Frontend #HTML #CSS #Sass