---
title: "Split Nav — Framer component · Best of Framer"
description: "$12.00 · Framer component · by Samuel G. Sumo · Navigation. Expanding image & video hover"
canonical: "https://framer.elliotli.dev/component/splitnav"
---

[Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/Split Nav

# Split Nav

Expanding image & video hover

[View on Framer](https://framer.com/marketplace/components/splitnav/?via=elliot-li)

![Split Nav preview image 1](https://framer.elliotli.dev/og/component/splitnav/3270e4e12853d6f5/1600x1200.jpg)

## Summary

Expanding image & video hover

## Description

SplitNav is a cinematic navigation component that transforms your layout into a series of full-height vertical panels — each representing a destination on your site. As users hover over a panel, it fluidly expands while adjacent panels compress, creating a tactile, immersive experience powered by spring physics.

### Features

-   **Dynamic panel count** — add as many panels as your layout needs
-   **Per-panel customization** — set a unique background image, overlay color, label, and CTA link on each panel
-   **Spring animation controls** — tune stiffness, damping, and mass directly from component properties
-   **Hover expand ratio** — control how dominant the active panel becomes relative to its neighbors
-   **Click-to-navigate** — each panel links to its assigned URL on click
-   **Overlay theming** — adjust overlay color and opacity per panel for contrast or mood

### What you can customize

Panels · Media · Overlay color · Label · CTA link · Hover Expand Ratio · Font size · Transition

### Ideal for

Portfolio homepages, agency landing pages, multi-brand or multi-product sites, lookbook-style layouts, and any project where navigation itself is part of the visual statement.

## Rank history [How rankings work →](/terms#rankings)

-   All · #2995

## Details

- **Author**: Samuel G. Sumo
- **Price**: $12.00
- **Published**: 2026-03-10
- **Updated**: 2026-08-06
- **Added**: 2026-03-03
- **Categories**: Navigation

## More like this

-   [Status badge](/component/status-badge) — Lera · Free — Ready-to-use status badge component built for data-heavy interfaces.
-   [Magnetic Icons Dock](/component/magnetic-icons-dock) — Lera · $10 — Icon tiles magnetic navigation
-   [Reveal Navigations](/component/reveal-navigations) — Design Supply · Free — A calmer way to open your menu
-   [Collapsible Sidebar](/component/collapsible-sidebar) — Marso Angelov · $10 — Responsive Side Navigation