Open demo

CSS code

HTML 
<header class="hdk">
  <a class="logo" href="#"><i aria-hidden="true"></i>Pulse</a>
  <div class="panel" id="hdk-panel">
    <nav aria-label="Main">
      <ul class="links"><li><a href="#" aria-current="page">Overview</a></li><li><a href="#">Reports</a></li><li><a href="#">Alerts</a></li><li><a href="#">Settings</a></li></ul>
    </nav>
    <form class="search" role="search" action="#">
      <svg aria-hidden="true" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
      <input type="search" name="q" placeholder="Search anything…" aria-label="Search" aria-keyshortcuts="Meta+K Control+K">
      <kbd aria-hidden="true">⌘K</kbd>
    </form>
  </div>
  <div class="right">
    <button class="bell" type="button" aria-label="Notifications, 3 unread"><svg aria-hidden="true" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg></button>
    <a class="avatar" href="#"><span aria-hidden="true">AS</span><span class="sr-only">Your account</span></a>
    <button class="toggle" type="button" aria-expanded="false" aria-controls="hdk-panel" aria-label="Menu"><i></i><i></i><i></i></button>
  </div>
</header>
CSS 
/* Dark in-app header: product nav with an active page, a search field that ⌘K / Ctrl+K focuses,
   a notification button with an unread dot and an account avatar. Below 992px the nav and search
   collapse behind the menu button. */
