Highlight Active Navigation Link

What You'll Create

Make navigation links in Squarespace automatically highlight when you're on their corresponding page. The current page's link gets a subtle underline, making it instantly clear where visitors are in your site structure.

The Problem It Solves

Squarespace doesn't automatically highlight navigation links based on the current URL path. Visitors can feel disoriented without visual feedback showing which page they're on, especially in sites with many similarly-named pages or deep navigation structures.

Perfect For

Shop pages with category filters, blog category navigation, multi-page portfolios, documentation sites, any site with in-page navigation links.

What Makes This Different

The code checks the current page URL and compares it to each navigation link. When there's a match, it adds a visual indicator automatically—no manual updating needed. The styling uses a subtle bottom border that appears smoothly with a 0.3-second transition, and you can easily customize the highlight style to match your brand.

Details

• Section Type: Fluid & Classic

• Code Type: CSS + JavaScript

• Prerequisites: Navigation links in a list format (unordered list with anchor links)

• Toolkit Title: Highlight Active Link

Learn This Technique

This is one of 150+ code techniques taught inside Standout Squarespace, where you get:

• The complete, copy-paste code

• Video walkthrough explaining how it works

• The principles behind the technique so you can customize it

• Access to our private community for support