Open demo

CSS code

HTML 
<div><span class="lbl">Field that widens on focus</span>
<header class="hs hs-grow">
  <a class="hs-logo" href="/"><span class="hs-mark" aria-hidden="true">F</span>Fieldnote</a>
  <nav class="hs-nav" aria-label="Main"><ul class="hs-links">
    <li><a href="/stories" aria-current="page">Stories</a></li><li><a href="/guides">Guides</a></li><li><a href="/podcast">Podcast</a></li>
  </ul></nav>
  <form class="hs-form" role="search" aria-label="Site">
    <label class="sr-only" for="hs-site">Search Fieldnote</label>
    <svg class="hs-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
    <input class="hs-input" id="hs-site" type="search" name="q" placeholder="Search stories">
  </form>
</header></div>

<div><span class="lbl">Icon that opens into a field</span>
<header class="hs hs-icon">
  <a class="hs-logo" href="/" aria-label="Lumen & Oak home"><span class="hs-mark" aria-hidden="true">L</span><span class="hs-word">Lumen & Oak</span></a>
  <nav class="hs-nav" aria-label="Shop"><ul class="hs-links">
    <li><a href="/living">Living</a></li><li><a href="/kitchen">Kitchen</a></li><li><a href="/lighting">Lighting</a></li>
  </ul></nav>
  <form class="hs-form" role="search" aria-label="Shop">
    <label class="sr-only" for="hs-shop">Search the shop</label>
    <svg class="hs-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
    <input class="hs-input" id="hs-shop" type="search" name="q" placeholder="Lamps, rugs, tables">
  </form>
  <a class="hs-cart" href="/cart" aria-label="Cart, 2 items"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M5 7h14l-1.2 11.1a2 2 0 0 1-2 1.9H8.2a2 2 0 0 1-2-1.9Z"/><path d="M9 7V6a3 3 0 0 1 6 0v1"/></svg><b aria-hidden="true">2</b></a>
</header></div>

<div><span class="lbl">App bar with a “/” shortcut</span>
<header class="hs hs-app">
  <a class="hs-logo" href="/" aria-label="Orbit home"><span class="hs-mark" aria-hidden="true">O</span><span class="hs-hide-sm">Orbit</span></a>
  <form class="hs-form" role="search" aria-label="Workspace">
    <label class="sr-only" for="hs-app">Search issues, projects and people</label>
    <svg class="hs-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
    <input class="hs-input" id="hs-app" type="search" name="q" placeholder="Search Orbit" aria-keyshortcuts="/">
    <kbd class="hs-kbd" aria-hidden="true">/</kbd>
  </form>
  <button class="hs-avatar" type="button" aria-label="Account: Maya Reyes">MR</button>
</header></div>
CSS 
/* Header search. Each bar is a <header> with a logo, links and a <form role="search">.
   Widening on focus is plain CSS (:focus on the input); only the "/" shortcut in the app bar uses a few lines of JS. */
