Skip to main content

Mobile Menu

Full-height mobile navigation panel with search, language selector, and expandable menu sections.
WCAG 2.2 AA Reviewed April 2026 Accessibility notes

Mobile Menu — All Sections Collapsed

View HTML
<nav class="txds-mobile-menu" aria-label="Mobile navigation">
  <div class="txds-mobile-menu__header">
    <a class="txds-mobile-menu__logo" href="#">
      <img src="/assets/images/agency-logo-light.svg" alt="Texas Department of Agency" width="209" height="32">
    </a>
    <button type="button" class="txds-mobile-menu__close" aria-label="Close menu">
      <span class="txds-mobile-menu__close-label">Close</span>
      <span class="txds-mobile-menu__close-icon">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
      </span>
    </button>
  </div>
  <div class="txds-mobile-menu__lang">
    <button type="button" class="txds-lang-selector txds-lang-selector--outline" aria-haspopup="listbox" aria-expanded="false">
      <span class="txds-lang-selector__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-lang-selector__label">English</span>
    </button>
  </div>
  <div class="txds-mobile-menu__search">
    <div class="txds-mobile-menu__search-bar">
      <div class="txds-mobile-menu__search-field">
        <span class="txds-mobile-menu__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" aria-label="Search site">
      </div>
      <button type="button" class="txds-mobile-menu__search-btn">Search</button>
    </div>
  </div>
  <button type="button" class="txds-mobile-menu__item" aria-expanded="false">
    <span class="txds-mobile-menu__item-label">Pregnancy &amp; Adoption</span>
    <span class="txds-mobile-menu__item-icon">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
    </span>
  </button>
  <button type="button" class="txds-mobile-menu__item" aria-expanded="false">
    <span class="txds-mobile-menu__item-label">Family Care &amp; Support</span>
    <span class="txds-mobile-menu__item-icon">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
    </span>
  </button>
  <button type="button" class="txds-mobile-menu__item" aria-expanded="false">
    <span class="txds-mobile-menu__item-label">Health &amp; Wellness</span>
    <span class="txds-mobile-menu__item-icon">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
    </span>
  </button>
  <button type="button" class="txds-mobile-menu__item" aria-expanded="false">
    <span class="txds-mobile-menu__item-label">About TDA</span>
    <span class="txds-mobile-menu__item-icon">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
    </span>
  </button>
  <div class="txds-mobile-menu__subsection-title">About</div>
  <div class="txds-mobile-menu__subsection-link-row">
    <a class="txds-mobile-menu__subsection-link" href="#">About Us</a>
  </div>
  <div class="txds-mobile-menu__subsection-closed">
    <span>Directory</span>
  </div>
  <div class="txds-mobile-menu__subsection-link-row">
    <a class="txds-mobile-menu__subsection-link" href="#">Texas State Agencies</a>
  </div>
  <div class="txds-mobile-menu__subsection-viewall-row">
    <a class="txds-mobile-menu__view-all" href="#">
      View all About TDA
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"/><polyline points="12 8 16 12 12 16"/></svg>
    </a>
  </div>
</nav>

Menu Item (Level 2)

Closed

View HTML
<div class="txds-mobile-menu-doc-frame">
  <button type="button" class="txds-mobile-menu__item" aria-expanded="false">
    <span class="txds-mobile-menu__item-label">Licenses &amp; Permits</span>
    <span class="txds-mobile-menu__item-icon">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
    </span>
  </button>
</div>

Open

Licenses & Permits
View HTML
<div class="txds-mobile-menu-doc-frame">
  <div class="txds-mobile-menu__item txds-mobile-menu__item--expanded" aria-expanded="true">
    <span class="txds-mobile-menu__item-label">Licenses &amp; Permits</span>
    <span class="txds-mobile-menu__item-icon">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="5" y1="12" x2="19" y2="12"/></svg>
    </span>
    <div class="txds-mobile-menu__item-divider"></div>
  </div>
</div>

Menu Subsection Header (Level 3)

View HTML
<div class="txds-mobile-menu-doc-frame txds-mobile-menu-doc-frame-stack">
  <div class="txds-mobile-menu__subsection-closed">
    <span>About</span>
  </div>
  <div class="txds-mobile-menu__subsection-title">About</div>
  <div class="txds-mobile-menu__subsection-link-row">
    <a class="txds-mobile-menu__subsection-link" href="#">About Us</a>
  </div>
  <div class="txds-mobile-menu__subsection-link-row">
    <a class="txds-mobile-menu__subsection-link" href="#">Texas State Agencies</a>
  </div>
  <div class="txds-mobile-menu__subsection-viewall-row">
    <a class="txds-mobile-menu__view-all" href="#">
      View all About TDA
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><circle cx="12" cy="12" r="10"/><polyline points="12 8 16 12 12 16"/></svg>
    </a>
  </div>
