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.

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
```

A sleek dropdown menu inspired by Google's design can enhance your website's user experience by providing a clean and efficient way to navigate. This guide will walk you through creating a Google-inspired dropdown menu using HTML and CSS. Follow these steps to copy the provided code snippet, link the required CSS files, and customize the dropdown to match your website's branding.

Step 1: Copy the Code Snippet

Start by copying the provided HTML and CSS code snippet below. This snippet includes the foundational structure and styles for the Google-inspired dropdown menu. Select the code, copy it, and paste it into your respective HTML and CSS files.

Step 2: Link CSS Files

Ensure the CSS file is correctly linked in your HTML document. Add the following <link> tags within the <head> section to import the CSS styles and the Google Material Symbols:
```
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0" rel="stylesheet">
```

Step 3: Customize and Make it Yours

Personalize the dropdown menu to match your website's branding and functionality. Adjust the CSS styles to modify the dropdown's appearance, colors, and interactions. Experiment with different layouts, fonts, and styles to create a unique and user-friendly navigation experience.

By following these steps, you can implement and customize a Google-inspired dropdown menu on your website using HTML and CSS. Tailor the menu to your specific needs and improve your site's navigation with this sleek and modern component.

Code Explanation

HTML Code

nav Element

The <nav> element represents the navigation bar.

Logo Section

<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="logo">: Container for the logo section.
<span class="material-symbols-outlined"> menu </span>: Icon representing a menu button, likely to toggle a sidebar or similar.
<img src="...">: Image element displaying the logo.
<h2>Joemail</h2>: Heading for the website or application name.

Navigation Icons and Dropdown Menu

<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>
      <!-- More buttons with icons and text -->
    </div>
  </div>
  <img src="https://www.frontendcomponent.com/favicon.ico" />
</div>

<div class="nav-right">: Container for the right side of the navigation bar.
<span class="material-symbols-outlined"> help </span>: Help icon.
<span class="material-symbols-outlined"> settings </span>: Settings icon.
<div class="dropdown">: Container for the dropdown menu.
- <button class="material-symbols-outlined">apps</button>: Button to toggle the dropdown menu, represented by an "apps" icon.
- <div class="menu">: Container for the dropdown menu items.
- <button>: Each button within the dropdown menu.
- <img src="...">: Icon for the menu item.
- <span>Account</span>: Text label for the menu item.
- Additional buttons with various icons and labels for different services (e.g., Search, Maps, YouTube, Play, News, Gmail, etc.).

Image Icon at the End

<img src="https://www.frontendcomponent.com/favicon.ico" />

<img>: Image element, likely representing a user profile or another icon.

CSS Code

Global Styles

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

* {
  box-sizing: border-box;
}

Sets the body text color, background color, and font family for the entire page.
Applies box-sizing: border-box globally to ensure padding and border are included in the element's total width and height.

Navigation (nav) Styles

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%);
}

Positions the navigation bar fixed at the center of the viewport.
Uses flexbox to align items horizontally with space between them.
Applies a background color, border radius, padding, and box shadow for styling.

Logo Styles

.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;
}

Aligns logo and text vertically centered using flexbox.
Styles the logo image, adjusting its width and margins.
Styles the symbol icons (span.material-symbols-outlined) for consistent size and alignment.
Styles the heading (nav h2) with a specific font size and weight.

Right Side of Navigation (nav-right) Styles

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

.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;
}

Aligns items on the right side of the navigation bar using flexbox.
Styles images (<img>) within .nav-right with specific dimensions and border-radius.
Styles buttons with transparent backgrounds, no border, and inherit color, making them look like icons.

Dropdown Menu Styles

.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;
}

Styles the dropdown button and its hover effect using pseudo-elements for a background overlay.
Positions the dropdown menu (<div class="menu">) absolutely relative to its parent.
Configures scrolling and grid layout for menu items (<button>) with icons and text.
Defines scrollbar appearance within the dropdown menu using pseudo-elements for customization.

Menu Item Styles

.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;
}

Styles each menu button with a flexbox for centering items vertically and horizontally.
Sizes and positions images within menu buttons.
Styles the first child span for each button, configuring background images for icons.
Adjusts text styling for the second child span within each button.