.hdk{--hdk-bg:#11151f;--hdk-ink:#e6eaf2;--hdk-muted:#8f99ad;--hdk-line:#242b3a;--hdk-soft:#1a202e;--hdk-focus:#67e8f9;
  display:flex;align-items:center;gap:22px;min-height:60px;padding:0 24px;background:var(--hdk-bg);border-bottom:1px solid #1e2430;color:var(--hdk-ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.hdk,.hdk *{box-sizing:border-box}
.hdk ul{list-style:none;margin:0;padding:0}
.hdk a{text-decoration:none}
.hdk a:focus-visible,.hdk button:focus-visible{outline:2px solid var(--hdk-focus);outline-offset:2px}
.hdk .sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.hdk .logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:.98rem;color:var(--hdk-ink);border-radius:6px}
.hdk .logo i{width:24px;height:24px;border-radius:7px;background:linear-gradient(135deg,#22d3ee,#818cf8)}
.hdk .panel{flex:1;display:flex;align-items:center;gap:22px}
.hdk .links{display:flex;gap:2px}
.hdk .links a{display:block;padding:8px 12px;font-size:.85rem;font-weight:600;color:var(--hdk-muted);border-radius:8px;transition:color .15s,background .15s}
.hdk .links a:hover{color:var(--hdk-ink);background:var(--hdk-soft)}
.hdk .links a[aria-current="page"]{color:var(--hdk-ink);background:#1e2534}
.hdk .search{margin-left:auto;display:flex;align-items:center;gap:8px;width:280px;padding:0 8px 0 12px;background:#0c0f16;
  border:1px solid var(--hdk-line);border-radius:9px;color:var(--hdk-muted);transition:border-color .15s}
.hdk .search:hover{border-color:#39445c}
.hdk .search:focus-within{border-color:var(--hdk-focus);outline:1px solid var(--hdk-focus)}
.hdk .search input{flex:1;min-width:0;padding:8px 0;font:inherit;font-size:.84rem;color:var(--hdk-ink);background:none;border:0;outline:0}
.hdk .search input::placeholder{color:var(--hdk-muted)}
.hdk .search kbd{font-family:inherit;font-size:.68rem;background:var(--hdk-soft);border:1px solid #2a3245;border-radius:5px;padding:2px 6px;color:var(--hdk-muted)}
.hdk .right{display:flex;align-items:center;gap:14px}
.hdk .bell{position:relative;display:grid;place-items:center;width:34px;height:34px;border-radius:9px;border:1px solid var(--hdk-line);background:none;color:var(--hdk-muted);cursor:pointer}
.hdk .bell:hover{color:var(--hdk-ink);border-color:#39445c}
.hdk .bell::after{content:"";position:absolute;top:5px;right:6px;width:11px;height:11px;border-radius:50%;background:#f43f5e;border:2px solid var(--hdk-bg)}
.hdk .avatar{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#f59e0b,#ef4444);font-size:.78rem;font-weight:800;color:#fff}
.hdk .toggle{display:none;width:40px;height:40px;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  background:none;border:1px solid var(--hdk-line);border-radius:9px;cursor:pointer}
.hdk .toggle i{display:block;width:18px;height:2px;border-radius:2px;background:var(--hdk-ink);transition:transform .2s,opacity .2s}
.hdk .toggle[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hdk .toggle[aria-expanded="true"] i:nth-child(2){opacity:0}
.hdk .toggle[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:991.98px){
  .hdk{flex-wrap:wrap;gap:0 12px;padding:10px 16px}
  .hdk .right{margin-left:auto;gap:10px}
  .hdk .toggle{display:flex}
  .hdk .panel{display:none;order:9;flex-basis:100%;flex-direction:column;align-items:stretch;gap:12px;padding:12px 0 6px}
  .hdk .panel[data-open]{display:flex}
  .hdk .links{flex-direction:column}
  .hdk .links a{padding:11px 12px}
  .hdk .search{width:auto;margin:0}
}
@media (prefers-reduced-motion:reduce){.hdk *{transition:none!important}}
JavaScript 
/* Menu button (below 992px) toggles aria-expanded and data-open on the panel; Esc closes it.
   ⌘K / Ctrl+K opens the panel if it is collapsed and focuses the search field. */
(() => {
  const hd = document.querySelector('.hdk'); if (!hd) return;
  const toggle = hd.querySelector('.toggle'), panel = document.getElementById(toggle.getAttribute('aria-controls'));
  const input = hd.querySelector('.search input');
  const isOpen = () => toggle.getAttribute('aria-expanded') === 'true';
  const set = open => { toggle.setAttribute('aria-expanded', open); panel.toggleAttribute('data-open', open); };
  toggle.addEventListener('click', () => set(!isOpen()));
  document.addEventListener('keydown', e => {
    if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
      e.preventDefault(); if (!input.offsetParent) set(true); input.focus();
    } else if (e.key === 'Escape' && isOpen()) { set(false); toggle.focus(); }
  });
})();

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS, Bootstrap 5.3.8 JS bundle

HTML 
<header class="hdk">
  <nav class="navbar navbar-expand-lg" data-bs-theme="dark" aria-label="Main">
    <div class="container-fluid">
      <a class="navbar-brand" href="#"><i aria-hidden="true"></i>Pulse</a>
      <div class="d-flex align-items-center gap-2 gap-lg-3 ms-auto order-lg-last">
        <button class="btn bell position-relative" type="button" aria-label="Notifications, 3 unread"><svg aria-hidden="true" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg><span class="dot position-absolute rounded-circle"></span></button>
        <a class="avatar rounded-circle" href="#"><span aria-hidden="true">AS</span><span class="visually-hidden">Your account</span></a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#hdk-panel" aria-controls="hdk-panel" aria-expanded="false" aria-label="Menu"><i></i><i></i><i></i></button>
      </div>
      <div class="collapse navbar-collapse" id="hdk-panel">
        <ul class="navbar-nav">
          <li class="nav-item"><a class="nav-link active" href="#" aria-current="page">Overview</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Reports</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Alerts</a></li>
          <li class="nav-item"><a class="nav-link" href="#">Settings</a></li>
        </ul>
        <form class="search d-flex align-items-center gap-2 ms-lg-auto" role="search" action="#">
          <svg aria-hidden="true" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
          <input class="form-control" type="search" name="q" placeholder="Search anything…" aria-label="Search" aria-keyshortcuts="Meta+K Control+K">
          <kbd aria-hidden="true">⌘K</kbd>
        </form>
      </div>
    </div>
  </nav>
</header>
CSS 
/* Bootstrap .navbar in data-bs-theme="dark", with a .form-control search and a notification dot
   built from position and border utilities. */
.hdk{--hdk-bg:#11151f;--hdk-ink:#e6eaf2;--hdk-muted:#8f99ad;--hdk-line:#242b3a;--hdk-soft:#1a202e;--hdk-focus:#67e8f9}
.hdk .navbar{--bs-navbar-padding-y:0;--bs-navbar-padding-x:24px;--bs-navbar-color:var(--hdk-muted);--bs-navbar-hover-color:var(--hdk-ink);
  --bs-navbar-active-color:var(--hdk-ink);--bs-navbar-brand-color:var(--hdk-ink);--bs-navbar-brand-hover-color:var(--hdk-ink);
  --bs-navbar-brand-padding-y:0;--bs-navbar-brand-margin-end:0;--bs-navbar-nav-link-padding-x:12px;
  min-height:60px;background:var(--hdk-bg);border-bottom:1px solid #1e2430}
.hdk .container-fluid{padding:0;gap:22px}
.hdk .navbar-brand{display:flex;align-items:center;gap:8px;font-weight:800;font-size:.98rem;border-radius:6px}
.hdk .navbar-brand i{width:24px;height:24px;border-radius:7px;background:linear-gradient(135deg,#22d3ee,#818cf8)}
.hdk .navbar-collapse{gap:22px}
.hdk .navbar-nav{--bs-nav-link-padding-y:8px;--bs-nav-link-font-weight:600;--bs-nav-link-font-size:.85rem;gap:2px}
.hdk .nav-link{border-radius:8px;transition:color .15s,background .15s}
.hdk .nav-link:hover{background:var(--hdk-soft)}
.hdk .nav-link.active{background:#1e2534}
.hdk .search{width:280px;padding:0 8px 0 12px;background:#0c0f16;border:1px solid var(--hdk-line);border-radius:9px;color:var(--hdk-muted);transition:border-color .15s}
.hdk .search:hover{border-color:#39445c}
.hdk .search:focus-within{border-color:var(--hdk-focus);outline:1px solid var(--hdk-focus)}
.hdk .search .form-control{--bs-body-bg:transparent;padding:8px 0;font-size:.84rem;color:var(--hdk-ink);border:0;box-shadow:none}
.hdk .search .form-control::placeholder{color:var(--hdk-muted)}
.hdk .search kbd{font-family:inherit;font-size:.68rem;background:var(--hdk-soft);border:1px solid #2a3245;border-radius:5px;padding:2px 6px;color:var(--hdk-muted)}
.hdk .bell{--bs-btn-padding-x:0;--bs-btn-padding-y:0;--bs-btn-color:var(--hdk-muted);--bs-btn-border-color:var(--hdk-line);--bs-btn-hover-color:var(--hdk-ink);
  --bs-btn-hover-border-color:#39445c;--bs-btn-hover-bg:transparent;--bs-btn-active-color:var(--hdk-ink);--bs-btn-active-border-color:#39445c;--bs-btn-border-radius:9px;
  display:grid;place-items:center;width:34px;height:34px}
.hdk .bell .dot{top:5px;right:6px;width:11px;height:11px;background:#f43f5e;border:2px solid var(--hdk-bg)}
.hdk .avatar{display:grid;place-items:center;width:34px;height:34px;background:linear-gradient(135deg,#f59e0b,#ef4444);font-size:.78rem;font-weight:800;color:#fff;text-decoration:none}
.hdk a:focus-visible,.hdk button:focus-visible{outline:2px solid var(--hdk-focus);outline-offset:2px;box-shadow:none}
.hdk .navbar-toggler{width:40px;height:40px;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:1px solid var(--hdk-line);border-radius:9px}
.hdk .navbar-toggler i{display:block;width:18px;height:2px;border-radius:2px;background:var(--hdk-ink);transition:transform .2s,opacity .2s}
.hdk .navbar-toggler[aria-expanded="true"] i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hdk .navbar-toggler[aria-expanded="true"] i:nth-child(2){opacity:0}
.hdk .navbar-toggler[aria-expanded="true"] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (min-width:992px){.hdk .navbar-toggler{display:none}}
@media (max-width:991.98px){
  .hdk .navbar{--bs-navbar-padding-x:16px;padding-top:10px;padding-bottom:10px}
  .hdk .container-fluid{gap:0}
  .hdk .navbar-collapse .navbar-nav{padding-top:12px}
  .hdk .navbar-nav .nav-link{padding:11px 12px}
  .hdk .search{width:auto;margin:12px 0 6px}
}
@media (prefers-reduced-motion:reduce){.hdk *{transition:none!important}}
JavaScript 
/* Esc closes the collapsed menu (below 992px). ⌘K / Ctrl+K opens it if needed and focuses the search field. */
(() => {
  const hd = document.querySelector('.hdk'); if (!hd) return;
  const panel = hd.querySelector('.navbar-collapse'), toggler = hd.querySelector('.navbar-toggler'), input = hd.querySelector('.search input');
  document.addEventListener('keydown', e => {
    if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
      e.preventDefault();
      if (input.offsetParent) return input.focus();
      panel.addEventListener('shown.bs.collapse', () => input.focus(), { once: true });
      bootstrap.Collapse.getOrCreateInstance(panel).show();
    } else if (e.key === 'Escape' && panel.classList.contains('show')) {
      bootstrap.Collapse.getOrCreateInstance(panel).hide(); toggler.focus();
    }
  });
})();

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<header class="hdk flex min-h-[60px] items-center gap-[22px] border-b border-[#1e2430] bg-hdk-bg px-6 text-hdk-ink max-lg:flex-wrap max-lg:gap-x-3 max-lg:gap-y-0 max-lg:px-4 max-lg:py-2.5">
  <a class="flex items-center gap-2 rounded-md text-[.98rem] font-extrabold text-hdk-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-hdk-focus" href="#"><i class="size-6 rounded-[7px] bg-linear-135/srgb from-[#22d3ee] to-[#818cf8]" aria-hidden="true"></i>Pulse</a>
  <div class="hidden flex-1 items-center gap-[22px] data-open:flex lg:flex max-lg:order-9 max-lg:basis-full max-lg:flex-col max-lg:items-stretch max-lg:gap-3 max-lg:pt-3 max-lg:pb-1.5" id="hdk-panel">
    <nav aria-label="Main">
      <ul class="flex gap-0.5 max-lg:flex-col">
        <li><a class="block rounded-lg bg-[#1e2534] px-3 py-2 text-[.85rem] font-semibold text-hdk-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-hdk-focus max-lg:py-[11px]" href="#" aria-current="page">Overview</a></li>
        <li><a class="block rounded-lg px-3 py-2 text-[.85rem] font-semibold text-hdk-muted transition-colors duration-150 hover:bg-hdk-soft hover:text-hdk-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-hdk-focus motion-reduce:transition-none max-lg:py-[11px]" href="#">Reports</a></li>
        <li><a class="block rounded-lg px-3 py-2 text-[.85rem] font-semibold text-hdk-muted transition-colors duration-150 hover:bg-hdk-soft hover:text-hdk-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-hdk-focus motion-reduce:transition-none max-lg:py-[11px]" href="#">Alerts</a></li>
        <li><a class="block rounded-lg px-3 py-2 text-[.85rem] font-semibold text-hdk-muted transition-colors duration-150 hover:bg-hdk-soft hover:text-hdk-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-hdk-focus motion-reduce:transition-none max-lg:py-[11px]" href="#">Settings</a></li>
      </ul>
    </nav>
    <form class="ml-auto flex w-[280px] items-center gap-2 rounded-[9px] border border-hdk-line bg-[#0c0f16] pr-2 pl-3 text-hdk-muted transition-colors duration-150 focus-within:border-hdk-focus focus-within:outline-1 focus-within:outline-hdk-focus hover:border-[#39445c] motion-reduce:transition-none max-lg:m-0 max-lg:w-auto" role="search" action="#">
      <svg aria-hidden="true" width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round"><circle cx="11" cy="11" r="7"/><path d="m20 20-3.5-3.5"/></svg>
      <input class="min-w-0 flex-1 bg-transparent py-2 text-[.84rem] text-hdk-ink outline-0 placeholder:text-hdk-muted" type="search" name="q" placeholder="Search anything…" aria-label="Search" aria-keyshortcuts="Meta+K Control+K">
      <kbd class="rounded-[5px] border border-[#2a3245] bg-hdk-soft px-1.5 py-0.5 font-[inherit] text-[.68rem] text-hdk-muted" aria-hidden="true">⌘K</kbd>
    </form>
  </div>
  <div class="flex items-center gap-3.5 max-lg:ml-auto max-lg:gap-2.5">
    <button class="relative grid size-[34px] cursor-pointer place-items-center rounded-[9px] border border-hdk-line text-hdk-muted after:absolute after:top-[5px] after:right-1.5 after:size-[11px] after:rounded-full after:border-2 after:border-hdk-bg after:bg-[#f43f5e] hover:border-[#39445c] hover:text-hdk-ink focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-hdk-focus" type="button" aria-label="Notifications, 3 unread"><svg aria-hidden="true" width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg></button>
    <a class="grid size-[34px] place-items-center rounded-full bg-linear-135/srgb from-[#f59e0b] to-[#ef4444] text-[.78rem] font-extrabold text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-hdk-focus" href="#"><span aria-hidden="true">AS</span><span class="sr-only">Your account</span></a>
    <button class="toggle group flex size-10 cursor-pointer flex-col items-center justify-center gap-1 rounded-[9px] border border-hdk-line focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-hdk-focus lg:hidden" type="button" aria-expanded="false" aria-controls="hdk-panel" aria-label="Menu">
      <i class="block h-0.5 w-[18px] rounded-sm bg-hdk-ink transition-transform duration-200 group-aria-expanded:translate-y-1.5 group-aria-expanded:rotate-45 motion-reduce:transition-none"></i>
      <i class="block h-0.5 w-[18px] rounded-sm bg-hdk-ink transition-opacity duration-200 group-aria-expanded:opacity-0 motion-reduce:transition-none"></i>
      <i class="block h-0.5 w-[18px] rounded-sm bg-hdk-ink transition-transform duration-200 group-aria-expanded:-translate-y-1.5 group-aria-expanded:-rotate-45 motion-reduce:transition-none"></i>
    </button>
  </div>
</header>
CSS 
@theme {
  --breakpoint-lg: 62rem; /* 992px, the same collapse point as Bootstrap's navbar-expand-lg */
  --color-hdk-bg: #11151f;
  --color-hdk-ink: #e6eaf2;
  --color-hdk-muted: #8f99ad;
  --color-hdk-line: #242b3a;
  --color-hdk-soft: #1a202e;
  --color-hdk-focus: #67e8f9;
}
JavaScript 
/* Menu button (below 992px) toggles aria-expanded and data-open on the panel; Esc closes it.
   ⌘K / Ctrl+K opens the panel if it is collapsed and focuses the search field. */
(() => {
  const hd = document.querySelector('.hdk'); if (!hd) return;
  const toggle = hd.querySelector('.toggle'), panel = document.getElementById(toggle.getAttribute('aria-controls'));
  const input = hd.querySelector('input[type=search]');
  const isOpen = () => toggle.getAttribute('aria-expanded') === 'true';
  const set = open => { toggle.setAttribute('aria-expanded', open); panel.toggleAttribute('data-open', open); };
  toggle.addEventListener('click', () => set(!isOpen()));
  document.addEventListener('keydown', e => {
    if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
      e.preventDefault(); if (!input.offsetParent) set(true); input.focus();
    } else if (e.key === 'Escape' && isOpen()) { set(false); toggle.focus(); }
  });
})();

About this set

The header a dashboard or web app ships with, in a dark theme: a gradient logo mark, product navigation with a highlighted active page (Overview, Reports, Alerts, Settings), a search field with a ⌘K hint, a notification button with a red unread dot and a round avatar that links to the account page. The search is a real form with a search landmark, and pressing ⌘K or Ctrl+K anywhere focuses it; on a narrow screen the shortcut first opens the menu. The notification button is named Notifications, 3 unread, and the avatar initials are hidden from screen readers in favour of the text Your account. Below 992px the navigation and the search fold into a panel behind a menu button, while the bell and avatar stay in the bar. Use it for admin panels, analytics tools and any signed-in area. The icons are inline SVG that follow currentColor. The Bootstrap version sets data-bs-theme=”dark” on the .navbar, uses a .form-control for the search and draws the dot with position and rounded-circle utilities.

What’s included

  • Search form that ⌘K or Ctrl+K focuses
  • Active page highlighted and marked with aria-current
  • Notification button with an unread dot
  • Avatar link to the account page
  • Nav and search collapse behind a menu button below 992px

Accessibility

The product links sit in a nav labelled Main, the search is a form with role="search" and a labelled input that advertises its shortcut with aria-keyshortcuts, and the icon buttons have text names. The menu button has aria-expanded and aria-controls and Esc closes it. Focus shows as a cyan outline on the dark background and transitions switch off under prefers-reduced-motion.

Customise it

Change --hdk-bg, --hdk-ink, --hdk-muted, --hdk-line and --hdk-focus on .hdk; the logo and avatar gradients are single declarations. Bootstrap reads the same variables and --bs-navbar-*; in Tailwind edit the --color-hdk-* theme colours.