Skip to content

DX · Radix · React

The 'test new features' footer dropdown pattern, and why every WIP site needs one

A 60-line Radix DropdownMenu that lets your reviewer find every WIP surface

🧪📋🔽
You shipped 14 feature branches overnight. New dashboard route, new pricing page, three half-built admin surfaces, a redesigned home hero, two A/B variants of the signup flow. Now your reviewer opens the site and... where do they start? The new pricing page is on /pricing but the new admin dashboard is on /app/admin/v2 and one of the A/B variants is gated behind a query string they have not been told about. The fix: a footer dropdown that lists every new surface, grouped by category, with status badges. NEW for routes that did not exist last week. UPDATED for ones that got a redesign. COMING for routes that 404 but want a placeholder. Renders as a client:visible Astro island so it ships zero JS until your reviewer scrolls to the footer. Remove the component after launch.
        
      
Radix DropdownMenu handles every pain point of native <select>: keyboard nav, focus trap, click-outside dismiss, scroll lock on mobile, ARIA roles, and the portal so the menu escapes the footer's overflow: hidden. You write the data, Radix writes the behaviour. The animation is one Tailwind utility — data-[state=open]:animate-in — driven by Radix's data attributes.
        
      
Drop the component into your Astro footer with <TestFeaturesMenu client:visible />. Zero JS ships until the reviewer scrolls to the footer, at which point Radix hydrates. On a stock 4G connection the dropdown is interactive in under 200ms after first paint of the footer. The catch: leave a TODO at the top of the file with a removal date. Six months from now you will forget this exists, your menu will list a dozen "NEW" pages that have been live since last winter, and a customer will screenshot the dropdown in a support ticket asking "why does your site say everything is new". Yes really. Diary the removal, leave a comment, set a calendar reminder, do whatever you have to do to delete this thing after launch. The Verdict: every WIP site benefits from a temporary feature index. Use Radix because the keyboard nav and portal are free. Group by category, badge by status, ship it as an island, and delete it the day you go live.
Let us make some quick suggestions?
Please provide your full name.
Please provide your phone number.
Please provide a valid phone number.
Please provide your email address.
Please provide a valid email address.
Please provide your brand name or website.
Please provide your brand name or website.