Mobile Menu

Full-height mobile navigation panel with search, language selector, and expandable menu sections.

WCAG 2.2 AA Reviewed April 2026

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

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.