.hs{--hs-ink:#0f172a;--hs-text:#334155;--hs-muted:#64748b;--hs-line:#7c889c;--hs-accent:#0f766e;--hs-ring:rgba(15,118,110,.22);
  display:flex;align-items:center;gap:20px;min-height:64px;padding:10px 16px 10px 18px;background:#fff;color:var(--hs-ink);
  border:1px solid #dde3ea;border-radius:14px;box-shadow:0 1px 2px rgba(15,23,42,.05),0 8px 24px rgba(15,23,42,.04)}
.hs *{box-sizing:border-box}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hs a{color:inherit;text-decoration:none}
.hs a:focus-visible,.hs button:focus-visible{outline:2px solid var(--hs-accent);outline-offset:2px}
.hs-logo{display:flex;align-items:center;gap:9px;flex:none;font-weight:700;font-size:1.02rem;letter-spacing:-.01em;border-radius:8px}
.hs-mark{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--hs-accent);color:#fff;font-size:.85rem}
.hs-links{display:flex;gap:2px;list-style:none;margin:0;padding:0}
.hs-links a{display:block;padding:7px 11px;border-radius:8px;font-size:.92rem;font-weight:500;color:var(--hs-text)}
.hs-links a:hover{background:#f1f5f9;color:var(--hs-ink)}
.hs-links a[aria-current="page"]{color:var(--hs-accent);background:#f0fdfa}
.hs-form{position:relative;display:flex;align-items:center;min-width:0;margin-left:auto}
.hs-ico{position:absolute;left:12px;top:50%;width:18px;height:18px;margin-top:-9px;color:var(--hs-muted);pointer-events:none}
.hs-input{width:190px;max-width:100%;height:40px;margin:0;padding:0 12px 0 38px;font:inherit;font-size:.92rem;color:inherit;
  background:#f8fafc;border:1px solid var(--hs-line);border-radius:10px;-webkit-appearance:none;appearance:none;
  transition:width .25s ease,border-color .15s,box-shadow .15s,background-color .15s}
.hs-input::placeholder{color:var(--hs-muted);opacity:1}
.hs-input:focus{outline:none;background:#fff;border-color:var(--hs-accent);box-shadow:0 0 0 1px var(--hs-accent),0 0 0 4px var(--hs-ring)}
/* A: the field widens while it has focus */
.hs-grow .hs-input:focus{width:300px}
/* B: a round icon that opens into a field */
.hs-icon .hs-input{width:42px;height:42px;padding:0 0 0 40px;border-radius:999px;cursor:pointer}
.hs-icon .hs-input::placeholder{color:transparent}
.hs-icon .hs-input:focus,.hs-icon .hs-input:not(:placeholder-shown){width:230px;padding-right:14px;cursor:text}
.hs-icon .hs-input:focus::placeholder{color:var(--hs-muted)}
.hs-icon .hs-ico{left:12px}
.hs-cart{position:relative;display:grid;place-items:center;flex:none;width:42px;height:42px;border-radius:999px;color:var(--hs-text)}
.hs-cart:hover{background:#f1f5f9}
.hs-cart svg{width:20px;height:20px}
.hs-cart b{position:absolute;top:3px;right:2px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--hs-accent);
  color:#fff;font-size:.68rem;line-height:18px;text-align:center}
/* C: app bar, centred field with a "/" shortcut hint */
.hs-app .hs-form{flex:1;max-width:440px;margin:0 auto}
.hs-app .hs-input{width:100%;padding-right:40px}
.hs-kbd{position:absolute;right:9px;top:50%;margin-top:-11px;min-width:22px;height:22px;padding:0 6px;font:600 .75rem/20px ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--hs-text);text-align:center;background:#fff;border:1px solid #b6bfcc;border-bottom-width:2px;border-radius:6px;pointer-events:none;transition:opacity .15s}
.hs-input:focus~.hs-kbd,.hs-input:not(:placeholder-shown)~.hs-kbd{opacity:0}
.hs-avatar{display:grid;place-items:center;flex:none;width:38px;height:38px;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:#ccfbf1;color:#115e59;font-family:inherit;font-size:.8rem;font-weight:700}
.hs-avatar:hover{background:#99f6e4}
@media (max-width:640px){.hs-nav,.hs-hide-sm{display:none}
  /* on a phone the shop name steps aside while the field is open */
  .hs-icon:has(.hs-input:focus) .hs-word{display:none}}
@media (prefers-reduced-motion:reduce){.hs-input,.hs-kbd{transition:none}}
JavaScript 
// Press "/" anywhere on the page to jump to the app bar search (ignored while typing in another field).
document.addEventListener('keydown', e => {
  const q = document.getElementById('hs-app');
  if (e.key !== '/' || !q || e.target.closest('input, textarea, select, [contenteditable="true"]')) return;
  e.preventDefault();
  q.focus();
});

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS

HTML 
<div><span class="lbl">Field that widens on focus</span>
<header class="navbar navbar-expand hs hs-grow">
  <a class="navbar-brand" href="/"><span class="hs-mark" aria-hidden="true">F</span>Fieldnote</a>
  <nav class="d-none d-sm-block" aria-label="Main"><ul class="navbar-nav">
    <li class="nav-item"><a class="nav-link active" href="/stories" aria-current="page">Stories</a></li><li class="nav-item"><a class="nav-link" href="/guides">Guides</a></li><li class="nav-item"><a class="nav-link" href="/podcast">Podcast</a></li>
  </ul></nav>
  <form class="hs-form" role="search" aria-label="Site">
    <label class="visually-hidden" for="hs-site">Search Fieldnote</label>
    <svg class="hs-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
    <input class="form-control" id="hs-site" type="search" name="q" placeholder="Search stories">
  </form>
</header></div>

<div><span class="lbl">Icon that opens into a field</span>
<header class="navbar navbar-expand hs hs-icon">
  <a class="navbar-brand" href="/" aria-label="Lumen & Oak home"><span class="hs-mark" aria-hidden="true">L</span><span class="hs-word">Lumen & Oak</span></a>
  <nav class="d-none d-sm-block" aria-label="Shop"><ul class="navbar-nav">
    <li class="nav-item"><a class="nav-link" href="/living">Living</a></li><li class="nav-item"><a class="nav-link" href="/kitchen">Kitchen</a></li><li class="nav-item"><a class="nav-link" href="/lighting">Lighting</a></li>
  </ul></nav>
  <form class="hs-form" role="search" aria-label="Shop">
    <label class="visually-hidden" for="hs-shop">Search the shop</label>
    <svg class="hs-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
    <input class="form-control" id="hs-shop" type="search" name="q" placeholder="Lamps, rugs, tables">
  </form>
  <a class="btn rounded-circle hs-cart" href="/cart" aria-label="Cart, 2 items"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M5 7h14l-1.2 11.1a2 2 0 0 1-2 1.9H8.2a2 2 0 0 1-2-1.9Z"/><path d="M9 7V6a3 3 0 0 1 6 0v1"/></svg><span class="badge rounded-pill position-absolute" aria-hidden="true">2</span></a>
</header></div>

<div><span class="lbl">App bar with a “/” shortcut</span>
<header class="navbar navbar-expand hs hs-app">
  <a class="navbar-brand" href="/" aria-label="Orbit home"><span class="hs-mark" aria-hidden="true">O</span><span class="d-none d-sm-inline">Orbit</span></a>
  <form class="hs-form" role="search" aria-label="Workspace">
    <label class="visually-hidden" for="hs-app">Search issues, projects and people</label>
    <svg class="hs-ico" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
    <input class="form-control" id="hs-app" type="search" name="q" placeholder="Search Orbit" aria-keyshortcuts="/">
    <kbd class="hs-kbd" aria-hidden="true">/</kbd>
  </form>
  <button class="btn rounded-circle hs-avatar" type="button" aria-label="Account: Maya Reyes">MR</button>
</header></div>
CSS 
/* Bootstrap .navbar with a .form-control search. Widening on focus is CSS; only the "/" shortcut uses a few lines of JS. */
.hs{--hs-ink:#0f172a;--hs-text:#334155;--hs-muted:#64748b;--hs-line:#7c889c;--hs-accent:#0f766e;--hs-ring:rgba(15,118,110,.22);
  --bs-navbar-padding-x:0;--bs-navbar-padding-y:0;--bs-navbar-color:var(--hs-text);--bs-navbar-hover-color:var(--hs-ink);
  --bs-navbar-active-color:var(--hs-accent);--bs-navbar-nav-link-padding-x:11px;--bs-nav-link-padding-y:7px;--bs-nav-link-font-size:.92rem;--bs-nav-link-font-weight:500;
  gap:20px;min-height:64px;padding:10px 16px 10px 18px;background:#fff;color:var(--hs-ink);
  border:1px solid #dde3ea;border-radius:14px;box-shadow:0 1px 2px rgba(15,23,42,.05),0 8px 24px rgba(15,23,42,.04)}
.hs a:focus-visible,.hs .btn:focus-visible,.hs .nav-link:focus-visible{outline:2px solid var(--hs-accent);outline-offset:2px;box-shadow:none}
.hs .navbar-brand{display:flex;align-items:center;gap:9px;margin:0;padding:0;font-weight:700;font-size:1.02rem;letter-spacing:-.01em;color:var(--hs-ink);border-radius:8px}
.hs-mark{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:var(--hs-accent);color:#fff;font-size:.85rem}
.hs .navbar-nav{gap:2px}
.hs .nav-link{border-radius:8px}
.hs .nav-link:hover{background:#f1f5f9}
.hs .nav-link.active{background:#f0fdfa}
.hs-form{position:relative;display:flex;align-items:center;min-width:0;margin-left:auto}
.hs-ico{position:absolute;left:12px;top:50%;z-index:1;width:18px;height:18px;margin-top:-9px;color:var(--hs-muted);pointer-events:none}
.hs .form-control{width:190px;max-width:100%;height:40px;padding:0 12px 0 38px;font-size:.92rem;color:var(--hs-ink);background:#f8fafc;
  border-color:var(--hs-line);border-radius:10px;-webkit-appearance:none;appearance:none;transition:width .25s ease,border-color .15s,box-shadow .15s,background-color .15s}
.hs .form-control::placeholder{color:var(--hs-muted);opacity:1}
.hs .form-control:focus{background:#fff;border-color:var(--hs-accent);box-shadow:0 0 0 1px var(--hs-accent),0 0 0 4px var(--hs-ring)}
.hs-grow .form-control:focus{width:300px}
.hs-icon .form-control{width:42px;height:42px;padding:0 0 0 40px;border-radius:999px;cursor:pointer}
.hs-icon .form-control::placeholder{color:transparent}
.hs-icon .form-control:focus,.hs-icon .form-control:not(:placeholder-shown){width:230px;padding-right:14px;cursor:text}
.hs-icon .form-control:focus::placeholder{color:var(--hs-muted)}
.hs .hs-cart{--bs-btn-padding-x:0;--bs-btn-padding-y:0;--bs-btn-color:var(--hs-text);--bs-btn-hover-bg:#f1f5f9;--bs-btn-hover-color:var(--hs-text);
  --bs-btn-active-bg:#e2e8f0;--bs-btn-border-width:0;position:relative;display:grid;place-items:center;flex:none;width:42px;height:42px}
.hs-cart svg{width:20px;height:20px}
.hs-cart .badge{top:3px;right:2px;left:auto;min-width:18px;height:18px;padding:0 5px;font-size:.68rem;font-weight:700;line-height:18px;background:var(--hs-accent)}
.hs-app .hs-form{flex:1;max-width:440px;margin:0 auto}
.hs-app .form-control{width:100%;padding-right:40px}
.hs kbd.hs-kbd{position:absolute;right:9px;top:50%;margin-top:-11px;min-width:22px;height:22px;padding:0 6px;font:600 .75rem/20px ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--hs-text);text-align:center;background:#fff;border:1px solid #b6bfcc;border-bottom-width:2px;border-radius:6px;pointer-events:none;transition:opacity .15s}
.hs .form-control:focus~.hs-kbd,.hs .form-control:not(:placeholder-shown)~.hs-kbd{opacity:0}
.hs .hs-avatar{--bs-btn-padding-x:0;--bs-btn-padding-y:0;--bs-btn-bg:#ccfbf1;--bs-btn-color:#115e59;--bs-btn-hover-bg:#99f6e4;--bs-btn-hover-color:#115e59;
  --bs-btn-active-bg:#99f6e4;--bs-btn-border-width:0;--bs-btn-font-size:.8rem;--bs-btn-font-weight:700;flex:none;width:38px;height:38px}
/* on a phone the shop name steps aside while the field is open */
@media (max-width:640px){.hs-icon:has(.form-control:focus) .hs-word{display:none}}
@media (prefers-reduced-motion:reduce){.hs .form-control,.hs-kbd{transition:none}}
JavaScript 
// Press "/" anywhere on the page to jump to the app bar search (ignored while typing in another field).
document.addEventListener('keydown', e => {
  const q = document.getElementById('hs-app');
  if (e.key !== '/' || !q || e.target.closest('input, textarea, select, [contenteditable="true"]')) return;
  e.preventDefault();
  q.focus();
});

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<div><span class="mb-3.5 block text-[.72rem] tracking-[.12em] text-[#56606f] uppercase">Field that widens on focus</span>
<header class="flex min-h-16 items-center gap-5 rounded-[14px] border border-[#dde3ea] bg-white py-2.5 pr-4 pl-[18px] text-hs-ink shadow-[0_1px_2px_rgba(15,23,42,.05),0_8px_24px_rgba(15,23,42,.04)]">
  <a class="flex flex-none items-center gap-[9px] rounded-lg text-[1.02rem] font-bold tracking-[-.01em] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-hs-accent" href="/"><span class="grid size-7 place-items-center rounded-lg bg-hs-accent text-[.85rem] text-white" aria-hidden="true">F</span>Fieldnote</a>
  <nav class="hidden sm:block" aria-label="Main"><ul class="flex gap-0.5">
    <li><a class="block rounded-lg bg-[#f0fdfa] px-[11px] py-[7px] text-[.92rem] font-medium text-hs-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-hs-accent" href="/stories" aria-current="page">Stories</a></li><li><a class="block rounded-lg px-[11px] py-[7px] text-[.92rem] font-medium text-hs-text hover:bg-[#f1f5f9] hover:text-hs-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-hs-accent" href="/guides">Guides</a></li><li><a class="block rounded-lg px-[11px] py-[7px] text-[.92rem] font-medium text-hs-text hover:bg-[#f1f5f9] hover:text-hs-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-hs-accent" href="/podcast">Podcast</a></li>
  </ul></nav>
  <form class="relative ml-auto flex min-w-0 items-center" role="search" aria-label="Site">
    <label class="sr-only" for="hs-site">Search Fieldnote</label>
    <svg class="pointer-events-none absolute top-1/2 left-3 size-[18px] -translate-y-1/2 text-hs-muted" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
    <input class="h-10 w-[190px] max-w-full appearance-none rounded-[10px] border border-hs-line bg-[#f8fafc] pr-3 pl-[38px] text-[.92rem] text-hs-ink transition-[width,border-color,box-shadow,background-color] duration-[250ms] placeholder:text-hs-muted focus:w-[300px] focus:border-hs-accent focus:bg-white focus:shadow-[0_0_0_1px_var(--color-hs-accent),0_0_0_4px_rgba(15,118,110,.22)] focus:outline-none motion-reduce:transition-none" id="hs-site" type="search" name="q" placeholder="Search stories">
  </form>
</header></div>

<div><span class="mb-3.5 block text-[.72rem] tracking-[.12em] text-[#56606f] uppercase">Icon that opens into a field</span>
<header class="group flex min-h-16 items-center gap-5 rounded-[14px] border border-[#dde3ea] bg-white py-2.5 pr-4 pl-[18px] text-hs-ink shadow-[0_1px_2px_rgba(15,23,42,.05),0_8px_24px_rgba(15,23,42,.04)]">
  <a class="flex flex-none items-center gap-[9px] rounded-lg text-[1.02rem] font-bold tracking-[-.01em] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-hs-accent" href="/" aria-label="Lumen & Oak home"><span class="grid size-7 place-items-center rounded-lg bg-hs-accent text-[.85rem] text-white" aria-hidden="true">L</span><span class="max-sm:group-has-[input:focus]:hidden">Lumen & Oak</span></a>
  <nav class="hidden sm:block" aria-label="Shop"><ul class="flex gap-0.5">
    <li><a class="block rounded-lg px-[11px] py-[7px] text-[.92rem] font-medium text-hs-text hover:bg-[#f1f5f9] hover:text-hs-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-hs-accent" href="/living">Living</a></li><li><a class="block rounded-lg px-[11px] py-[7px] text-[.92rem] font-medium text-hs-text hover:bg-[#f1f5f9] hover:text-hs-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-hs-accent" href="/kitchen">Kitchen</a></li><li><a class="block rounded-lg px-[11px] py-[7px] text-[.92rem] font-medium text-hs-text hover:bg-[#f1f5f9] hover:text-hs-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-hs-accent" href="/lighting">Lighting</a></li>
  </ul></nav>
  <form class="relative ml-auto flex min-w-0 items-center" role="search" aria-label="Shop">
    <label class="sr-only" for="hs-shop">Search the shop</label>
    <svg class="pointer-events-none absolute top-1/2 left-3 size-[18px] -translate-y-1/2 text-hs-muted" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
    <input class="h-[42px] w-[42px] max-w-full cursor-pointer appearance-none rounded-full border border-hs-line bg-[#f8fafc] pl-10 text-[.92rem] text-hs-ink transition-[width,border-color,box-shadow,background-color] duration-[250ms] placeholder:text-transparent focus:w-[230px] focus:cursor-text focus:border-hs-accent focus:bg-white focus:pr-3.5 focus:shadow-[0_0_0_1px_var(--color-hs-accent),0_0_0_4px_rgba(15,118,110,.22)] focus:outline-none focus:placeholder:text-hs-muted motion-reduce:transition-none [&:not(:placeholder-shown)]:w-[230px] [&:not(:placeholder-shown)]:cursor-text [&:not(:placeholder-shown)]:pr-3.5" id="hs-shop" type="search" name="q" placeholder="Lamps, rugs, tables">
  </form>
  <a class="relative grid size-[42px] flex-none place-items-center rounded-full text-hs-text hover:bg-[#f1f5f9] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-hs-accent" href="/cart" aria-label="Cart, 2 items"><svg class="size-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"><path d="M5 7h14l-1.2 11.1a2 2 0 0 1-2 1.9H8.2a2 2 0 0 1-2-1.9Z"/><path d="M9 7V6a3 3 0 0 1 6 0v1"/></svg><b class="absolute top-[3px] right-0.5 h-[18px] min-w-[18px] rounded-[9px] bg-hs-accent px-[5px] text-center text-[.68rem] leading-[18px] text-white" aria-hidden="true">2</b></a>
</header></div>

<div><span class="mb-3.5 block text-[.72rem] tracking-[.12em] text-[#56606f] uppercase">App bar with a “/” shortcut</span>
<header class="flex min-h-16 items-center gap-5 rounded-[14px] border border-[#dde3ea] bg-white py-2.5 pr-4 pl-[18px] text-hs-ink shadow-[0_1px_2px_rgba(15,23,42,.05),0_8px_24px_rgba(15,23,42,.04)]">
  <a class="flex flex-none items-center gap-[9px] rounded-lg text-[1.02rem] font-bold tracking-[-.01em] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-hs-accent" href="/" aria-label="Orbit home"><span class="grid size-7 place-items-center rounded-lg bg-hs-accent text-[.85rem] text-white" aria-hidden="true">O</span><span class="hidden sm:inline">Orbit</span></a>
  <form class="relative mx-auto flex min-w-0 max-w-[440px] flex-1 items-center" role="search" aria-label="Workspace">
    <label class="sr-only" for="hs-app">Search issues, projects and people</label>
    <svg class="pointer-events-none absolute top-1/2 left-3 size-[18px] -translate-y-1/2 text-hs-muted" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true" focusable="false"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
    <input class="peer h-10 w-full appearance-none rounded-[10px] border border-hs-line bg-[#f8fafc] pr-10 pl-[38px] text-[.92rem] text-hs-ink transition-[border-color,box-shadow,background-color] duration-150 placeholder:text-hs-muted focus:border-hs-accent focus:bg-white focus:shadow-[0_0_0_1px_var(--color-hs-accent),0_0_0_4px_rgba(15,118,110,.22)] focus:outline-none motion-reduce:transition-none" id="hs-app" type="search" name="q" placeholder="Search Orbit" aria-keyshortcuts="/">
    <kbd class="pointer-events-none absolute top-1/2 right-[9px] h-[22px] min-w-[22px] -translate-y-1/2 rounded-md border border-b-2 border-[#b6bfcc] bg-white px-1.5 text-center font-mono text-xs leading-5 font-semibold text-hs-text transition-opacity duration-150 peer-focus:opacity-0 motion-reduce:transition-none peer-[:not(:placeholder-shown)]:opacity-0" aria-hidden="true">/</kbd>
  </form>
  <button class="grid size-[38px] flex-none cursor-pointer place-items-center rounded-full bg-[#ccfbf1] text-[.8rem] font-bold text-[#115e59] hover:bg-[#99f6e4] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-hs-accent" type="button" aria-label="Account: Maya Reyes">MR</button>
</header></div>
CSS 
@theme {
  --color-hs-ink: #0f172a;
  --color-hs-text: #334155;
  --color-hs-muted: #64748b;
  --color-hs-line: #7c889c;
  --color-hs-accent: #0f766e;
}
JavaScript 
// Press "/" anywhere on the page to jump to the app bar search (ignored while typing in another field).
document.addEventListener('keydown', e => {
  const q = document.getElementById('hs-app');
  if (e.key !== '/' || !q || e.target.closest('input, textarea, select, [contenteditable="true"]')) return;
  e.preventDefault();
  q.focus();
});

About this set

Three search bars built into a site header, where search has to share a row with a logo, navigation and account controls. The first is a field that widens from 190 to 300 pixels while it has focus, giving the query room without taking space from the menu the rest of the time. The second starts as a round, icon-sized field and opens into a full input on focus, with the shop name stepping aside on phones so the field has room. The third is an app bar with a centred search, a slash key hint and an account button; pressing the slash key anywhere on the page jumps to the field. The widening is plain CSS: the input width transitions on :focus, and the icon field stays open while it holds text through :not(:placeholder-shown). Only the slash shortcut uses JavaScript, a single keydown listener that ignores the key while someone is typing in another field. Use the widening field on content sites, the icon field in e-commerce headers and the app bar in dashboards.

What’s included

  • Field that widens on focus with a CSS width transition
  • Icon field that opens into a full input, no JavaScript
  • App bar search with a slash shortcut and aria-keyshortcuts
  • Navigation links hide on small screens so the header never overflows
  • Bootstrap version built on .navbar and .navbar-nav

Accessibility

Each search form has role="search" and its own aria-label, the inputs have visually hidden labels, and the collapsed icon field is still a normal text input that screen readers announce by its label. The slash hint is aria-hidden and the input carries aria-keyshortcuts="/". Links and buttons show a 2px outline on :focus-visible, fields show an accent ring, and the width animation is switched off under prefers-reduced-motion.

Customise it

Set --hs-accent, --hs-line and --hs-ring on .hs for colour; change the width values on .hs-grow and .hs-icon inputs to adjust how far they open. Bootstrap uses the same properties plus --bs-navbar-* variables; in Tailwind edit the --color-hs-* theme colours and the w-[190px], focus:w-[300px] and w-[42px] utilities.