Github Inspired Navbar

Bring the functionality of GitHub's navbar to your website effortlessly. Learn how to replicate GitHub's navbar design to improve navigation and user experience on your site.

Preview
Code

<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css" />

<nav class="navbar">
  <svg onclick="document.body.classList.toggle('open')"
  class="burger" width="50" height="50" fill="#e8e8e8" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
    <path d="M4 6h16v2H4V6Zm0 5h16v2H4v-2Zm0 5h16v2H4v-2Z"></path>
  </svg>
  <svg width="800px" height="800px" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" fill="none"><path fill="#ffffff" fill-rule="evenodd" d="M8 1C4.133 1 1 4.13 1 7.993c0 3.09 2.006 5.71 4.787 6.635.35.064.478-.152.478-.337 0-.166-.006-.606-.01-1.19-1.947.423-2.357-.937-2.357-.937-.319-.808-.778-1.023-.778-1.023-.635-.434.048-.425.048-.425.703.05 1.073.72 1.073.72.624 1.07 1.638.76 2.037.582.063-.452.244-.76.444-.935-1.554-.176-3.188-.776-3.188-3.456 0-.763.273-1.388.72-1.876-.072-.177-.312-.888.07-1.85 0 0 .586-.189 1.924.716A6.711 6.711 0 018 4.381c.595.003 1.194.08 1.753.236 1.336-.905 1.923-.717 1.923-.717.382.963.142 1.674.07 1.85.448.49.72 1.114.72 1.877 0 2.686-1.638 3.278-3.197 3.45.251.216.475.643.475 1.296 0 .934-.009 1.688-.009 1.918 0 .187.127.404.482.336A6.996 6.996 0 0015 7.993 6.997 6.997 0 008 1z" clip-rule="evenodd"/></svg>
  <div class="menu-items">
    <div class="search">
      <input value="Search or jump to..." />
      <button>/</button>
    </div>
    <div class="menu menu-left">
      <a href="#">Pulls</a>
      <a href="#">Issues</a>
      <a href="#">Explore</a>
    </div>
  </div>
  <div class="menu menu-right">
    <span class="badge"></span>
    <svg width="48" height="48" fill="#e8e8e8" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path d="M12 22a2.98 2.98 0 0 0 2.818-2H9.182A2.98 2.98 0 0 0 12 22Zm7-7.414V10c0-3.217-2.185-5.927-5.145-6.742A1.99 1.99 0 0 0 12 2a1.99 1.99 0 0 0-1.855 1.258C7.185 4.074 5 6.783 5 10v4.586l-1.707 1.707A.996.996 0 0 0 3 17v1a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1v-1a.996.996 0 0 0-.293-.707L19 14.586Z"></path>
    </svg>
    <svg width="48" height="48" fill="#e8e8e8" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path d="M19 11h-6V5h-2v6H5v2h6v6h2v-6h6v-2Z"></path>
    </svg>
    <img src="https://www.frontendcomponent.com/favicon.ico" />
  </div>
</nav>

* {
  box-sizing: border-box;
}

html,
body,
.wrapper {
  height: 100%;
}

body {
  margin: 0;
  background: #0d1117;
  font-family: system-ui, -apple-system, BlinkMacSystemFont;
}

nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  height: 60px;
  padding: 0 20px;
  background: #161b22;
}

nav svg {
  width: 30px;
  height: 30px;
}

.burger {
  display: none;
  cursor: pointer;
}

.menu-items,
.menu {
  display: flex;
  gap: 16px;
}

.menu-right {
  position: relative;
  margin-left: auto;
  gap: 6px;
}

.menu-right svg, .menu-right img {
  width: 30px;
  height: 30px;
  padding: 5px;
}