</div>

Admin Header

Link

View HTML
<div class="txds-mobile-menu-doc-frame">
  <div class="txds-mobile-menu__admin-link">
    <a href="#">About Us</a>
  </div>
</div>

Language Button

View HTML
<div class="txds-mobile-menu-doc-frame txds-mobile-menu-doc-frame-padded">
  <button type="button" class="txds-lang-selector txds-lang-selector--outline txds-lang-selector--button" aria-label="Switch language">
    <span class="txds-lang-selector__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-lang-selector__label">English</span>
  </button>
</div>

Social Icons

View HTML
<div class="txds-mobile-menu-doc-frame">
  <div class="txds-mobile-menu__admin-social">
    <span class="txds-mobile-menu__social-icon" aria-label="X (formerly Twitter)">
      <i class="bi bi-twitter-x" aria-hidden="true"></i>
    </span>
    <span class="txds-mobile-menu__social-icon" aria-label="YouTube">
      <i class="bi bi-youtube" aria-hidden="true"></i>
    </span>
    <span class="txds-mobile-menu__social-icon" aria-label="LinkedIn">
      <i class="bi bi-linkedin" aria-hidden="true"></i>
    </span>
    <span class="txds-mobile-menu__social-icon" aria-label="Facebook">
      <i class="bi bi-facebook" aria-hidden="true"></i>
    </span>
  </div>
</div>

Example link pattern: <a href="https://www.youtube.com/@YourAgency" aria-label="YouTube"><i class="bi bi-youtube" aria-hidden="true"></i></a>

Search

View HTML
<div class="txds-mobile-menu-doc-frame">
  <div class="txds-mobile-menu__search txds-mobile-menu-doc-search-bg">
    <div class="txds-mobile-menu__search-bar">
      <div class="txds-mobile-menu__search-field">
        <span class="txds-mobile-menu__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" aria-label="Search site">
      </div>
      <button type="button" class="txds-mobile-menu__search-btn">Search</button>
    </div>
  </div>
</div>

Mobile Menu Button — Default

View HTML
<button type="button" class="txds-mobile-menu-btn txds-mobile-menu-btn--default">
  <span class="txds-mobile-menu-btn__label">Menu</span>
  <span class="txds-mobile-menu-btn__icon">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="18" x2="20" y2="18"/></svg>
  </span>
</button>

Mobile Menu Button — Clicked

View HTML
<button type="button" class="txds-mobile-menu-btn txds-mobile-menu-btn--clicked">
  <span class="txds-mobile-menu-btn__label">Close</span>
  <span class="txds-mobile-menu-btn__icon">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>
  </span>
</button>

CSS Classes

Class Description
txds-mobile-menu Outer panel container (375px, flex column, drop-shadow).
txds-mobile-menu__header Top bar with logo and close button (72px height).
txds-mobile-menu__logo Agency logo link.
txds-mobile-menu__close Close button with label and X icon.
txds-mobile-menu__close-label Close text label.
txds-mobile-menu__close-icon X icon wrapper (24x24).
txds-mobile-menu__lang Language button row.
txds-mobile-menu__search Search bar row.
txds-mobile-menu__search-bar Inner flex wrapper for input + button.
txds-mobile-menu__search-field Search input wrapper with icon.
txds-mobile-menu__search-btn Search submit button.
txds-mobile-menu__item Collapsed menu item (semibold label + chevron).
txds-mobile-menu__item--expanded Expanded state (extrabold label + minus icon + gold divider).
txds-mobile-menu__item-divider Gold accent divider below expanded item (3px, secondary-60).
txds-mobile-menu__subsection Dark panel containing subsection titles and links (flex column, primary-50).
txds-mobile-menu__subsection-title Subsection heading row (14px extrabold, primary-50 bg, py 16px px 40px).
txds-mobile-menu__subsection-link-row Subsection link row wrapper (primary-50 bg, py 12px px 40px, gap 16px).
txds-mobile-menu__subsection-link Subsection link text (14px medium, underlined, white).
txds-mobile-menu__subsection-viewall-row View-all row wrapper (primary-50 bg, py 12px px 40px, gap 16px).
txds-mobile-menu__view-all View-all link with circle-arrow icon, right-aligned (flex-end, gap 13px).
txds-mobile-menu__subsection-closed Subsection row (closed state) — semibold 14px white text on primary-50.
txds-mobile-menu__admin-link Admin bar link row — medium 16px underlined white text on primary-60.
txds-mobile-menu__admin-social Admin bar social icons row — spaced icons on primary-60.
txds-mobile-menu-btn Mobile menu trigger button (Menu/Close label + icon).
txds-mobile-menu-btn--default Default state — gray-70 text and icon.
txds-mobile-menu-btn--clicked Clicked/open state — primary-50 text and icon.