Navigation Effects

Use Directional Menu when the site has navigation depth across services, products, resources, docs, use cases, or portfolios. Use Immersive Full Screen Navigation for portfolios and brand sites where the menu is a designed moment. Use Elevate Navbar for SaaS and product sites that need sticky navigation without visual weight. Use Expanding Navbar when space is constrained and the link set justifies it.

Animated navigation works best on SaaS websites, agency sites, studios, product ecosystems, resource hubs, portfolios, and complex marketing sites. It should make orientation clearer, not make the menu feel like a separate experience users must solve.

Keep navigation simple on tiny sites with only a few links, utility apps, forms, checkout flows, and any menu that relies only on hover. Navigation is the riskiest place to be clever because everyone needs it.

Keep menu animations short, avoid large layout shifts, preload only essential panel content, and ensure the menu does not block route transitions or scroll restoration. The menu should open quickly and close cleanly.

Use real links, visible focus, keyboard movement, aria-expanded, aria-controls where appropriate, Escape close, and focus restore to the trigger. For overlay menus, trap focus only while the overlay is open.