---
title: "Screen Split Menu — Framer component · Best of Framer"
description: "$5.00 · Framer component · by Russet Supply · Navigation. Hover Image Navigation"
canonical: "https://framer.elliotli.dev/component/screen-split-menu"
---

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

# Screen Split Menu

Hover Image Navigation

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

![Screen Split Menu preview image 1](https://framer.elliotli.dev/og/component/screen-split-menu/a416bf97028966c6/1600x1200.jpg)

## Summary

Hover Image Navigation

## Description

[Live Preview](https://splitscreenmenu.framer.website/)

[Grab more premium components](https://www.framer.com/@design-by-saqlain/)

Split Screen Menu is a fullscreen navigation that turns the menu interaction into part of the visual experience. Click the menu icon in the top-right corner and the screen splits from the center, revealing the navigation on one side and a full-bleed image panel on the other.

Each navigation item can have its own image, so hovering over an item instantly updates the visual panel. On smaller screens, the layout automatically changes into a single full-screen navigation panel, keeping the interaction clean and usable on mobile.

### Features

-   Full-screen split-screen navigation
    
-   Center-out menu animation
    
-   Desktop navigation + image panel
    
-   Image changes based on hovered item
    
-   Smooth image transitions
    
-   Numbered navigation items
    
-   Animated menu icon
    
-   Contact and footer links
    
-   Responsive mobile layout
    
-   Custom logo support
    
-   Custom navigation links
    
-   Static-render optimized
    

### Fully Customizable

Customize the entire navigation directly from Framer's property panel. Add your own logo, navigation items, images, links, typography, colors, contact information, and spacing without editing the code.

### Customize

-   Text or image logo
    
-   Logo typography and size
    
-   Navigation labels and URLs
    
-   Individual navigation images
    
-   Navigation typography
    
-   Item and hover colors
    
-   Contact email and links
    
-   Panel background colors
    
-   Menu icon colors
    
-   Page padding and spacing
    
-   Mobile layout behavior
    

### How It Works

The menu stays minimal when closed, showing only the logo and menu icon. When opened, the interface expands into two sections: a solid navigation panel and a full-bleed image panel.

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

-   All · #2523

## Details

- **Author**: Russet Supply
- **Price**: $5.00
- **Published**: 2026-09-15
- **Updated**: 2026-11-04
- **Added**: 2026-09-15
- **Categories**: Navigation

## More like this

-   [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
-   [Dial Picker](/component/dial-picker) — Tanmay Kaper · $14 — A machined dial for your projects
-   [Expanding Side Menu](/component/expanding-side-menu) — Russet Supply · $5 — Animated Framer Navigation