Don’t Forget the Simple Stuff: The Easiest Way of Making a Dropdown is PURE HTML

#beginners #tutorial #javascript #webdev

We all love our frameworks—React, Vue, Svelte—and for good reason. They turn messy code into elegant components, manage tricky state, and give us tools to build large-scale apps fast.

But sometimes, in our excitement to drop the next npm install, we forget the basics: HTML and Vanilla JavaScript can handle a surprising amount of everyday functionality.

Consider a simple dropdown

Many devs think they need a UI library like Bootstrap or Shadcn for interactive components like dropdowns. Or they’ll create their own React component with props, states, and a mini state machine.

But there’s a native HTML solution: <details> and <summary>. That’s right, one tag handles toggling, display, and accessibility behind the scenes—no framework or even JavaScript required.

Check out how simple it is using html <summary> and <details> and a bit of styling:

Get a copy here.

https://share.webcrumbs.org/vJO5vP
(You can change it and I won't know)

<div class="w-[300px] bg-white rounded-lg shadow-lg">
  <details class="relative">
    <summary class="cursor-pointer py-2 px-4 border border-neutral-300 rounded-md text-neutral-950">
      Select Country
    </summary>
    <ul class="absolute top-full left-0 w-full bg-white border border-neutral-300 rounded-md mt-2 z-10">
      <li class="flex items-center gap-2 px-4 py-2 hover:bg-neutral-100 cursor-pointer">
        <img
          src="https://flagcdn.com/us.svg"
          alt="United States"
          class="object-contain w-[20px] h-[15px]"
        />
        United States
      </li>
      <li class="flex items-center gap-2 px-4 py-2 hover:bg-neutral-100 cursor-pointer">
        <img
          src="https://flagcdn.com/ca.svg"
          alt="Canada"
          class="object-contain w-[20px] h-[15px]"
        />
        Canada
      </li>
      <li class="flex items-center gap-2 px-4 py-2 hover:bg-neutral-100 cursor-pointer">
        <img
          src="https://flagcdn.com/gb.svg"
          alt="United Kingdom"
          class="object-contain w-[20px] h-[15px]"
        />
        United Kingdom
      </li>
      <li class="flex items-center gap-2 px-4 py-2 hover:bg-neutral-100 cursor-pointer">
        <img
          src="https://flagcdn.com/au.svg"
          alt="Australia"
          class="object-contain w-[20px] h-[15px]"
        />
        Australia
      </li>
    </ul>
  </details>
</div>

Here's how I got it

I went to Frontend AI and asked for a dropdown

Got the results in seconds.

This isn’t a ban on frameworks.

They make big apps maintainable and unify architectural patterns.

But next time you reach for your favorite library, do a quick check: Is there a simpler, built-in alternative?

A good check is just asking Frontend AI. If there's a simpler way, it will get it right away. Here's the link, if you want to try.

By mixing in the right HTML elements and maybe a splash of Vanilla JavaScript, you might end up with code that’s faster, smaller, and just as polished.

And less dependent on third-party libraries.

Bottom line

Frameworks rock, but sometimes you can skip the extra overhead. Embrace the power of web standards first—you might be surprised how much they can do!!

What else have you built with simple HTML and JS that other people need libraries?