Skip to main content
CSS-Tricks
  • Articles
  • Videos
  • Almanac
  • Newsletter
  • Guides
  • Books
Search Account

Articles Tagged
dropdown

6 Articles
{
,

}
Direct link to the article Stop Using “Dropdown”
dropdown

Stop Using “Dropdown”

Direct Link

Adrian Roselli notes that it might actually mean:

  • A <select> menu
  • An ARIA Listbox, Combobox, Menu, or Disclosure Widget
  • An input with a <datalist>
  • An input with autocomplete
  • A <details><summary> block
  • An accordion
  • Flyout navigation

In my own usage, I …

Avatar of Chris Coyier
Shared by Chris Coyier on Mar 16, 2020
Direct link to the article Menus with “Dynamic Hit Areas”
dropdown menu SVG

Menus with “Dynamic Hit Areas”

Flyout menus! The second you need to implement a menu that uses a hover event to display more menu items, you’re in tricky territory. For one, they should work with clicks and taps, too. Without that, you’ve broken the …

Avatar of Chris Coyier
Chris Coyier on Jul 3, 2019
Direct link to the article Container-Adapting Tabs With “More” Button
dropdown navigation priority+

Container-Adapting Tabs With “More” Button

Or the priority navigation pattern, or progressively collapsing navigation menu. We can name it in at least three ways.

There are multiple UX solutions for tabs and menus and each of them have their own advantages over another, you just …

Avatar of Osvaldas Valutis
Osvaldas Valutis on May 2, 2018
Direct link to the article Solved with CSS! Dropdown Menus
accessibility dropdown navigation

Solved with CSS! Dropdown Menus

A common UI pattern that we see on the web are dropdown menus. They’re used to display related information in pieces, without overwhelming the user with buttons, text, and options. Somewhere that we see these a lot is inside of headers or navigation areas on websites.

Let’s see if we can make one of these menus with CSS alone.

Avatar of Una Kravets
Una Kravets on Dec 13, 2020
dropdown navigation priority+ scrolling

A Priority+ Navigation With Scrolling and Dropdowns

The following is a guest post by Micah Miller-Eshleman. Micah designed a variation of the “Priority+ Navigation” concept and uses it in production at the college he works for. I always dig a show & tell behind the thinking …

Avatar of Micah Miller-Eshleman
Micah Miller-Eshleman on Apr 7, 2017
dropdown

Dropdown Menus with More Forgiving Mouse Movement Paths

This is a fairly old UX concept that I haven’t heard talked about in a while, but is still relevant in the case of multi-level dropdown menus. A fine-grained pointer like a mouse sometimes has to travel through pretty narrow …

Avatar of Chris Coyier
Chris Coyier on Jun 21, 2019
Our Learning Partner
Frontend Masters logo
Frontend Masters

Need front-end development training?

Frontend Masters is the best place to get it. They have courses on all the most important front-end technologies, from React to CSS, from Vue to D3, and beyond with Node.js and Full Stack.

CSS-Tricks is created by Chris and a team of swell people.

Keep up to date on web dev

with our hand-crafted weekly newsletter

Tech
  • WordPress (CMS)
  • Jetpack (Search, Backup)
  • WooCommerce (eCommerce)
  • Local (Development)
Hosting
  • Flywheel
Family
  • CodePen
  • ShopTalk Show
Minisites
  • The Power of Serverless
  • Upcoming Conferences
  • Coding Fonts
Contact
  • Email
  • Sponsorship Info
  • Guest Writing
Buy
  • Posters & Swag
  • Membership
Follow
  • Twitter
  • Instagram
  • YouTube
  • CodePen
  • GitHub
  • iTunes
  • RSS
Back to Top