Full-Height Tabbed Grid Navigation
What You'll Create
A dramatic full-height navigation grid in Squarespace where tab buttons stretch vertically to fill the entire section. Each navigation item shows distinct background colors for default and active states, with borders creating clean separation. Clicking anywhere in the grid cell activates the tab.
The Problem It Solves
Standard Squarespace tabs use horizontal layouts with small click targets. Creating a bold, full-height navigation that fills the sidebar area and provides clear visual feedback requires extensive custom styling.
Perfect For
Service category navigation, multi-service landing pages, course module selectors, product line showcases, portfolio category displays.
What Makes This Different
Distributes tabs vertically across 100% height with each navigation item growing equally to fill available space. Active states change from #E9BA67 to #638798 background with white text. Special styling makes entire cells clickable rather than just the text. Font sizes are set at 1.5rem for titles and 0.9rem for descriptions with smooth 0.5-second transitions.
Details
Section Type: Fluid Engine
Code Type: CSS
Prerequisites: Fluid Tabs Core workshop, Summary Block with tabs
Toolkit Title: Fluid Tabs Grid
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