We are excited to announce a big update to the RAXO Pagination layout. The latest version represents a significant modernization of the layout, moving away from legacy dependencies like jQuery and external lazy loading libraries in favor of native web standards and modern CSS features. Read on to see the full list of changes in this version.

New features:

• Native Vanilla JS Pagination Engine with no jQuery dependency.
• Automatic "Scroll to Top" after navigating to another page.
• New layout installer script file, automatic lagacy layout detection, update and cleanup.
• Compatibility with modules for Joomla 6 and Joomla 5.
• Use the new RAXO debug logger for installation process.
• Integrated Dark Mode theme with a dedicated color palette.

Improvements:

• Modernized CSS Core: Refactored the entire stylesheet using modern CSS standards, including CSS Nesting, Custom Variables, and Container Queries for superior maintainability.
• Enhanced Native Lazy Loading: Switched from Lozad.js to the browser's native loading="lazy" attribute, reducing JavaScript overhead and leveraging browser-level optimizations.
• Advanced Color System: Implemented a sophisticated color management system using oklch and hsl for more consistent and vibrant thematic colors (Red, Blue, Green, etc.).
• Accessibility (A11Y) Compliance: Improved navigation accessibility by adding proper ARIA roles and attributes (role="navigation", aria-label, aria-current), making it screen-reader friendly.
• Smoother UX Transitions: Added a polished fade-out/fade-in animation during page switching.
• Flexible Navigation Controls: Improved the PHP logic to provide more granular control over navigation elements like First/Last and Prev/Next buttons.

RAXO Pagination v2.1 - Screenshot Preview.

Key Advantages of the Native Vanilla JS Pagination Engine.

In RAXO Pagination version 2.1, we have completely re-engineered the pagination logic from the ground up. This isn't just an update; it’s a complete shift to a modern, lightweight Native Vanilla JS Engine.

• Zero jQuery Dependency: We’ve finally cut the cord with legacy libraries. By removing the jQuery dependency, the layout loads faster, executes more efficiently, and remains compatible with modern web environments without any overhead.
• Enhanced User Experience with "Scroll to Top": To ensure your visitors never lose their place, we've added an intelligent "Scroll to Top" feature. When a user switches to another page, the module can automatically scroll back into view, providing a seamless browsing experience especially on long lists.
• Polished Visual Feedback: Navigation now feels smoother than ever. We've implemented a professional fade-out/fade-in animation during page switching, giving users clear visual feedback and a more "premium" feel as they browse your content.
• Total Control over Navigation: You now have granular control over every aspect of the pagination bar. Easily toggle First/Last jump buttons or Prev/Next step buttons, and define the Maximum number of page links to display. This allows you to tailor the navigation perfectly to your site’s layout and content density.
• Ultra-Lightweight & Efficient: The entire JavaScript logic has been optimized and condensed. We've managed to shrink the final JS size from 8 KB down to just 3.6 KB — more than a 50% reduction while actually adding more features.

This new engine is designed as an independent JavaScript class, meaning you can have multiple pagination modules on a single page, and each will work flawlessly and independently without any state conflicts.



Visit RAXO Pagination layout page