---
title: "Discussion on \"Build a Slide-In Mobile Menu in TanStack Start with Tailwind v4\" | Hashnode"
description: "Discussion on \"Build a Slide-In Mobile Menu in TanStack Start with Tailwind v4\". Turn a pop-in mobile menu into a sliding drawer with a fading backdrop, using only Tailwind classes, and keep it accessible."
url: "https://hashnode.com/posts/build-a-slide-in-mobile-menu-in-tanstack-start-with-tailwind-v4/6ad5164de19175d0ba8cb174"
---

[Feed](https://hashnode.com/feed) /

Discussion

# [Build a Slide-In Mobile Menu in TanStack Start with Tailwind v4](https://blog.northernrangedigital.com/build-a-slide-in-mobile-menu-in-tanstack-start-with-tailwind-v4?utm_source=hashnode&utm_medium=feed)

Turn a pop-in mobile menu into a sliding drawer with a fading backdrop, using only Tailwind classes, and keep it accessible.

Oct 18 · 9 min read · blog.northernrangedigital.com  
Updated Oct 19  
Read the article

-   [#reactjs](https://hashnode.com/tag/reactjs)
-   [#tailwind-css](https://hashnode.com/tag/tailwind-css)
-   [#shadcn](https://hashnode.com/tag/shadcn)
-   [#mobilenavigation](https://hashnode.com/tag/mobilenavigation)
-   [#slide-animation](https://hashnode.com/tag/slide-animation)
-   [#prefers-reduced-motion](https://hashnode.com/tag/prefers-reduced-motion)

## Written by

[Wade Thomas](https://hashnode.com/@wadethomastt)

@wadethomastt · Arima, Trinidad & Tobago

  
[View profile](https://hashnode.com/@wadethomastt)

"... so the curse causeless, shall not come"

I'm a full stack developer interested in anything, TanStack Start, Directus, Tailwindcss v4, Shadcn, Zustand and Coolify.

## Responses 3

Markdown supported · ⌘↵ to post

[Rishabh Mishra](https://hashnode.com/@rushdeploy)

[Oct 19](https://hashnode.com/posts/build-a-slide-in-mobile-menu-in-tanstack-start-with-tailwind-v4/6ad5164de19175d0ba8cb174/comment/6ad587b6f347af5216119298)

Nice detail including prefers-reduced-motion. One more that bites on mobile: animate the panel with transform/translateX rather than width, and set aria-expanded on the toggle. The transform avoids layout thrash, and screen readers announce the menu state correctly.

[Wade Thomas](https://hashnode.com/@wadethomastt)

[Oct 19](https://hashnode.com/posts/build-a-slide-in-mobile-menu-in-tanstack-start-with-tailwind-v4/6ad5164de19175d0ba8cb174/comment/6ad587b6f347af5216119298#reply-6ad66820a77afd9d690ff5e2)

Thank you for the comment. The panel slides with translate-x-0 and translate-x-full, and Tailwind v4 applies translate as a transform, so it doesn’t trigger layout the way animating width would, I have that one covered. Setting aria-expanded on the toggle is good a call, I will add that one in, I appreciate the comment, thanks again.

[Rishabh Mishra](https://hashnode.com/@rushdeploy)

[Oct 20](https://hashnode.com/posts/build-a-slide-in-mobile-menu-in-tanstack-start-with-tailwind-v4/6ad5164de19175d0ba8cb174/comment/6ad587b6f347af5216119298#reply-6ad6d8e8ac9bef20ede86079)

Glad the translate approach landed well. Pair aria-expanded with aria-controls pointing at the panel's id, so screen readers link the toggle to the exact element being shown. Small addition, big clarity.