Searchable Navbar

Enhance user experience on your website with a searchable navbar. Learn how to integrate a search functionality into your navbar, allowing users to quickly find the content they need.

Create an interactive searchable navbar for your website using HTML, CSS, and JavaScript. This comprehensive guide will walk you through the process of integrating and customizing a responsive navigation bar with search functionality, ensuring an intuitive user experience on both desktop and mobile devices.

Step 1: Copy the Code Snippet

  • Start by copying the provided HTML, CSS, and JavaScript code snippet for the searchable navbar. This snippet includes the foundational structure, styles, and basic functionality needed to create a responsive navbar with a search bar. Select the code, click the copy button, and paste it into your HTML file where you want the navbar to appear.

Step 2: Link CSS, Unicons, and JavaScript Files

  • Ensure the necessary CSS, Unicons, and JavaScript files are linked correctly in your HTML document. Add the following <link> tags in the <head> section to import the CSS styles and Unicons: 
    <link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
  • 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 searchable navbar to match your website's aesthetics and functionality requirements. Adjust the CSS styles and JavaScript code to modify the navbar's appearance, search input behavior, and interaction features. Experiment with different styles, icons, and responsive design techniques to create a unique and engaging navigation experience.

By following these steps, you can implement and customize a searchable navbar on your website using HTML, CSS, and JavaScript. Make the navbar component your own by adjusting styles, adding custom icons, and enhancing the search functionality to create a user-friendly and visually appealing navigation experience.

Code Explanation

HTML Code

<nav class="navbar">
  • This is the main container for the navigation bar. It uses a <nav> element, which is semantically appropriate for navigation sections in HTML.
  • The class="navbar" applies styling defined in the associated CSS.
<input spellcheck="false" type="text" class="search" id="search" placeholder="e.g. Nike Trainers" />
  • <input>: This is an HTML input element where users can type text.
  • spellcheck="false": Disables spell checking for this input field.
  • type="text": Specifies that this is a text input field.
  • class="search": Applies the CSS styles defined for the search class to this input.
  • id="search": Provides a unique identifier for the input field, which can be used to reference it in JavaScript or CSS.
  • placeholder="e.g. Nike Trainers": Displays a placeholder text inside the input field when it is empty, giving a hint to the user about what to type.
<button onclick="toggleSearch()" type="button" class="search-toggle"></button>
  • <button>: This is a button element.
  • onclick="toggleSearch()": When this button is clicked, it triggers a JavaScript function named toggleSearch(). This function is expected to handle the logic for toggling the visibility or state of the search input.
  • type="button": Specifies that this is a button that does not submit a form (which would be the default behavior if it were inside a form).
  • class="search-toggle": Applies the CSS styles defined for the search-toggle class to this button.
<nav class="navbar-menu">
  • This is a nested <nav> element that acts as a container for the navigation menu buttons.
  • The class="navbar-menu" applies styling defined in the associated CSS for the navbar-menu class.
<button type="button" class="uil uil-bag active"></button>
  • <button>: This is a button element.
  • type="button": Specifies that this is a button that does not submit a form.
  • class="uil uil-bag active": Applies multiple CSS classes to this button.
  • uil: Unicons icon library.
  • uil-bag: Specifies the bag icon from the Unicons library.
  • active: Indicates this button is currently active or selected.
<button type="button" class="uil uil-laptop"></button>
  • Similar to the previous button, but it uses the uil-laptop class to display a laptop icon.
<button type="button" class="uil uil-envelope"></button>
  • Similar to the previous buttons, but it uses the uil-envelope class to display an envelope icon.

CSS Code

Global Styles
* {
  box-sizing: border-box;
}
  • This sets the box-sizing property to border-box for all elements. This means the width and height of elements will include padding and border, making it easier to control the size of elements.