.menu-right .badge {
  position: absolute;
  top: 0;
  left: 14px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid #161b22;
  background: linear-gradient(#54a3ff, #006eed);
}

a,
a:is(:visited, :active) {
  color: #ffffff;
  text-decoration: none;
  line-height: 24px;
}

.search {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #0d1117;
  border: 1px solid #30363d;
  border-radius: 6px;
  padding-right: 4px;
}

.search input {
  padding: 4px 10px;
  color: #c9d1d9;
  font-size: 13px;
  font-family: inherit;
  border: 0;
  background: transparent;
}

.search button {
  border: inherit;
  border-radius: inherit;
  background: transparent;
  color: #8b949e;
}

@media (width <= 580px) {
  .menu-right img:nth-child(n + 3) {
    display: none;
  }

  .menu-items {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 16px;
    position: absolute;
    top: 60px;
    left: 0;
    padding: 0 20px 20px;
    background: #161b22;
  }

  .menu-left {
    flex-direction: column;
    gap: 12px;
  }

  .menu-left a {
    border-bottom: 1px solid #30363d;
    padding-bottom: 10px;
  }

  .menu-right {
    margin-left: 0;
  }

  .burger {
    display: block;
  }
}

body.open .menu-items {
  display: flex;
}

```
No need of JavaScript
```

Implementing a navbar inspired by GitHub's clean and functional design can enhance the navigation experience on your website. This guide will help you create a GitHub-inspired navbar using HTML and CSS. Follow these steps to copy the provided code snippet, link the required CSS files, and personalize the navbar to fit your specific requirements.

Step 1: Copy the Code Snippet

Begin by copying the provided HTML and CSS code snippet below. This snippet includes the essential structure and styles for the GitHub-inspired navbar. Simply select the code, copy it, and paste it into your HTML and CSS files.

Step 2: Link CSS Files

Ensure the necessary CSS files are properly linked in your HTML document. Add the following <link> tags within the <head> section to import the CSS styles and the necessary icons:
```
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css">
```

Step 3: Customize and Make it Yours

Personalize the navbar to match your website's branding and functionality. Adjust the CSS styles to modify the navbar's appearance, colors, and icons. Experiment with different fonts and sizes to create a navigation bar that seamlessly integrates with your website's design.

By following these steps, you can implement and customize a GitHub-inspired navbar using HTML and CSS. Tailor the navbar to your specific needs and enhance user navigation and engagement on your website.

Code Explanation

HTML Code

Burger Menu Icon (<svg onclick="document.body.classList.toggle('open')" class="burger" ...>):

This SVG element serves as a toggle button (onclick="document.body.classList.toggle('open')") to open or close a menu or sidebar ('open' class is toggled on the body element).
Attributes include width="50", height="50", fill="#e8e8e8" (fills the SVG with a light gray color), and viewBox="0 0 24 24" (defines the coordinate system for the SVG).

Logo (<svg width="800px" height="800px" ...>):

Another SVG element, used here possibly as a logo or decorative element.
viewBox="0 0 16 16" defines its coordinate system.
fill="#ffffff" fills the path with white color.
fill-rule="evenodd" specifies the fill rule for the path.
The d attribute in the <path> tag contains the path data for the SVG shape.

Menu Items (<div class="menu-items">):

Container for various menu-related elements.

Search Bar (<div class="search">):

Contains an <input> element with an initial value of "Search or jump to..." and a <button> element.

Left Menu (<div class="menu menu-left">):

Contains links (<a> tags) likely used for navigation purposes.
Links are placeholders (href="#") and typically would be replaced with actual URLs.

Right Menu (<div class="menu menu-right">):

Contains additional menu items, including:
<span class="badge"></span>: A badge element, possibly for notifications or alerts.
Two SVG icons:
- First SVG (<svg width="48" height="48" ...>): Contains a single path (<path>) that defines an icon.
- Second SVG (<svg width="48" height="48" ...>): Also contains a single path (<path>) that defines a different icon.
<img src="https://www.frontendcomponent.com/favicon.ico" />: An image element displaying a favicon.

CSS Code

General Styles

* { box-sizing: border-box; }: Applies border-box box sizing to all elements, ensuring padding and border are included in the element's total width and height.
html, body, .wrapper { height: 100%; }: Sets the height of html, body, and .wrapper to 100%, ensuring the content takes up the full viewport height.
body { margin: 0; background: #0d1117; font-family: system-ui, -apple-system, BlinkMacSystemFont; }: Styles the body element with no margin, a dark background (#0d1117), and a system font stack.
nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 60px; padding: 0 20px; background: #161b22; }: Styles the nav element as a flex container with items spaced evenly. It has a height of 60px, padding around its content (20px), and a dark background (#161b22).

Navigation Elements and Menu Items

.burger { display: none; cursor: pointer; }: Styles a burger menu icon (svg) initially hidden (display: none) with a pointer cursor.
.menu-items, .menu { display: flex; gap: 16px; }: Styles .menu-items and .menu as flex containers with a gap of 16px between their child elements.
.menu-right { position: relative; margin-left: auto; gap: 6px; }: Styles .menu-right as a flex container aligned to the right (margin-left: auto), with child elements spaced 6px apart.
.menu-right svg, .menu-right img { width: 30px; height: 30px; padding: 5px; }: Sets the width and height of svg and img elements within .menu-right, with additional padding.
.menu-right .badge { position: absolute; top: 0; left: 14px; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #161b22; background: linear-gradient(#54a3ff, #006eed); }: Styles a badge element within .menu-right with absolute positioning, a circular shape (border-radius: 50%), and a gradient background.
a, a:is(:visited, :active) { color: #ffffff; text-decoration: none; line-height: 24px; }: Styles anchor (a) tags and visited/active states with white color (#ffffff), no underlining (text-decoration: none), and a specific line height (24px).

Responsive Design (Media Queries)

@media (width <= 580px) { ... }: Applies styles for screens narrower than or equal to 580px.
.menu-right img:nth-child(n + 3) { display: none; }: Hides images within .menu-right starting from the third child element.
.menu-items { ... }: Styles .menu-items for smaller screens:
- Displays it as a flex column with a full width, positioned beneath the nav (top: 60px).
- Uses a dark background (#161b22) and includes padding.
.menu-left { ... }: Styles .menu-left for smaller screens as a flex column with reduced spacing.
.burger { display: block; }: Makes the burger menu icon visible for smaller screens.
body.open .menu-items { display: flex; }: Displays .menu-items when the body has the class .open, facilitating the display of hidden navigation items when toggled.