Open demo

CSS code

HTML 
<header class="lc">
  <a class="lc-logo" href="#">Atlas</a>
  <button class="lc-toggle" type="button" aria-expanded="false" aria-controls="lc-menu" aria-label="Menu" data-menu-button><i></i><i></i><i></i></button>
  <div class="lc-menu" id="lc-menu">
    <nav aria-label="Main">
      <ul>
        <li><a href="#" aria-current="page">Platform</a></li>
        <li><a href="#">Pricing</a></li>
        <li><a href="#">Partners</a></li>
      </ul>
    </nav>
    <div class="lc-right">
      <div class="lc-loc">
        <label class="lc-sr" for="lc-lang">Language and region</label>
        <select id="lc-lang" name="locale">
        <option lang="en-GB">English (UK)</option>
        <option lang="en-US">English (US)</option>
        <option lang="de">Deutsch</option>
        <option lang="lv">Latviešu</option>
        </select>
      </div>
      <a class="lc-cta" href="#">Contact sales</a>
    </div>
  </div>
</header>
CSS 
/* Header with a locale switcher: a native <select> with a visually hidden label, so the browser handles the
   keyboard and the phone picker. Below 992px the links, switcher and button fold behind a menu button. */
.lc{position:sticky;top:0;z-index:10;display:flex;flex-wrap:wrap;align-items:center;min-height:70px;padding:0 34px;
  background:#fff;border-bottom:1px solid #ecedf2;color:#1a1d26}
.lc,.lc *{box-sizing:border-box}
.lc a{text-decoration:none}
.lc ul{list-style:none;margin:0;padding:0}
.lc a:focus-visible,.lc button:focus-visible{outline:2px solid #4f46e5;outline-offset:2px}
.lc-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.lc-logo{margin-right:30px;font-weight:800;font-size:1.05rem;color:#1a1d26}
.lc-menu{flex:1;display:flex;align-items:center}
.lc-menu ul{display:flex;gap:3px}
.lc-menu nav a{display:block;padding:9px 13px;font-size:.89rem;font-weight:600;color:#4b5468;border-radius:8px}
.lc-menu nav a:hover,.lc-menu nav a[aria-current="page"]{background:#f3f4f9;color:#1a1d26}
.lc-right{display:flex;align-items:center;gap:10px;margin-left:auto}
.lc-loc{position:relative}
.lc-loc select{-webkit-appearance:none;appearance:none;margin:0;font:inherit;font-size:.85rem;font-weight:600;color:#4b5468;
  padding:9px 32px 9px 13px;border:1px solid #858da1;border-radius:9px;background:#fff;cursor:pointer}
.lc-loc select:focus{outline:0;border-color:#4f46e5;box-shadow:0 0 0 3px #e0e7ff}
.lc-loc::after{content:"";position:absolute;right:13px;top:calc(50% - 5px);width:7px;height:7px;
  border-right:2px solid #6b7385;border-bottom:2px solid #6b7385;transform:rotate(45deg);pointer-events:none}
.lc-cta{font-size:.86rem;font-weight:700;padding:10px 18px;border-radius:10px;background:#1a1d26;color:#fff}
.lc-toggle{display:none;flex:none;width:44px;height:44px;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;padding:0;background:#fff;border:1px solid #d9dfe8;border-radius:10px;cursor:pointer}
.lc-toggle i{display:block;width:20px;height:2px;border-radius:2px;background:#1a1d26;transition:transform .2s,opacity .2s}
.lc-toggle[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.lc-toggle[aria-expanded="true"] i:nth-child(2){opacity:0}
.lc-toggle[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:991.98px){
  .lc{min-height:0;padding:10px 16px}
  .lc-toggle{display:flex;margin-left:auto}
  .lc-menu{display:none;flex:none;flex-basis:100%;flex-direction:column;align-items:stretch;padding:6px 0 14px;border-top:1px solid #ecedf2}
  .lc-menu[data-open]{display:flex}
  .lc-menu ul{flex-direction:column}
  .lc-menu nav a{padding:11px 12px}
  .lc-right{margin:8px 0 0;padding-top:14px;border-top:1px solid #ecedf2}
  .lc-cta{flex:1;text-align:center}
}
@media (prefers-reduced-motion:reduce){.lc *{transition:none!important}}
JavaScript 
/* Menu button: toggles aria-expanded on itself and data-open on the menu it controls (aria-controls).
   Esc closes an open menu and returns focus to the button; widening past 992px resets it. */
document.querySelectorAll('[data-menu-button]').forEach(btn => {
  const menu = document.getElementById(btn.getAttribute('aria-controls'));
  if (!menu) return;
  const set = open => { btn.setAttribute('aria-expanded', String(open)); menu.toggleAttribute('data-open', open); };
  btn.addEventListener('click', () => set(btn.getAttribute('aria-expanded') !== 'true'));
  document.addEventListener('keydown', e => {
    if (e.key === 'Escape' && btn.getAttribute('aria-expanded') === 'true') { set(false); btn.focus(); }
  });
  matchMedia('(min-width: 992px)').addEventListener('change', e => { if (e.matches) set(false); });
});

Bootstrap 5 code

Requires: Bootstrap 5.3.8 CSS, Bootstrap 5.3.8 JS bundle

HTML 
<header class="navbar navbar-expand-lg lc">
  <a class="navbar-brand lc-logo" href="#">Atlas</a>
  <button class="navbar-toggler lc-toggle" type="button" data-bs-toggle="collapse" data-bs-target="#lc-menu" aria-controls="lc-menu" aria-expanded="false" aria-label="Menu"><i></i><i></i><i></i></button>
  <div class="collapse navbar-collapse" id="lc-menu">
    <nav aria-label="Main">
      <ul class="navbar-nav">
        <li class="nav-item"><a class="nav-link active" href="#" aria-current="page">Platform</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Partners</a></li>
      </ul>
    </nav>
    <div class="lc-right d-flex align-items-center ms-lg-auto">
      <label class="visually-hidden" for="lc-lang">Language and region</label>
      <select class="form-select" id="lc-lang" name="locale">
        <option lang="en-GB">English (UK)</option>
        <option lang="en-US">English (US)</option>
        <option lang="de">Deutsch</option>
        <option lang="lv">Latviešu</option>
      </select>
      <a class="btn lc-cta" href="#">Contact sales</a>
    </div>
  </div>
</header>
CSS 
/* Bootstrap .navbar-expand-lg with a .form-select for the locale (its chevron recoloured through
   --bs-form-select-bg-img) and a .btn. Below 992px links, switcher and button fold into the collapse. */
.lc{--bs-navbar-padding-x:34px;--bs-navbar-padding-y:0;--bs-navbar-color:#4b5468;--bs-navbar-hover-color:#1a1d26;
  --bs-navbar-active-color:#1a1d26;--bs-navbar-brand-color:#1a1d26;--bs-navbar-brand-hover-color:#1a1d26;
  --bs-navbar-brand-padding-y:0;--bs-navbar-brand-margin-end:30px;--bs-navbar-brand-font-size:1.05rem;--bs-navbar-nav-link-padding-x:13px;
  position:sticky;top:0;z-index:10;min-height:70px;background:#fff;border-bottom:1px solid #ecedf2}
.lc a{text-decoration:none}
.lc a:focus-visible,.lc button:focus-visible{outline:2px solid #4f46e5;outline-offset:2px;box-shadow:none}
.lc-logo{font-weight:800}
.lc .navbar-nav{--bs-nav-link-padding-y:9px;--bs-nav-link-font-size:.89rem;--bs-nav-link-font-weight:600;gap:3px}
.lc .nav-link{border-radius:8px}
.lc .nav-link:hover,.lc .nav-link.active{background:#f3f4f9}
.lc-right{gap:10px}
.lc .form-select{--bs-form-select-bg-img:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%236b7385' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4' d='m3 5.5 5 5 5-5'/%3e%3c/svg%3e");width:auto;padding:9px 32px 9px 13px;font-size:.85rem;font-weight:600;
  line-height:normal;color:#4b5468;border-color:#858da1;border-radius:9px;background-position:right 11px center;background-size:11px 11px;cursor:pointer}
.lc .form-select:focus{border-color:#4f46e5;box-shadow:0 0 0 3px #e0e7ff}
.lc-cta{--bs-btn-font-size:.86rem;--bs-btn-font-weight:700;--bs-btn-line-height:normal;--bs-btn-padding-x:18px;--bs-btn-padding-y:10px;
  --bs-btn-border-width:0;--bs-btn-border-radius:10px;--bs-btn-color:#fff;--bs-btn-bg:#1a1d26;--bs-btn-hover-color:#fff;
  --bs-btn-hover-bg:#1a1d26;--bs-btn-active-color:#fff;--bs-btn-active-bg:#000;--bs-btn-focus-box-shadow:none}
.lc .navbar-toggler{width:44px;height:44px;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:5px;background:#fff;border:1px solid #d9dfe8;border-radius:10px}
.lc .navbar-toggler:focus{box-shadow:none}
.lc .navbar-toggler i{display:block;width:20px;height:2px;border-radius:2px;background:#1a1d26;transition:transform .2s,opacity .2s}
.lc .navbar-toggler[aria-expanded="true"] i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.lc .navbar-toggler[aria-expanded="true"] i:nth-child(2){opacity:0}
.lc .navbar-toggler[aria-expanded="true"] i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (min-width:992px){.lc .navbar-toggler{display:none}}
@media (max-width:991.98px){
  .lc{--bs-navbar-padding-x:16px;--bs-navbar-padding-y:10px;min-height:0}
  .lc .navbar-collapse > nav{padding-top:6px;border-top:1px solid #ecedf2}
  .lc .navbar-nav{--bs-nav-link-padding-x:12px;--bs-nav-link-padding-y:11px}
  .lc-right{margin:8px 0 14px;padding-top:14px;border-top:1px solid #ecedf2}
  .lc-cta{flex:1}
}
@media (prefers-reduced-motion:reduce){.lc *{transition:none!important}}
JavaScript 
/* Bootstrap's Collapse has no Esc handling of its own: close an open navbar menu on Esc
   and return focus to its toggler. */
document.addEventListener('keydown', e => {
  if (e.key !== 'Escape') return;
  document.querySelectorAll('.navbar-collapse.show').forEach(menu => {
    bootstrap.Collapse.getOrCreateInstance(menu, { toggle: false }).hide();
    document.querySelector(`[data-bs-target="#${menu.id}"]`)?.focus();
  });
});

Tailwind 4 code

Requires: Tailwind CSS 4

HTML 
<header class="sticky top-0 z-10 flex min-h-[70px] flex-wrap items-center border-b border-[#ecedf2] bg-white px-[34px] text-[#1a1d26] max-lg:min-h-0 max-lg:px-4 max-lg:py-2.5">
  <a class="mr-[30px] text-[1.05rem] font-extrabold text-[#1a1d26] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5]" href="#">Atlas</a>
  <button class="group flex size-11 flex-none cursor-pointer flex-col items-center justify-center gap-[5px] rounded-[10px] border border-[#d9dfe8] bg-white p-0 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5] lg:hidden max-lg:ml-auto" type="button" aria-expanded="false" aria-controls="lc-menu" aria-label="Menu" data-menu-button><i class="block h-0.5 w-5 rounded-sm bg-[#1a1d26] transition-transform duration-200 motion-reduce:transition-none group-aria-expanded:translate-y-[7px] group-aria-expanded:rotate-45"></i><i class="block h-0.5 w-5 rounded-sm bg-[#1a1d26] transition-opacity duration-200 motion-reduce:transition-none group-aria-expanded:opacity-0"></i><i class="block h-0.5 w-5 rounded-sm bg-[#1a1d26] transition-transform duration-200 motion-reduce:transition-none group-aria-expanded:-translate-y-[7px] group-aria-expanded:-rotate-45"></i></button>
  <div class="hidden flex-1 items-center data-open:flex lg:flex max-lg:flex-none max-lg:basis-full max-lg:flex-col max-lg:items-stretch max-lg:border-t max-lg:border-[#ecedf2] max-lg:pt-1.5 max-lg:pb-3.5" id="lc-menu">
    <nav aria-label="Main">
      <ul class="flex gap-[3px] max-lg:flex-col">
        <li><a class="block rounded-lg px-[13px] py-[9px] text-[.89rem] font-semibold text-[#4b5468] hover:bg-[#f3f4f9] hover:text-[#1a1d26] aria-[current=page]:bg-[#f3f4f9] aria-[current=page]:text-[#1a1d26] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5] max-lg:px-3 max-lg:py-[11px]" href="#" aria-current="page">Platform</a></li>
        <li><a class="block rounded-lg px-[13px] py-[9px] text-[.89rem] font-semibold text-[#4b5468] hover:bg-[#f3f4f9] hover:text-[#1a1d26] aria-[current=page]:bg-[#f3f4f9] aria-[current=page]:text-[#1a1d26] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5] max-lg:px-3 max-lg:py-[11px]" href="#">Pricing</a></li>
        <li><a class="block rounded-lg px-[13px] py-[9px] text-[.89rem] font-semibold text-[#4b5468] hover:bg-[#f3f4f9] hover:text-[#1a1d26] aria-[current=page]:bg-[#f3f4f9] aria-[current=page]:text-[#1a1d26] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5] max-lg:px-3 max-lg:py-[11px]" href="#">Partners</a></li>
      </ul>
    </nav>
    <div class="ml-auto flex items-center gap-2.5 max-lg:mt-2 max-lg:ml-0 max-lg:border-t max-lg:border-[#ecedf2] max-lg:pt-3.5">
      <div class="relative">
        <label class="sr-only" for="lc-lang">Language and region</label>
        <select class="cursor-pointer appearance-none rounded-[9px] border border-[#858da1] bg-white py-[9px] pr-8 pl-[13px] text-[.85rem] font-semibold text-[#4b5468] outline-none focus:border-[#4f46e5] focus:shadow-[0_0_0_3px_#e0e7ff]" id="lc-lang" name="locale">
        <option lang="en-GB">English (UK)</option>
        <option lang="en-US">English (US)</option>
        <option lang="de">Deutsch</option>
        <option lang="lv">Latviešu</option>
        </select>
        <span class="pointer-events-none absolute top-[calc(50%-5px)] right-[13px] size-[7px] rotate-45 border-r-2 border-b-2 border-[#6b7385]" aria-hidden="true"></span>
      </div>
      <a class="rounded-[10px] bg-[#1a1d26] px-[18px] py-2.5 text-center text-[.86rem] font-bold text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#4f46e5] max-lg:flex-1" href="#">Contact sales</a>
    </div>
  </div>
</header>
CSS 
@theme {
  --breakpoint-lg: 62rem; /* 992px, the same collapse point as Bootstrap's navbar-expand-lg */
}
JavaScript 
/* Menu button: toggles aria-expanded on itself and data-open on the menu it controls (aria-controls).
   Esc closes an open menu and returns focus to the button; widening past 992px resets it. */
document.querySelectorAll('[data-menu-button]').forEach(btn => {
  const menu = document.getElementById(btn.getAttribute('aria-controls'));
  if (!menu) return;
  const set = open => { btn.setAttribute('aria-expanded', String(open)); menu.toggleAttribute('data-open', open); };
  btn.addEventListener('click', () => set(btn.getAttribute('aria-expanded') !== 'true'));
  document.addEventListener('keydown', e => {
    if (e.key === 'Escape' && btn.getAttribute('aria-expanded') === 'true') { set(false); btn.focus(); }
  });
  matchMedia('(min-width: 992px)').addEventListener('change', e => { if (e.matches) set(false); });
});

About this set

A sticky business header with a language and region switcher next to the call to action: logo and three links on the left, and on the right a compact select (English UK, English US, Deutsch, Latviešu) beside a dark “Contact sales” button. It suits any site that serves several markets. The switcher is a native select with a visually hidden label, styled with appearance:none and a CSS chevron, so the browser handles keyboard use and the phone’s own picker, with no custom dropdown to maintain. Each option has its own lang attribute, so screen readers pronounce Deutsch and Latviešu correctly. Below 992px the links, the switcher and the sales button all fold behind a menu button and open as a stacked panel, with the select and a full-width button in the last row. The Bootstrap version uses .form-select with its chevron recoloured through –bs-form-select-bg-img.

What’s included

  • Native select with a visually hidden label
  • lang attribute on each language option
  • Custom chevron via appearance:none, no JavaScript dropdown
  • Links, switcher and button fold into one panel below 992px
  • Bootstrap .form-select restyled through --bs-form-select-bg-img

Accessibility

The select has a real label, "Language and region", that is visually hidden, and each option carries a lang attribute. The links sit in a nav labelled Main with aria-current="page" on the current one. The menu button is a real button with an accessible name that reports aria-expanded; it opens with Enter or Space, and Esc closes the menu and returns focus to the button. The select shows an indigo border and ring on focus, and the links and buttons a 2px outline.

Customise it

Change the options for your locales and the #858da1 border and #4f46e5 focus colour on .lc-loc select. In Bootstrap edit --bs-form-select-bg-img and border-color on .lc .form-select; in Tailwind edit the border-[…] and focus: utilities on the select.