diff --git a/components/demos/NavigationMenu/tailwind/index.jsx b/components/demos/NavigationMenu/tailwind/index.jsx
index 04612051..2e6ff8b5 100644
--- a/components/demos/NavigationMenu/tailwind/index.jsx
+++ b/components/demos/NavigationMenu/tailwind/index.jsx
@@ -65,7 +65,7 @@ const NavigationMenuDemo = () => {
 							aria-hidden
 						/>
 					</NavigationMenu.Trigger>
-					<NavigationMenu.Content className="absolute left-0 top-0 w-full sm:w-auto">
+					<NavigationMenu.Content className="absolute left-0 top-0 w-full data-[motion=from-end]:animate-enterFromRight data-[motion=from-start]:animate-enterFromLeft data-[motion=to-end]:animate-exitToRight data-[motion=to-start]:animate-exitToLeft sm:w-auto">
 						<ul className="m-0 grid list-none gap-x-2.5 p-[22px] sm:w-[600px] sm:grid-flow-col sm:grid-rows-3">
 							<ListItem
 								title="Introduction"