3+ Dropdown Components - Vanilla CSS

Dropdowns, also known as dropdown menus or select boxes, are user interface elements used on websites to present a list of options in a compact and organized manner. When users click on a dropdown, a list of options "drops down" from the menu, allowing them to select one option from the list. Dropdowns are commonly used in forms and navigation menus to streamline selections and conserve screen space. In this collection, you'll find various designs for dropdown components that you can easily incorporate into your website's design. Whether you need basic dropdowns or more visually appealing styles, these components are designed to simplify user selections and provide a seamless browsing experience for your website visitors.

Customizable Settings Dropdown

Tailor your website experience with a customizable settings dropdown menu. Learn how to implement a dropdown that allows users to adjust and personalize their settings.

Author: Joe

Preview
Code

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />


<div class="dropdown">
  <div class="content">
    <span class="material-symbols-outlined"> settings </span>
    <p>Settings</p>
    <span class="material-symbols-outlined"> expand_more </span>
  </div>
  <button type="button"></button>
  <div class="menu">
    <a>
      <span class="material-symbols-outlined"> lock </span>
      <p>Account</p>
    </a>
    <a>
      <span class="material-symbols-outlined"> credit_card </span>
      <p>Payments</p>
    </a>
    <a>
      <span class="material-symbols-outlined"> archive </span>
      <p>Archive</p>
    </a>
  </div>
</div>

* {
  box-sizing: border-box;
}

body {
  display: grid;
  place-items: center;
  margin: 0;
  height: 100vh;
  font-family: "Euclid Circular A", "Poppins";
  background: #45494e;
}

.dropdown {
  translate: 0 -20px;
  position: relative;
  cursor: pointer;
}

.dropdown > button {
  width: 170px;
  height: 60px;
  border: 0;
  border-radius: 6px;
  font-family: inherit;
  font-size: 17px;
  background: #3c3c3c;
}

.dropdown > .content {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #f7f7f7;
}

.dropdown > .content::after {
  content: "";
  position: absolute;
  bottom: 6px;
  right: 10%;
  width: 80%;
  height: 1px;
  transform: scaleX(0);
  background: rgb(255 255 255 / 30%);
  transition: 0.3s;
}

.dropdown:hover > .content::after {
  transform: scaleX(1);
}

.dropdown > .content > span:first-child {
  font-size: 20px;
}

.dropdown > .content > span:last-child {
  margin-left: auto;
}

.dropdown > .content > span:last-child {
  transition: 0.3s;
}

.dropdown:hover > .content > span:last-child {
  rotate: -180deg;
}

.dropdown > .menu {
  position: absolute;
  z-index: 1;
  top: -6px;
  left: 50%;
  display: grid;
  width: 110%;
  padding: 70px 0 6px;
  border-radius: 6px;
  translate: -50% 0;
  visibility: hidden;
  opacity: 0;
  scale: 0.85;
  background: linear-gradient(#ea8d8d, #a890fe);
  transition: 0.3s;
}

.dropdown:hover > .menu {
  visibility: visible;
  opacity: 1;
  scale: 1;
}

.dropdown > .menu > a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #f7f7f7;
  font-size: 14px;
  padding: 0 24px;
}

.dropdown > .menu > a:hover {
  background: rgb(0 0 0 / 10%);
}

.dropdown > .menu > a > span {
  font-size: 20px;
}

```
No need of JavaScript
```

Navigation Bar with Explore Dropdown

Elevate user experience on your website with a navigation bar featuring an explore dropdown.

Author: Joe

Preview
Code

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />

<nav>
  <img src="https://www.frontendcomponent.com/favicon.ico" />
  <h1>Pexels</h1>
  <ul class="links">
    <li>
      <a>Upload</a>
    </li>
    <li>
      <a>Licence</a>
    </li>
    <li>
      <div class="dropdown">
        <a>
          <p>Explore</p>
          <span class="material-symbols-outlined"> expand_more </span></a
        >
        <div class="menu">
          <a>Discover Photos</a>
          <a>Popular Searches</a>
          <a>Leaderboard</a>
          <a>Challenges</a>
          <a>Free Videos</a>
          <a>Pexels Blog</a>
        </div>
      </div>
    </li>
  </ul>
  <button type="button">Join</button>
