Single page site plugin for Squarespace

Single page site plugin for Squarespace

Fixes homepage anchor links across external pages and automatically closes the mobile menu after link clicks for smoother navigation.

Shape SquareSpace 7.1
Requires Business plan or higher
Free

Why use

Code


<script>
/* Single Page Plugin by opsquare.co */
(function () {

    /*** Plugin options ***/
    const options = {
        homeUrl: '/', // path considered "home" — links are untouched here
    };
    /*** Stop editing ***/

    const isHome = window.location.pathname === options.homeUrl ||
                   window.location.pathname === '';

    function prefixHashLinks() {
        if (isHome) return;

        document.querySelectorAll('a[href^="#"]').forEach(a => {
            const hash = a.getAttribute('href');
            if (hash && hash !== '#') {
                a.setAttribute('href', window.location.origin + options.homeUrl + hash);
            }
        });
    }

    function closeMobileMenuOnHashClick() {
        const mobileNav = document.querySelector('.header-menu-nav-list');
        if (!mobileNav) return;

        mobileNav.querySelectorAll('a[href*="#"]').forEach(a => {
            a.addEventListener('click', () => {
                const closeBtn = document.querySelector(
                    '.header-menu-controls-control--close, .header-burger-btn'
                );
                closeBtn?.click();
            });
        });
    }

    function init() {
        if (window.frameElement !== null) return;
        prefixHashLinks();
        closeMobileMenuOnHashClick();
    }

    document.addEventListener('DOMContentLoaded', init);
})();
</script>

How to install

  1. Create navigation links using # anchors, e.g. #testimonials, #pricing. Disable the “Open in new tab” setting. You can also have external pages like Blog, as this plugin handles navigation between same-page and external page links.
  2. Create corresponding sections with the same IDs.
  3. Copy the code to Code Injection.