My WhatsApp Header Button Became an Ask AI Nav Entry

One morning I opened the staging preview and something was missing from the header: the green WhatsApp consultation pill. That little button with the chat-bubble icon, parked in the top-right corner, is gone. On desktop, what remains is only the sparkle icon for AI, plus the locale and theme toggles that were already there. After tracing the three most recent commits, I realized this was not just a button swap. The Ask AI feature moved up into the main navigation as a permanent entry, while the external consultation door was closed off from the header.

My first guess: pure cosmetics. That guess was wrong. What actually happened was a change of placement contract. The WhatsApp button was an external call to action, a one-shot action that throws visitors out of the site. A navigation entry is a fixed address on the site's map, a place for features you want always visible. The two are not interchangeable.

One Thread, Three Commits

In Navbar.tsx, the first commit's diff shows the consultation pill removed from the desktop action row, together with its green gradient and shadow. The MessageCircle import went away with it. The interesting part: the consultation slot in the mobile menu was not deleted, it was reassigned. The same button with the same green gradient now opens the /ai page via router.push, only the icon changed to a sparkle.

- import { MessageCircle, ... }
+ import { Sparkles, ... }

-  <a href="https://wa.me/..." className="... bg-gradient-to-r
-    from-[#238636] to-[#2ea043] ...">
-    <MessageCircle /> {t("Navbar.consultation")}
-  </a>
+  <button onClick={() => router.push("/ai")}
+    className="... bg-gradient-to-r from-[#238636] to-[#2ea043] ...">
+    <Sparkles /> {t("AiSearch.openLabel")}
+  </button>

The second commit moved this feature from a standalone action button into the segmented navigation. The nav list in my project is JSON-driven, so adding an entry was just one more line in navbar.json:

[
  { "labelKey": "Nav.home", "href": "/" },
  { "labelKey": "Nav.about", "href": "/about" },
  { "labelKey": "Nav.activity", "href": "/activity" },
  { "labelKey": "Nav.portfolio", "href": "/portfolio" },
  { "labelKey": "Nav.blog", "href": "/blog" },
  { "labelKey": "Nav.ai", "href": "/ai" }
]

The third commit completed the label through the next-intl message files [4]. The ai key in the Nav namespace got Ask AI for the English locale and Tanya AI for Indonesian. One key, two languages, without touching the component.

Why Nav, Not Another Button

The reasoning is simple: the main navigation is the site's feature map, and the map has to be honest. Nielsen Norman Group places the primary navigation menu in the header for desktop sites, because when there is room, navigation should be displayed rather than hidden behind a hamburger; out of sight tends to mean out of mind [1]. The same guide reminds us that menu labels must clearly describe the content or feature, not use internal jargon only their makers understand [1]. Ask AI meets both conditions: a feature meant for frequent use, with a label that explains itself.

Contrast matters too. Menu link text has to be immediately distinguishable from its background to be findable [1], and WCAG draws the line at a minimum text contrast ratio of 4.5:1, with large text needing 3:1 [3]. The emerald accent I picked for this entry clears that bar on both light and dark backgrounds, and that is the difference between an accent color with intent and a random color choice.

Accessibility also comes with a subtle contract. The <nav> element forms a navigation landmark for screen readers, and when a page has more than one navigation landmark, each one needs a unique label so they don't blur together [2]. My site header has the segmented main nav plus a small nav in the footer; distinct labels keep the two easy to tell apart.

What Really Changed Was Not the Placement

What disappeared along with the WhatsApp pill is not just a button but the "chat with a human" option from every page. In exchange, visitors now get a help path that stays on my own site: ask the AI, no jump to a messaging app. For a personal site this trade makes sense; conversations stay recorded in my own system, and one help door (the AI) is easier to maintain than two doors with different promises.

The pattern is borrowable by anyone reworking a header. First sort what is genuinely a feature versus a one-shot action; features go into navigation, actions can stay as contextual buttons on the pages where they matter. Resist the urge to put everything in the header, because a crowded header reads as an unreadable header. Rearranging the chat layout under a fixed navbar taught me something similar: small placement decisions carry a lot of weight in how a site feels.

Now every time I open the site, the Ask AI entry sits neatly after Blog with its sparkle icon. A calmer header, an honest feature map, and a help door that is always visible. The WhatsApp button is gone, but the ability to ask is not; it just moved addresses.

Sources

• NN/g, Menu-Design Checklist [1]
• W3C WAI, Navigation Landmark [2]
• W3C WAI, Understanding WCAG SC 1.4.3 [3]
• next-intl, Rendering translations [4]