Desktop Navigation

Desktop navigation bar. Menu-only and Combined variants.

WCAG 2.2 AA Reviewed April 2026

Menu Only

Navigation bar with large extrabold nav buttons. Items with submenus show a dropdown chevron.

View HTML

<div class="txds-desktop-nav txds-desktop-nav--menu-only">
  <div class="txds-desktop-nav__item-group">
    <button type="button" class="txds-desktop-nav__item txds-desktop-nav__item--active" aria-expanded="true">
      <span class="txds-desktop-nav__item-inner">
        <span class="txds-desktop-nav__item-label">Services</span>
        <span class="txds-desktop-nav__item-chevron"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polyline points="4 6 8 10 12 6"/></svg></span>
      </span>
      <span class="txds-desktop-nav__item-bar"></span>
    </button>
    <ul class="txds-desktop-nav__child-links">
      <li><a href="#">Child service link</a></li>
    </ul>
  </div>
  <button type="button" class="txds-desktop-nav__item" aria-expanded="false">
    <span class="txds-desktop-nav__item-inner">
      <span class="txds-desktop-nav__item-label">Programs</span>
      <span class="txds-desktop-nav__item-chevron"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polyline points="4 6 8 10 12 6"/></svg></span>
    </span>
    <span class="txds-desktop-nav__item-bar"></span>
  </button>
  <a class="txds-desktop-nav__item" href="#">
    <span class="txds-desktop-nav__item-inner">
      <span class="txds-desktop-nav__item-label">News</span>
    </span>
    <span class="txds-desktop-nav__item-bar"></span>
  </a>
  <a class="txds-desktop-nav__item" href="#">
    <span class="txds-desktop-nav__item-inner">
      <span class="txds-desktop-nav__item-label">Events</span>
    </span>
    <span class="txds-desktop-nav__item-bar"></span>
  </a>
  <a class="txds-desktop-nav__item" href="#">
    <span class="txds-desktop-nav__item-inner">
      <span class="txds-desktop-nav__item-label">About us</span>
    </span>
    <span class="txds-desktop-nav__item-bar"></span>
  </a>
  <a class="txds-desktop-nav__item" href="#">
    <span class="txds-desktop-nav__item-inner">
      <span class="txds-desktop-nav__item-label">Contact</span>
    </span>
    <span class="txds-desktop-nav__item-bar"></span>
  </a>
</div>

Button States

Three interaction states for each navigation button:

Default — white text, chevron down, no bar
Hover — warm cream text (secondary-10), no bar
Active — white text, chevron flips up, 3px white underline bar

View HTML

<div class="txds-desktop-nav txds-desktop-nav--menu-only" style="gap:64px;">
  <button type="button" class="txds-desktop-nav__item" aria-expanded="false">
    <span class="txds-desktop-nav__item-inner">
      <span class="txds-desktop-nav__item-label">Default</span>
      <span class="txds-desktop-nav__item-chevron"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polyline points="4 6 8 10 12 6"/></svg></span>
    </span>
    <span class="txds-desktop-nav__item-bar"></span>
  </button>
  <button type="button" class="txds-desktop-nav__item" aria-expanded="false" style="--hover-preview:1;">
    <span class="txds-desktop-nav__item-inner">
      <span class="txds-desktop-nav__item-label" style="color:var(--txds-color-secondary-10);">Hover</span>
      <span class="txds-desktop-nav__item-chevron"><svg viewBox="0 0 16 16" fill="none" stroke="var(--txds-color-secondary-10)" stroke-width="2" aria-hidden="true"><polyline points="4 6 8 10 12 6"/></svg></span>
    </span>
    <span class="txds-desktop-nav__item-bar"></span>
  </button>
  <button type="button" class="txds-desktop-nav__item txds-desktop-nav__item--active" aria-expanded="true">
    <span class="txds-desktop-nav__item-inner">
      <span class="txds-desktop-nav__item-label">Active</span>
      <span class="txds-desktop-nav__item-chevron"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><polyline points="4 6 8 10 12 6"/></svg></span>
    </span>
    <span class="txds-desktop-nav__item-bar"></span>
  </button>
</div>

Combined (Logo + Navigation + Search)

A compact navigation bar with the agency logo, inline links, a language selector, and a search bar.

View HTML

<div class="txds-preview-wide" style="min-width: 980px;">
  <div class="txds-desktop-nav txds-desktop-nav--combined">
    <div class="txds-desktop-nav__left">
      <a class="txds-desktop-nav__logo" href="#">
        <img src="/assets/images/agency-logo.svg" alt="Texas Department of Agency" width="209" height="32">
      </a>
      <ul class="txds-desktop-nav__links">
        <li><a href="#">Services</a></li>
        <li><a href="#">Programs</a></li>
        <li><a href="#">About us</a></li>
      </ul>
    </div>
    <div class="txds-desktop-nav__controls">
      <button type="button" class="txds-desktop-nav__lang-btn">English</button>
      <div class="txds-desktop-nav__search">
        <div class="txds-desktop-nav__search-input">
          <span class="txds-desktop-nav__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…">
        </div>
        <button type="button" class="txds-desktop-nav__search-btn">Search</button>
      </div>
    </div>
  </div>
</div>

CSS Classes

Class	Description
`txds-desktop-nav`	Base navigation bar container.
`txds-desktop-nav--menu-only`	Menu-only variant with large nav buttons on primary-50 background.
`txds-desktop-nav--combined`	Combined variant with logo, nav links, language, and search on primary-60 background.
`txds-desktop-nav__item`	Individual nav button (menu-only variant).
`txds-desktop-nav__item-group`	Wrapper for a top-level menu item that reveals child links.
`txds-desktop-nav__item-label`	Text label inside a nav button.
`txds-desktop-nav__item-chevron`	Dropdown chevron icon inside a nav button.
`txds-desktop-nav__item-bar`	Active indicator bar beneath a nav button.
`txds-desktop-nav__left`	Left section wrapper (combined variant) — logo + links.
`txds-desktop-nav__logo`	Logo container (combined variant).
`txds-desktop-nav__links`	Inline nav link list (combined variant).
`txds-desktop-nav__child-links`	Child link list revealed beneath a top-level navigation link.
`txds-desktop-nav__controls`	Right-side controls — language button + search bar (combined variant).
`txds-desktop-nav__lang-btn`	Language selector button.
`txds-desktop-nav__search`	Search bar wrapper.
`txds-desktop-nav__search-btn`	Gold "Search" submit button.
`txds-desktop-nav__item--active`	Active/expanded state — white underline bar, chevron rotates up.