Squarespace Header Updates — What You Need to Know
Squarespace is rolling out changes to how dropdowns work in site headers, and we’re preparing updates to our plugins and tutorials as needed.
As Squarespace’s updates go live, we’ll be testing everything, pushing fixes where required, and updating this page with any affected plugins or code snippets.
Until their changes are released, we can’t fully test our code — not ideal, but we’re ready to move fast once we can.
Squarespace FORUM
“In an effort to closer align with WCAG guidelines, anchor tags in website headers associated with dropdowns (with the class header-nav-folder-title) will be replaced with button elements using the same class. On Wednesday, October 8th 15th, the class a.header-nav-folder-title will change to button.header-nav-folder-title.
Additionally, the aria-label of folder dropdown has been removed in favor of relying on the button’s text content. These changes may affect any broad selectors targeting a or button elements on your site.”
What This Means
Visually, nothing will change — but under the hood, this may affect some custom code or plugins you’ve added.
We’re tracking everything closely. Once the update goes live and we know exactly what’s affected, we’ll:
Push automatic updates to any impacted plugins
Update all related tutorials with corrected code
It’s possible no plugins are affected — or several are. We won’t know until Squarespace’s changes are active.
If you spot any tutorials, snippets, or plugins that might be impacted, drop a comment below.
My goal is to keep this site the most reliable technical resource for Squarespace designers and developers — and that means no broken code out there.
Keep building,
Will
🛠️ Working on an Update
🔍 Monitoring
Tutorials & Plugins We’re Monitoring
🔍 Mega Menu
🔍 Secondary Navigation
Updated Tutorials or Plugins
✅ Clickable Dropdowns in Squarespace - the <script> of this tutorial was updated to reflect the changes.
✅ Nested Dropdown - This plugin has been updated and the updates should pull through automatically shortly. See below for instructions on how to pull through the updates immediately.
Pull Through Updates Immediately
To pull any updates through immediately, you can add ?v1 to the end of the <script> and <link> urls, like below:
<script src="https://website.com/script.js?v1"></script>
<link href="https://website.com/styles.css?v1" rel="stylesheet" />
