Navigation Bar with Explore Dropdown

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

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

A well-designed navigation bar with an explore dropdown menu can significantly enhance your website's usability and aesthetics. This guide will walk you through the steps to create a navigation bar with an explore dropdown using HTML and CSS. Follow these instructions to copy the code snippet, link the required CSS files, and personalize the navigation bar to suit your website's design.

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 navigation bar with an explore 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 navigation bar and 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 navigation bar with an explore 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

Logo and Site Title

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

<img>: Displays the logo of the site. The source URL points to the favicon of the site.
<h1>Pexels</h1>: Displays the name of the site in an <h1> heading, making it the main title.

Navigation Links

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

<ul class="links">: An unordered list containing the main navigation links.
<li>: List items representing individual links or dropdowns.
<a>Upload</a>: A link to the "Upload" page.
<a>Licence</a>: A link to the "Licence" page.
Dropdown Menu:
- <div class="dropdown">: Container for the dropdown.
- <a>: Link for the dropdown with a nested paragraph and an icon.
- <p>Explore</p>: Text label for the dropdown link.
- <span class="material-symbols-outlined">expand_more</span>: Icon indicating that it is a dropdown.
<div class="menu">: Container for the dropdown menu items.
- <a>Discover Photos</a>: Link to the "Discover Photos" page.
- <a>Popular Searches</a>: Link to the "Popular Searches" page.
- <a>Leaderboard</a>: Link to the "Leaderboard" page.
- <a>Challenges</a>: Link to the "Challenges" page.
- <a>Free Videos</a>: Link to the "Free Videos" page.
- <a>Pexels Blog</a>: Link to the "Pexels Blog" page.

Join Button

<button type="button">Join</button>

<button type="button">Join</button>: A button inviting users to join the site.

CSS Code

Global Styles

body

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

font-family: Sets the fonts "Euclid Circular A" and "Poppins" as the primary fonts.
color: Sets the text color to #f7f7f7 (a very light gray).
background: Uses a CSS variable for the background color, var(--color-background).

:root

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

Defines CSS variables:

--color-border: Sets a border color with 16% opacity.
--color-background: Sets a background color to a dark gray (#181818).

Navigation Bar Styles

nav

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

position: fixed: Fixes the navigation bar at the top of the page.
top, left, right: Ensures the nav bar spans the full width of the page.
height: Sets the height to 72px.
display: flex: Uses flexbox for layout.
align-items: center: Vertically centers the items within the nav bar.
padding: 0 16px: Adds horizontal padding.
border-bottom: Adds a bottom border with 10% opacity.

nav > img

nav > img {
  width: 40px;
}

Sets the width of the image to 40px.

nav > h1

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

font-weight: Sets the font weight to 400 (normal).
font-size: Sets the font size to 20px.
margin-left: Adds a left margin of 10px.

nav > button

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

background: Sets the background color to a greenish hue (#08a081).
height: Sets the height to 40px.
border-radius: Rounds the corners with a 6px radius.
border: Removes the border.
color: Sets the text color to #f7f7f7.
font-family: Inherits the font from the parent element.
padding: Adds horizontal padding of 14px.
font-size: Sets the font size to 16px.

Links List Styles

ul.links

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

list-style: Removes the default list styling.
margin: Sets the margins; auto on the right pushes the list to the left.
padding: Removes the default padding.
display: flex: Uses flexbox for layout.
align-items: center: Vertically centers the items.
gap: Sets a gap of 20px between items.

Dropdown Styles

div.dropdown

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

position: relative: Positions the dropdown relative to its normal position.
cursor: pointer: Changes the cursor to a pointer when hovering over the dropdown.

dropdown > a

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

display: flex: Uses flexbox for layout.
align-items: center: Vertically centers the items.
gap: Sets a gap of 2px between items.
height: Sets the height to 72px.

dropdown > a > span

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

font-size: Sets the font size to 20px.
color: Sets the color with 24% opacity.
translate: Moves the element 2px down.

Dropdown Menu Styles

div.menu

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

position: absolute: Positions the menu absolutely within the dropdown.
top: Positions the menu 60px from the top of the dropdown.
right: Positions the menu 20px from the right of the dropdown.
width: Sets the width to 180px.
border-radius: Rounds the corners with a 10px radius.
border: Uses the border color variable.
padding: Adds vertical padding.
display: grid: Uses grid layout.
background: Sets the background color using the variable.
opacity: Initially hides the menu.
visibility: Initially hides the menu.
transition: Adds a transition effect for visibility and opacity.

menu::before

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

Creates a small triangle on the top-right corner of the menu to indicate it belongs to the dropdown.
background: inherit: Inherits the background color from the menu.
border-top, border-right: Adds borders to the top and right sides.
rotate: -45deg: Rotates the element to form a triangle.

Hover Effect on Dropdown

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

When the dropdown is hovered, the menu becomes visible and fully opaque.

menu > a

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

padding: Adds padding around the links.
font-size: Sets the font size to 14px.

Hover Effect on Menu Links

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

Changes the background color of the links when hovered.