Gmail Inspired Navbar

Bring the efficiency of Gmail's navigation to your website with a Gmail-inspired navbar. Learn how to emulate Gmail's navbar design to improve navigation efficiency on your site.

Building a navigation bar inspired by Gmail's clean and functional design can greatly enhance the user experience of your website. This guide will walk you through the process of implementing a Gmail-inspired navbar using HTML, CSS, and JavaScript. You'll learn how to copy the provided code snippet, link the necessary CSS and JavaScript files, and customize the navbar to fit your specific requirements.

Step 1: Copy the Code Snippet

  • Start by copying the provided HTML, CSS, and JavaScript code snippet. This snippet includes the foundational structure, styles, and interactivity needed for the Gmail-inspired navbar. Simply select the code, click the copy button, and paste it into your HTML file.

Step 2: Link CSS and JavaScript Files

  • Ensure that the necessary CSS and JavaScript files are correctly linked in your HTML document. Add the following <link> tag in the <head> section to import the CSS styles and the Material Icons: 
    <link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
  • Include the following <script> tag at the end of your <body> section to import the JavaScript file: 
    <script src="script.js"></script>
  • Replace "styles.css" and "script.js" with the actual file names where you have saved your CSS and JavaScript code.

Step 3: Customize and Make it Yours

  • Personalize the navbar to match your website's aesthetics and functionality requirements. Adjust the CSS styles and JavaScript code to modify the navbar's appearance, behavior, and interactivity. Experiment with different colors, font sizes, and animations to create a seamless and engaging user experience.
By following these steps, you can implement and customize a Gmail-inspired navbar on your website using HTML, CSS, and JavaScript. Make the navbar your own by tweaking styles, animations, and functionalities to create a seamless and visually appealing interaction that enhances user engagement and usability.

Code Explanation

HTML Code

Burger Menu Button
<button onclick="toggleMenu()" class="burger material-symbols-outlined">
  menu
</button>
  • This is a button that triggers the toggleMenu() function when clicked.
  • The button has two classes: burger and material-symbols-outlined.
  • The button's content is the text "menu," which will likely be styled using a custom font or icon set provided by the material-symbols-outlined class.
Navigation Bar (<nav class="navbar">)
<nav class="navbar">
  • This is the main container for the navigation bar.
Logo Section
<div class="logo">
  <img src="https://raw.githubusercontent.com/frontend-joe/css-navbars/d296e62eb289784b7ffa22dedc5da7a9c8f471dc/navbar-6/logo.svg" />
  <span>Gmail</span>
</div>
  • The logo section contains an image (<img>) and a text span (<span>).
  • The image source is a URL pointing to a logo, and the span contains the text "Gmail."
Search Bar Section
<div class="search">
  <span class="material-symbols-outlined"> search </span>
  <input
    spellcheck="false"
    type="text"
    class="search"
    id="search"
    placeholder="Search mail"
  />
</div>
  • This section contains a search icon and a search input field.
  • The search icon is styled with the class material-symbols-outlined and contains the text "search."
  • The input field is of type text with a placeholder "Search mail," no spellcheck, and it uses the class search and id search.
Navigation Buttons
<nav>
  <button class="material-symbols-outlined">help</button>
  <button class="material-symbols-outlined">settings</button>
  <button class="material-symbols-outlined">apps</button>
  <img src="https://www.frontendcomponent.com/favicon.ico" />
</nav>
  • This nested <nav> element contains several buttons and an image.
  • Each button uses the class material-symbols-outlined and contains text for different icons: "help," "settings," and "apps."
  • The image tag contains a link to a favicon.

CSS Code

Universal Selector
* {
  box-sizing: border-box;
}
  • This sets the box-sizing property to border-box for all elements, which includes padding and border in the element's total width and height.
Body Styles
body {
  background: #e6edf2;
  font-family: "Poppins";
}
  • Sets the background color of the body to #e6edf2.
  • Sets the font family of the body to "Poppins".