body {
  background: #3b3d43;
}
  • Sets the background color of the body to a dark grey (#3b3d43).
Button Styles
button {
  border: 0;
  padding: 0;
  font-family: inherit;
  background: transparent;
  color: inherit;
  cursor: pointer;
}
  • Removes default border and padding.
  • Inherits the font family from its parent.
  • Sets the background to be transparent and color to inherit from its parent.
  • Changes the cursor to a pointer when hovering over the button, indicating it is clickable.
Navbar Styles
.navbar {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
  height: 72px;
  padding: 0 20px;
  background: #19191c;
  color: #f9f9f9;
}
  • Positions the navbar fixed at the top of the page.
  • Sets z-index: 1 to ensure it stays above other content.
  • Stretches the navbar across the full width of the viewport and sets its height to 72px.
  • Uses flexbox to align its child elements center vertically and justify content to the end.
  • Adds padding of 20px on the left and right.
  • Sets the background color to a dark grey (#19191c) and text color to white (#f9f9f9).
@media only screen and (min-width: 600px) {
  .navbar {
    justify-content: space-between;
  }
}
  • Changes the justification of the navbar content to space-between on screens wider than 600px, spacing out the items.
Search Input Styles
.search {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  height: 44px;
  padding-left: 46px;
  font-size: 16px;
  border: 0;
  border-radius: 8px;
  background: #3b3d43;
  color: #f9f9f9;
  font-family: "Poppins";
  visibility: hidden;
  opacity: 0;
  outline: none;
}
  • Positions the search input relative to its container.
  • Sets its height to 44px and adds padding on the left to accommodate an icon.
  • Sets a font size of 16px and uses the "Poppins" font.
  • Removes the border and rounds the corners with a border-radius of 8px.
  • Sets the background color to dark grey (#3b3d43) and text color to white.
  • Initially hides the input with visibility: hidden and opacity: 0.
.search:focus {
  background: #494c54;
}
  • Changes the background color when the input is focused.
body.open .search {
  position: fixed;
  top: 0;
  left: 0;
  opacity: 1;
  border-radius: 0;
  visibility: visible;
  background: #19191c;
  width: 100%;
  height: 72px;
  margin: 0;
  padding-left: 76px;
}
  • When the body has the class open, the search input becomes fixed at the top of the page, spanning the full width and height of the navbar. It also becomes visible and fully opaque.
@media only screen and (min-width: 600px) {
  .search {
    opacity: 1;
    visibility: visible;
    flex: 0 0 360px;
    margin-right: auto;
    transition-property: opacity, visibility;
    transition-duration: 0.3s;
  }
}
  • On screens wider than 600px, the search input becomes visible and opaque. It also has a fixed width of 360px and an automatic right margin, with transitions for opacity and visibility over 0.3 seconds.
.search::placeholder {
  color: #939393;
}
  • Sets the placeholder text color to light grey (#939393).
Search Toggle Button Styles
.search-toggle {
  position: fixed;
  left: 16px;
  z-index: 2;
  width: 40px;
  height: 40px;
  background-image: url("https://raw.githubusercontent.com/frontend-joe/css-navbars/d296e62eb289784b7ffa22dedc5da7a9c8f471dc/navbar-5/search.svg");
  background-repeat: no-repeat;
  background-position: center;
  transition: 0.3s;
}
  • Positions the search toggle button fixed at the left with a higher z-index than the navbar.
  • Sets its dimensions to 40x40 pixels.
  • Uses a background image for the search icon, centered and not repeated.
  • Adds a transition of 0.3 seconds for smooth changes.
body.open .search-toggle {
  background-image: url("https://raw.githubusercontent.com/frontend-joe/css-navbars/d296e62eb289784b7ffa22dedc5da7a9c8f471dc/navbar-5/close.svg");
}
  • When the body has the class open, the background image of the search toggle button changes to a close icon.
@media only screen and (min-width: 600px) {
  .search-toggle {
    translate: 10px 0;
    scale: 0.65;
    pointer-events: none;
  }
}
  • On screens wider than 600px, the search toggle button is translated slightly and scaled down. It also disables pointer events.
Navbar Menu Styles
.navbar-menu {
  display: flex;
}
  • Uses flexbox to layout its child elements.
.navbar-menu > button {
  position: relative;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  font-size: 28px;
  height: 72px;
  width: 40px;
  opacity: 0.3;
}
  • Positions each button relative to its container.
  • Sets a fixed size of 40x72 pixels.
  • Uses grid layout to center the button content.
  • Sets the font size to 28px and the initial opacity to 0.3.
.navbar-menu > button.active {
  opacity: 1;
}
  • When a button has the class active, its opacity is set to 1, making it fully opaque.

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.