Navigation Bar Redesign
Rebuilt Molotov's navigation bar from scratch: separate mobile and desktop architectures, API-driven content, ARIA accessibility, and post-launch fixes that wiped out 50,000+ 404 errors from Google Search Console.
Tech Stack
React
TypeScript
Node.js
CSS ModulesDemo: Redesigned Navigation Bar in action
Key Highlights
- Separate mobile and desktop navbar architectures, each optimized for its breakpoint's interaction patterns
- Link obfuscation for anti-scraping compliance while keeping all navigation crawlable as static anchor tags
- Custom scrollbar on the desktop megamenu handling deep category hierarchies without overflow issues
- Signed-in and signed-out account states with seamless transitions driven by session state
- CMS-driven navigation content via API: the content team can update menus without a deployment
- Full ARIA roles, labels, and keyboard navigation for WCAG accessibility compliance
Architecture Overview
Mobile
Slide-out drawer with touch-optimized tap targets and collapsible sub-menus, built for one-handed navigation with no dependency on hover interactions.
Desktop
Full megamenu with custom scrollbar for deep category hierarchies, hover-activated dropdowns, and fixed positioning that stays correct as the page scrolls.
Auth States
Signed-in and signed-out views driven by session state, switching between login CTA, user avatar, and account menu without flicker or layout shift.
Dynamic Content
Menu items, featured categories, and promotional slots are all API-driven: the content team updates navigation without touching the codebase.
Critical Post-Launch Impact
Issues Resolved
- 1Resolved 50,000+ 404 URLs by fixing the subscription button URL in the navigation
- 2Ligue 1 logo 97% file size reduction (replacing oversized asset with optimized SVG)
- 3Indéterminés category 301 redirect fixing broken classification pages
SEO Impact
The navigation rebuild had a measurable impact on Google Search Console health:
- ✓50,000+ 404 errors resolved in Search Console
- ✓All navigation links now crawlable as static <a> tags
- ✓Category hierarchy fully discoverable by Googlebot
Outcomes & Results
- 1
Crawlable <a> links replaced JS-dependent navigation enabling full bot indexability
- 2
Eliminated 50,000+ 404 URLs through subscription button URL fix, a dramatic Search Console improvement
- 3
Improved accessibility scores with complete ARIA roles and keyboard navigation support
- 4
Ligue 1 logo 97% size reduction improving page payload and load time