Button Styles
button {
  display: grid;
  place-items: center;
  width: 40px;
  height: 72px;
  border: 0;
  padding: 0;
  font-family: inherit;
  background: transparent;
  color: #585c62;
  cursor: pointer;
}
  • Buttons are displayed as a grid to center their content.
  • They have specific dimensions (40px by 72px), no border, and no padding.
  • They inherit the font family from the body, have a transparent background, and a text color of #585c62.
  • The cursor is set to pointer to indicate they are clickable.
Burger Button Styles
.burger {
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  width: 72px;
}
  • The burger button is fixed in position with a high z-index to ensure it appears above other elements.
  • It is placed at the top-left of the screen and has a width of 72px.
Navbar Styles
.navbar {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  height: 100%;
  padding: 20px 24px 0;
  translate: -100% 0;
  display: flex;
  gap: 10px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  background: #ffffff;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transition-property: translate, opacity, visibility;
  transition-duration: 0.5s;
}

body.open .navbar {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
}
  • The navbar is fixed in position with a z-index of 1, starting at the top-left and spanning the full height of the screen.
  • It is initially translated off-screen to the left and hidden (opacity 0 and visibility hidden).
  • When the body has the open class, the navbar becomes visible and moves into view.
Responsive Navbar Styles
@media (width >= 500px) {
  .navbar {
    translate: 0 0;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
    width: 100%;
    height: 72px;
    padding: 0 0 0 72px;
  }
}

@media (width >= 600px) {
  .navbar {
    opacity: 1;
    visibility: visible;
  }
}
  • For screens 500px or wider, the navbar changes to a row layout, aligns items center, justifies content to the end, and spans the full width of the screen with a height of 72px.
  • For screens 600px or wider, the navbar is always visible.
Logo Styles
.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 108px;
  padding-right: 10px;
  margin-bottom: 10px;
}

@media (width >= 500px) {
  .logo {
    margin-bottom: 0;
  }
}

.logo img {
  width: 32px;
}

.logo span {
  font-size: 18px;
  color: #606468;
}
  • The logo section displays flex, centers its items, and has a gap of 8px between them.
  • The logo has a width of 108px, padding on the right, and a bottom margin that is removed on screens 500px or wider.
  • The logo image has a width of 32px, and the text span has a font size of 18px and color #606468.
Search Bar Styles
.search {
  margin: 0 auto;
  position: relative;
  color: #888989;
}
@media (width >= 500px) {
  .search {
    flex: 1 1 auto;
  }
}
@media (width >= 550px) {
  .search {
    flex: 0 0 auto;
  }
}
.search span {
  position: absolute;
  top: 50%;
  left: 16px;
  translate: 0 -50%;
  z-index: 1;
  font-size: 20px;
  color: inherit;
}
.search input {
  width: 100%;
  height: 44px;
  padding-left: 46px;
  font-size: 16px;
  border: 0;
  border-radius: 8px;
  background: #eff1f2;
  color: inherit;
  font-family: inherit;
  outline: none;
}
@media (width >= 650px) {
  .search input {
    width: 280px;
  }
}
  • The search bar is centered and positioned relative with a color of #888989.
  • The search icon inside the search bar is absolutely positioned.
  • The input field spans the full width, has specific padding, and is styled with no borders and a rounded background.
Nested Navbar Navigation Styles
.navbar nav {
  display: flex;
  align-items: center;
  padding-right: 20px;
}
.navbar nav img {
  flex: 0 32px;
  width: 32px;
  height: 32px;
  margin-left: 8px;
}
  • The nested nav within the navbar displays its items in a row, aligns them center, and adds padding on the right.
  • The images inside this nested nav have fixed dimensions and margin on the left.

JavaScript Code

Function Declaration:
const toggleMenu = () => {
  • const toggleMenu: Declares a constant named toggleMenu, which is a function.
  • () => { ... }: Defines the function using arrow function syntax.
Function Body:
document.body.classList.toggle("open");
  • document.body: Refers to the <body> element of the HTML document.
  • classList: Provides access to the list of classes of the <body> element.
  • toggle("open"): Toggles the presence of the class "open" on the <body> element.