</nav>

body {
  font-family: "Euclid Circular A", "Poppins";
  color: #f7f7f7;
  background: var(--color-background);
}

:root {
  --color-border: rgb(255 255 255 / 16%);
  --color-background: #181818;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 72px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  border-bottom: 1px solid rgb(255 255 255 / 10%);
}

nav > img {
  width: 40px;
}

nav > h1 {
  font-weight: 400;
  font-size: 20px;
  margin-left: 10px;
}

nav > button {
  background: #08a081;
  height: 40px;
  border-radius: 6px;
  border: 0;
  color: #f7f7f7;
  font-family: inherit;
  padding: 0 14px;
  font-size: 16px;
}

.links {
  list-style: none;
  margin: 0 20px 0 auto;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 20px;
}

.dropdown {
  position: relative;
  cursor: pointer;
}

.dropdown > a {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 72px;
}

.dropdown > a > span {
  font-size: 20px;
  color: rgb(255 255 255 / 24%);
  translate: 0 2px;
}

.menu {
  position: absolute;
  top: 60px;
  right: -20px;
  width: 180px;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  padding: 8px 0;
  display: grid;
  background: var(--color-background);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
}

.menu::before {
  content: "";
  position: absolute;
  background: inherit;
  border-top: 1px solid var(--color-border);
  border-right: 1px solid var(--color-border);
  top: -7px;
  right: 22px;
  width: 12px;
  height: 12px;
  rotate: -45deg;
}

.dropdown:hover .menu {
  opacity: 1;
  visibility: visible;
}

.menu > a {
  padding: 12px 20px;
  font-size: 14px;
}

.menu > a:hover {
  background: rgb(255 255 255 / 4%);
}

```
No need of JavaScript
```

Google Inspired Dropdown

Elevate your website's navigation with dropdown menus inspired by Google's design. Learn how to implement dynamic dropdowns that provide users with easy access to additional options and content.

Author: Joe

Preview
Code

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap" rel="stylesheet" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" />

<nav>
  <div class="logo">
    <span class="material-symbols-outlined"> menu </span>
    <img src="https://raw.githubusercontent.com/frontend-joe/css-components/684c7ef341884b0aacd8b236792d36e3bb3ff3f1/dropdowns/dropdown-1/logo.svg" />
    <h2>Joemail</h2>
  </div>
  <div class="nav-right">
    <span class="material-symbols-outlined"> help </span>
    <span class="material-symbols-outlined"> settings </span>
    <div class="dropdown">
      <button class="material-symbols-outlined">apps</button>
      <div class="menu">
        <button>
          <img src="https://www.frontendcomponent.com/favicon.ico" />
          <span>Account</span>
        </button>
        <button>
          <span></span>
          <span>Search</span>
        </button>
        <button>
          <span style="background-position: 0 -1794px"></span>
          <span>Maps</span>
        </button>
        <button>
          <span style="background-position: 0 -3174px"></span>
          <span>YouTube</span>
        </button>
        <button>
          <span style="background-position: 0 -897px"></span>
          <span>Play</span>
        </button>
        <button>
          <span style="background-position: 0 -414px"></span>
          <span>News</span>
        </button>
        <button>
          <span style="background-position: 0 -2415px"></span>
          <span>Gmail</span>
        </button>
        <button>
          <span style="background-position: 0 -1104px"></span>
          <span>Meet</span>
        </button>
        <button>
          <span style="background-position: 0 -69px"></span>
          <span>Chat</span>
        </button>
        <button>
          <span style="background-position: 0 -1449px"></span>
          <span>Contacts</span>
        </button>
        <button>
          <span style="background-position: 0 0"></span>
          <span>Drive</span>
        </button>
        <button>
          <span style="background-position: 0 -759px"></span>
          <span>Calendar</span>
        </button>
        <button>
          <span style="background-position: 0 -2346px"></span>
          <span>Translate</span>
        </button>
        <button>
          <span style="background-position: 0 -966px"></span>
          <span>Photos</span>
        </button>
        <button>
          <span style="background-position: 0 -2070px"></span>
          <span>Ad Centre</span>
        </button>
        <button>
          <span style="background-position: 0 -1932px"></span>
          <span>Shopping</span>
        </button>
      </div>
    </div>
    <img src="https://www.frontendcomponent.com/favicon.ico" />
  </div>
