Framer

Features

Resources

Community

Customers

Enterprise

Pricing

Log in

Start for free

Framer

Start for free

Layout

CMS

Localization

Effects

SEO

Navigation

Management

Resources

Features

Community

Templates

Academy

Updates

Feed

Partners

Experts

Community

Meetups

Awards

Customers

Enterprise

Pricing

Framer

Start for free

Layout

CMS

Localization

Effects

SEO

Navigation

Management

Resources

Features

Community

Templates

Academy

Updates

Feed

Partners

Experts

Community

Meetups

Awards

Customers

Enterprise

Pricing

Search

Get started

Build your first site

Layout & Sizing

Breakpoints

Import from Figma

Components

Copy from HTML

navigation

start

Scroll

Scroll Targets

Sticky Scrolling

Scroll Animations

Scroll Transforms

Scroll Variant

navigation

scroll

Navigation

How to Link Pages

Desktop Menu

Mobile Menu

Mobile Menu: Fade-In

Horizontal Side Scroller

Scroll Direction

Relative Overlays

Responsive Dropdown Menu

Effects

Page Effects

Component Effects

Creative Effects

Rotating Grid on Scroll

Wave Animation

Apple Zoom Scroll Effect

Canvas-like website

Overlays

navigation

effects

CMS

Overview

CSV import

Filtering

Date Filtering

Conditionals & Transforms

Scroll Sections

Bold & Italic

Code Blocks

Reference Collections

navigation

cms

Localization

AI Style

Localization

navigation

localization

Insert Menu

Carousel

Cookie Banner

Input

Search

Slideshow

Ticker

navigation

insert

Templates

Prepare your Template

Sell on Lemon Squeezy

navigation

templates

Settings

Metadata

Password Protection

Custom Code

Custom Domains

Redirects

Staging & Versions

Analytics

Version History

navigation

management

Integrations

Shopify Integration

Membership Sites

navigation

integrations

Code

Progress Feature Section

navigation

code

Courses

Fundamentals

Documentation Site

Mastering Code Overrides

navigation

courses

Academy

Navigation

Navigation

A site without navigation is just a page, learn how to build it in Framer.

Linking to other Pages or external URLs

Learn how to add links to any page, or set up a link to anchor to a specific section of a page.

Build a Desktop Menu with Min Height and Max Height

Build a beautiful desktop navigation bar.

Design a Scrollable mobile menu with height animation

Creating a mobile menu that animates to the viewport height when opened is easy with the right properties.

Design mobile menu’s with custom fade-in animations.

Make your mobile menu animations more interesting by adding custom transitions.

Side scrolling navigations.

This release brings new properties that unlock new types of navigation patterns.

Hide navbar based on scroll direction.

Kickstart custom animations whenever you scroll up or down, like fading out a navigation bar when people scroll down.

Relative Overlays

Add dropdowns to any layer with Appear Effects, a Dynamic Safe Area, custom positioning, and more.

Make Responsive Dropdown Menus From Scratch

Learn how to create a responsive navigation with dropdowns in Framer—completely from scratch.

How to Link Pages

Learn how to add links to any page, or set up a link to anchor to a specific section of a page.

Desktop Menu

Build a beautiful desktop navigation bar.

Mobile Menu

Creating a mobile menu that animates to the viewport height when opened is easy with the right properties.

Mobile Menu: Fade-In

Make your mobile menu animations more interesting by adding custom transitions.

Horizontal Side Scroller

This release brings new properties that unlock new types of navigation patterns.

Scroll Direction

Kickstart custom animations whenever you scroll up or down, like fading out a navigation bar when people scroll down.

Relative Overlays

Add dropdowns to any layer with Appear Effects, a Dynamic Safe Area, custom positioning, and more.

Responsive Dropdown Menu

Learn how to create a responsive navigation with dropdowns in Framer—completely from scratch.