Navigation People Can Explore: Mega-Menus and ⌘K Search

A Google Cloud-style mega-menu driven by navigation.json, and one search palette that spans activities, destinations, encyclopedia and blog.

14 Oct 20264 min read#Search#UX#Tourism

Lesson 4 of 10 · Tourism Tech · built from Nora Travels, Nora Labs, Mahesh Travellers and my hospitality sites

Travellers don't know your categories — they know "whales", "Ella" or "tea". Two tools help them: a mega-menu for browsing and a command palette for searching.

Example — one search index across all content

ExampleTSX

const allItems = useMemo(() => {
  const list: Array<{ id: string; title: string; subtitle: string;
    category: 'activities' | 'destinations' | 'wiki' | 'blog'; href: string; badge: string }> = [];

  activities.forEach((a) => list.push({
    id: `act-${a.id}`, title: a.title, subtitle: `${a.region} • ${a.tagline}`,
    category: 'activities', href: `/activities/${a.slug}`, badge: a.category,
  }));

  destinations.forEach((d) => list.push({
    id: `dest-${d.id}`, title: d.name, subtitle: `${d.province} • ${d.tagline}`,
    category: 'destinations', href: `/destinations/${d.slug}`, badge: 'Destination',
  }));
  // …wiki articles and blog posts the same way
  return list;
}, [activities, destinations]);

Example — the shortcut

ExampleTSX

useEffect(() => {
  const onKey = (e: KeyboardEvent) => {
    if ((e.metaKey || e.ctrlKey) && e.key === 'k') { e.preventDefault(); /* toggle */ }
    if (e.key === 'Escape' && isOpen) onClose();
  };
  window.addEventListener('keydown', onKey);
  return () => window.removeEventListener('keydown', onKey);
}, [isOpen, onClose]);

The mega-menu is data as well: navigation.json holds multi-tier categories (Coastal & Marine, Mountain & Highlands, Safari & Wildlife, Culture & Heritage) and spotlight cards, so marketing can reshape navigation without code.

Try it yourself: press ⌘K (or Ctrl+K) on this site — it uses the same pattern across projects, posts and guide stages.