Header Bar

Site header with agency branding, language selector, and search. Collapses to a hamburger menu on mobile.

WCAG 2.2 AA Reviewed April 2026

Desktop — Default

View HTML

<header class="txds-header txds-header--desktop">
  <a class="txds-header__logo" href="#">
    <img class="txds-header__logo-mark" src="/assets/images/agency-logo-light.svg" alt="Texas Department of Agency" width="209" height="32">
  </a>
  <div class="txds-header__controls">
    <button type="button" class="txds-header__lang-btn" aria-label="Select language: English">
      <span class="txds-header__lang-icon">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 014 10 15.3 15.3 0 01-4 10 15.3 15.3 0 01-4-10 15.3 15.3 0 014-10z"/></svg>
      </span>
      <span class="txds-header__lang-label">English</span>
    </button>
    <div class="txds-header__search">
      <div class="txds-header__search-field">
        <span class="txds-header__search-icon">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
        </span>
        <input type="search" placeholder="Search…" aria-label="Search site">
      </div>
      <button type="button" class="txds-header__search-btn">Search</button>
    </div>
  </div>
</header>

Mobile — Closed, Light

View HTML

<header class="txds-header txds-header--mobile txds-header--light" style="max-width:375px;">
  <a class="txds-header__logo" href="#">
    <img class="txds-header__logo-mark" src="/assets/images/agency-logo-light.svg" alt="Texas Department of Agency" width="209" height="32">
  </a>
  <button type="button" class="txds-header__menu-toggle" aria-expanded="false" aria-label="Open menu">
    <span class="txds-header__menu-toggle-label">Menu</span>
    <span class="txds-header__menu-toggle-icon">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
    </span>
  </button>
</header>

Mobile — Closed, Dark

View HTML

<header class="txds-header txds-header--mobile txds-header--dark" style="max-width:375px;">
  <a class="txds-header__logo" href="#">
    <img class="txds-header__logo-mark" src="/assets/images/agency-logo.svg" alt="Texas Department of Agency" width="209" height="32">
  </a>
  <button type="button" class="txds-header__menu-toggle" aria-expanded="false" aria-label="Open menu">
    <span class="txds-header__menu-toggle-label">Menu</span>
    <span class="txds-header__menu-toggle-icon">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
    </span>
  </button>
</header>

CSS Classes

Class	Description
`txds-header`	Base header container.
`txds-header--desktop`	Desktop variant with logo, language button, and search bar.
`txds-header--mobile`	Mobile closed variant with logo and menu toggle.
`txds-header--light`	Light style (white background) for mobile closed state.
`txds-header--dark`	Dark translucent style for mobile closed state.
`txds-header--mobile-open`	Mobile open state showing full menu panel.
`txds-header__logo`	Agency logo link.
`txds-header__controls`	Right-side controls wrapper (language + search).
`txds-header__lang-btn`	Language selector button.
`txds-header__search`	Search bar wrapper.
`txds-header__search-btn`	Search submit button.
`txds-header__menu-toggle`	Mobile menu open/close toggle button.