In this article we explain how to recreate the moving highlight navigation pattern using only JavaScript and CSS, and how to choose the right technique for each project. We present two commonly used methods: one that calculates dimensions with getBoundingClientRect and another that leverages the View Transition API for smoother, more native transitions.
First technique using getBoundingClientRect. The basic idea is to measure the position and size of the active menu item at the moment of the click using getBoundingClientRect, and then animate an absolute indicator element that moves and resizes to those coordinates. Advantages: broad browser compatibility, full control over the animation, and easy integration with frameworks like React or Vue. Disadvantages: requires manually handling resize events and layout changes, and may involve extra calculations in complex views.
Second technique using the View Transition API. This API allows transitions between interface states to be performed declaratively and with better native performance. For the moving highlight, a transition is created between the previous active element and the new one, and the API interpolates position and size without the need for manual geometric calculations. Advantages: smoother transitions, less code, and better performance when available. Disadvantages: progressive browser support, so it is advisable to implement a fallback using the getBoundingClientRect technique.
Practical recommendations. 1 Keep an independent indicator in the DOM that can be positioned with transform and width/height to take advantage of GPU acceleration. 2 Listen for resize events and changes in the menu to recalculate the indicator if using getBoundingClientRect. 3 Use prefer-reduced-motion to respect accessibility preferences. 4 Implement a fallback that detects View Transition API support and uses the traditional technique if it is not available.
Conceptual example of the flow with getBoundingClientRect: on click, get the item's rect, calculate the translateX and translateY transform, and adjust the width and height of the indicator element, applying transition on transform and dimensions. With the View Transition API the flow is simplified: start the transition, change the active element in the DOM, and let the API animate the interpolation between states.
Design and performance considerations. Avoid animating properties that cause heavy reflow such as top and left. Prefer transform and opacity. Performance on mobile devices and composition with other effects should be taken into account. It is also important to test the solution at different resolutions and with variable fonts to ensure consistency.
Integration with professional applications. In enterprise products with security and availability requirements, it is vital that the visual experience does not compromise stability. At Q2BSTUDIO we develop custom solutions that combine refined interfaces like this navigation pattern with cybersecurity best practices and cloud architectures. We can integrate moving highlight into custom applications and custom software, ensuring compliance with security policies and performance in cloud environments such as AWS and Azure cloud services.
Why choose Q2BSTUDIO. We are a software development company specialized in custom applications, artificial intelligence, and cybersecurity. We offer business intelligence services, AI for enterprises, AI agents, and Power BI solutions for advanced data visualization. Our team designs efficient and accessible UI components, and also implements secure backends, deployment on AWS and Azure cloud services, and artificial intelligence models tailored to each client.
Use cases and benefits. A menu with moving highlight improves usability and the perceived quality of the interface. In corporate portals and business intelligence dashboards, the visual detail translates into greater user trust. If you need to integrate intelligent assistants or AI agents into your product, Q2BSTUDIO can combine the interactive frontend with artificial intelligence models and data pipelines that feed Power BI visualizations.
Conclusion and next steps. For projects where compatibility must be maximum, we recommend implementing the technique based on getBoundingClientRect with a responsive fallback. For cutting-edge experiences, if the target audience uses modern browsers, the View Transition API offers smoother transitions and less code. If you want us to implement this functionality in your custom application or to evaluate a complete architecture that includes artificial intelligence, cybersecurity, and deployment on AWS and Azure cloud services, contact Q2BSTUDIO for a personalized consultation.
Relevant keywords: custom applications custom software artificial intelligence cybersecurity AWS and Azure cloud services business intelligence services AI for enterprises AI agents Power BI
