Making of Google Style navigation bar

In 2011 Google swapped its plain white and blue links for a new black navigation bar with an orange highlight on the active item. I was surprised when I saw it, so I tried to figure out how they made it.

The 2011 version

A list of links inside a div, floated left, with an extra div to clear the floats. The item marked active gets the highlight.

<div class="menu">
  <ul>
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Whats New!</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">FAQ</a></li>
    <li><a href="#">Support</a></li>
    <div class="clearFloat"></div>
  </ul>
</div>

.menu { font-family: Arial, Helvetica, sans-serif; font-size: 12px; width: 100%; }
.menu ul { list-style: none; background: #2d2d2d; margin: 0; padding: 0; }
.menu li { display: inline-block; float: left; }
.menu li:first-child { margin-left: 5px; }
.menu a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: #bbbbbb;
  border-top: 2px solid transparent;
}
.menu a:hover,
.menu li.active a {
  background: #3d3d3d;
  color: #dddddd;
  border-top: 2px solid #ff4800;
}
.clearFloat { clear: both; }

The tricks that mattered: display: block on the links so the padding makes the whole area clickable, and a transparent top border so the orange one doesn't shift the layout on hover.

One bug, looking back: a <div> isn't allowed directly inside a <ul>, only <li> is.

How I would build it today

Flexbox removes the floats and the clearing div. A <nav> with aria-current tells screen readers which page is active, so there is no need for an extra class.

<nav class="menu" aria-label="Main">
  <ul>
    <li><a href="/" aria-current="page">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/new">What's new</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/faq">FAQ</a></li>
    <li><a href="/support">Support</a></li>
  </ul>
</nav>

.menu ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  margin: 0;
  padding: 0 0.5rem;
  list-style: none;
  background: #2d2d2d;
  font: 0.875rem/1.4 system-ui, sans-serif;
}
.menu a {
  display: block;
  padding: 0.75rem;
  color: #bbbbbb;
  text-decoration: none;
  border-top: 2px solid transparent;
}
.menu a:hover,
.menu a[aria-current="page"] {
  background: #3d3d3d;
  color: #ffffff;
  border-top-color: #ff4800;
}
.menu a:focus-visible {
  outline: 2px solid #ff4800;
  outline-offset: -2px;
}

• flex-wrap lets the items wrap on narrow screens instead of overflowing.
• :focus-visible gives keyboard users a clear focus ring without showing it on every mouse click.
• I bumped the light grey on hover to white: #dddddd on #3d3d3d was readable, but white gives more contrast.