Home
Feed

Extend

Hashnode Pro
Hashnode for Agents

Resources

The foreword
Hashnode gql skill

Buildful - AI coding agent that delivers frontier-level results at a fraction of the cost Bug0 - The AI-native e2e QA regression testing Hackathons Changelog Brand @hashnode on X Hashnode on LinkedIn Support - hello+support@hashnode.com Code of Conduct Terms Privacy Sitemap

Search Hashnode

Search posts, tags, users, and pages

Discussion on "Build a Slide-In Mobile Menu in TanStack Start with Tailwind v4" | Hashnode

Feed/

Discussion

Wade Thomas

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

Oct 18

Build a Slide-In Mobile Menu in TanStack Start with Tailwind v4

https://www.youtube.com/watch?v=4oE4P7uGF3Y A mobile menu that pops in and out works, but it feels unfinished. In this article we turn it into a drawer that slides in from the right with a fading bac

blog.northernrangedigital.com9 min read

#reactjs #tailwind-css #shadcn #mobilenavigation #slide-animation #prefers-reduced-motion

Responses3

Markdown supported · ⌘↵ to post

Rishabh Mishra

Cloud FullStack Developer & Design Engineer.

Oct 19

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

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

Oct 19

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

Cloud FullStack Developer & Design Engineer.

Oct 20

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.