</nav>

body {
  color: #f9f9f9;
  background: #121212;
  font-family: "Euclid Circular A", "Poppins";
}

* {
  box-sizing: border-box;
}

nav {
  position: fixed;
  top: 50%;
  left: 50%;
  border-radius: 6px;
  translate: -50% -90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 70%;
  height: 72px;
  padding: 0 20px;
  background: #1e1e1e;
  box-shadow: 0 0 20px rgb(0 0 0 / 6%);
}

.logo {
  display: flex;
  align-items: center;
}

.logo img {
  width: 36px;
  padding: 0;
  margin-left: 4px;
  margin-right: 6px;
}

span.material-symbols-outlined {
  display: grid;
  place-items: center;
  width: 40px;
  height: 72px;
  font-size: 24px;
}

nav h2 {
  font-size: 19px;
  font-weight: 400;
}

.nav-right > img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: contain;
  margin-left: 8px;
}

button {
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
}

.nav-right {
  display: flex;
  align-items: center;
}

.dropdown {
  cursor: pointer;
  position: relative;
  display: grid;
  place-items: center;
  height: 72px;
}

.dropdown > button {
  position: relative;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  background: transparent;
}

.dropdown > button::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  scale: 0.25;
  opacity: 0;
  background: rgb(255 255 255 / 8%);
  transition: 0.2s;
}

.dropdown:hover > button::before {
  scale: 1;
  opacity: 1;
}

.menu {
  overflow-x: hidden;
  overflow-y: auto;
  position: absolute;
  top: 64px;
  right: -20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: max-content;
  translate: 0 16px;
  width: 270px;
  max-height: 286px;
  padding: 10px;
  background: #2d2d2d;
  border-radius: 8px;
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  appearance: none;
}

.menu::-webkit-scrollbar {
  width: 15px;
}

.menu::-webkit-scrollbar-thumb {
  background: rgb(255 255 255 / 16%);
  border-radius: 10px;
  border: 4px solid transparent;
  background-clip: padding-box;
}

.dropdown:hover > .menu {
  opacity: 1;
  visibility: visible;
  translate: 0;
}

.menu > button {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 6px;
  font-family: inherit;
}

.menu > button > img {
  width: 64px;
  height: 64px;
  padding: 16px;
}

.menu > button > span:first-child {
  display: block;
  width: 64px;
  height: 64px;
  scale: 0.7;
  background-image: url(https://raw.githubusercontent.com/frontend-joe/css-components/main/dropdowns/dropdown-1/icons.png);
  background-position: 0 -3105px;
  background-size: 64px 3307px;
  background-repeat: no-repeat;
}

.menu > button > span:last-child {
  font-size: 12px;
  translate: 0 -12px;
}

```
No need of JavaScript
```

Simple Dropdown

Optimize user experience with our versatile dropdown menu UI component, designed for HTML and CSS.

Author: Admin

Preview
Code

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

.dropdown {
  position: relative;
  display: inline-block;
}

.dropbtn {
  background-color: #3498db;
  color: white;
  padding: 12px;
  border-radius: 5px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropdown-content {
  display: none;
  position: absolute;
  margin-top: 2px;
  left: -30%;
  border-radius: 5px;
  background-color: #3498db;
  min-width: 160px;
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: white;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {
  background-color: white;
  color: #3498db;
}

.dropdown:hover .dropdown-content {
  display: block;
}

```
No need of JavaScript
```