Premium Navigation

Premium Navigation is a refined, high-performance full-screen navigation menu built for modern Framer sites. It combines smooth transitions, expressive hover animations, dynamic scroll behaviour, and automatic SVG sanitisation — all inside a single plug-and-play component.

Whether you’re building a portfolio, product landing page, or brand site, this navigation system adds structure, identity, and motion polish without writing a line of code.

With multiple hover styles including Character Lift, Slide, Marquee, and Brackets, the menu feels modern, interactive, and visually rich. The component also responds intelligently to scrolling, adapts gracefully to mobile, and renders logos through a fully sanitised SVG pipeline for stability and performance.

How to Use

Follow these steps to integrate Premium Navigation into your project:

1. Add the component to your Framer canvas

Place it anywhere — it uses a fixed top wrapper, so it always stays above your layout.

2. Set layout to “Auto” width & height

The bar stays at the top while the full-screen menu animates in on open.

3. Add your navigation links

Use the Links array in the component controls. Each link supports:

• Custom text

• URL

• Internal page linking via Framer’s built-in Link field

4. Upload your logo

You may use:

• SVG (recommended)

• PNG, JPG, WEBP, GIF

SVGs automatically run through the logo safety pipeline:

• Scripts removed

• Inline event attributes sanitised

• Optionally keeps original palette or adapts to theme via currentColor

5. Choose your hover animation

Pick from four expressive styles:

• Characters — each letter lifts independently

• Slide — clean upward movement

• Marquee — rolling multi-text hover effect

• Brackets — animated bracket reveal

Switch styles at any time — zero redesign.

6. Customise scroll behaviour

Choose whether the top bar:

• Stays fixed

• Auto-hides while scrolling down and reappears on scroll-up

Great for immersive hero layouts.

7. Style your typography

Control:

• Font family

• Weight

• Letter spacing

• Text transform

Text sizing follows parent container styles.

Key Benefits

Premium Motion Design

Built-in animations create a luxurious, modern feel:

• Smooth bar transitions

• Animated link states

• Intentional easing curves

• Clean full-screen open/close motion

Smart, Sanitised SVG Pipeline

The logo processor:

• Removes scripts & unsafe attributes

• Normalises sizing & viewBox

• Converts fills to currentColor (optional)

• Caches processed SVGs for performance

Your branding stays sharp and safe.

High Interaction Usability

Includes:

• ESC-key closing

• Background click closing

• Scroll-aware visibility

• Keyboard-friendly focus order

Made for Real Websites

Works beautifully on:

• Landing pages

• Ecommerce

• Agencies

• Portfolios

• Brand identity sites

No-Code Configuration

Every essential behaviour is editable via Framer Controls.

Props Overview

Logo Config

• image — Upload SVG or bitmap

• size — Logo width in em

• colorClosed — Bar logo colour

• colorOpened — Full-screen logo colour

• preserveColors — Keep original SVG palette

Hamburger Config

• size — Icon scale (em)

• colorClosed — Idle icon colour

• colorOpened — Active icon colour

Hover Animation

• "chars"

• "slide"

• "marquee"

• "brackets"

Scroll Behaviour

• "sticky" — Always visible

• "hide" — Auto-hide on scroll down

Typography

• fontFamily

• fontWeight

• letterSpacing

• textTransform

Pro Tips

• Use contrasting open/closed colours for a premium transition

• “Characters” and “Marquee” suit expressive, high-motion brands

• “Slide” and “Brackets” suit minimal, clean layouts

• Keep bar padding moderate (1.5–2.5em) for a luxury feel

• Pair with hero animations or page-fade effects for a cohesive experience