Dynamic Notch Navigation Component

Copy component

Dynamic Notch Navigation Component

Copy component

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Nandi Muzsik

How can I improve Framer Uni?

Let me know if there’s a missing feature or something that could be improved.

Share feedback

Component

Dynamic Notch Navigation Component

This is a recreation of George Vasyagin's notch navigation concept, built entirely in Framer. When you hover, the notch stretches out and menu items smoothly drop in from above. It's a fun element that'll give your website a unique, interactive touch.

image of Nandi Muzsik
George Vasyagin

Created by

iPhone 16 product page with navigation menu showing Remix, Copy, Apple logo, Original, and More options
iPhone 16 product page with navigation menu showing Remix, Copy, Apple logo, Original, and More options
iPhone 16 product page with navigation menu showing Remix, Copy, Apple logo, Original, and More options

About the resource

The tricky part about this component is the curved nature of the notch. As you might already know, we are building websites in Framer by drawing a bunch of frames on the canvas to create certain layouts. Well, these frames are rectangular, and the only modifications we can apply to them in terms of shape are changing the size and rounding the corners. We can't turn them into complex shapes like triangles, stars, or anything like that.

So how do we make sure that our navigation's notch is curved like that?

Well, we use SVG shapes for these parts of the element.

About the resource

The tricky part about this component is the curved nature of the notch. As you might already know, we are building websites in Framer by drawing a bunch of frames on the canvas to create certain layouts. Well, these frames are rectangular, and the only modifications we can apply to them in terms of shape are changing the size and rounding the corners. We can't turn them into complex shapes like triangles, stars, or anything like that.

So how do we make sure that our navigation's notch is curved like that?

Well, we use SVG shapes for these parts of the element.

About the resource

The tricky part about this component is the curved nature of the notch. As you might already know, we are building websites in Framer by drawing a bunch of frames on the canvas to create certain layouts. Well, these frames are rectangular, and the only modifications we can apply to them in terms of shape are changing the size and rounding the corners. We can't turn them into complex shapes like triangles, stars, or anything like that.

So how do we make sure that our navigation's notch is curved like that?

Well, we use SVG shapes for these parts of the element.

Editing an SVG shape within a graphic layer in Framer.

Editing an SVG shape within a graphic layer in Framer.

Editing an SVG shape within a graphic layer in Framer.

As you can see in the video above, you can create and edit these SVG layers right inside Framer. For this, you need to use the graphic tool ("G" shortcut). You basically draw a graphic layer and within it, you can create rectangles and other shapes with the pen tool.

What I usually do, though, is make these SVGs in Figma and copy them to Framer as SVGs, since Framer's SVG tool is a bit limited at the moment (they're reworking it soon, though).

Okay, so once we have the SVG elements, we can create a flexible layout that involves regular frames and these SVGs. This allows us to easily animate the expansion of the notch when switching between the navigation variants.

As you can see in the video above, you can create and edit these SVG layers right inside Framer. For this, you need to use the graphic tool ("G" shortcut). You basically draw a graphic layer and within it, you can create rectangles and other shapes with the pen tool.

What I usually do, though, is make these SVGs in Figma and copy them to Framer as SVGs, since Framer's SVG tool is a bit limited at the moment (they're reworking it soon, though).

Okay, so once we have the SVG elements, we can create a flexible layout that involves regular frames and these SVGs. This allows us to easily animate the expansion of the notch when switching between the navigation variants.

As you can see in the video above, you can create and edit these SVG layers right inside Framer. For this, you need to use the graphic tool ("G" shortcut). You basically draw a graphic layer and within it, you can create rectangles and other shapes with the pen tool.

What I usually do, though, is make these SVGs in Figma and copy them to Framer as SVGs, since Framer's SVG tool is a bit limited at the moment (they're reworking it soon, though).

Okay, so once we have the SVG elements, we can create a flexible layout that involves regular frames and these SVGs. This allows us to easily animate the expansion of the notch when switching between the navigation variants.

The dynamic layout with regular frames and SVGs.

The dynamic layout with regular frames and SVGs.

The dynamic layout with regular frames and SVGs.

As you can see in the video above, by using this layout, we can simply change the (purple) frame's width in the center to animate the notch.

So basically, we have a variant of the navigation where this purple frame is smaller, and another where it's larger (and navigation menu items are also shown).

For more context, feel free to dig into the remix and see how it's built without writing any code.

As you can see in the video above, by using this layout, we can simply change the (purple) frame's width in the center to animate the notch.

So basically, we have a variant of the navigation where this purple frame is smaller, and another where it's larger (and navigation menu items are also shown).

For more context, feel free to dig into the remix and see how it's built without writing any code.

As you can see in the video above, by using this layout, we can simply change the (purple) frame's width in the center to animate the notch.

So basically, we have a variant of the navigation where this purple frame is smaller, and another where it's larger (and navigation menu items are also shown).

For more context, feel free to dig into the remix and see how it's built without writing any code.

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

Framer Navigator

Learn the fundamentals of Framer for free.

Build your ideas with ease by learning the basics of website building with Framer.

Nandi portrait's background
Nandi's portrait

More resources

More resources

  • Dark mode UI of Framer Uni feedback form with user avatar, input fields for name and email, and 'Send a message' button, showcasing sleek interface design

    New

    Native Feedback Widget in Framer

    Component

    Dark mode UI of Framer Uni feedback form with user avatar, input fields for name and email, and 'Send a message' button, showcasing sleek interface design

    New

    Native Feedback Widget in Framer

    Component

    Dark mode UI of Framer Uni feedback form with user avatar, input fields for name and email, and 'Send a message' button, showcasing sleek interface design

    New

    Native Feedback Widget in Framer

    Component

  • Futuristic dark interface displaying 'Your Secure' followed by a encrypted version fo the text, with a glowing central light effect

    Encryption Hero Animation in Framer

    Component

    Futuristic dark interface displaying 'Your Secure' followed by a encrypted version fo the text, with a glowing central light effect

    Encryption Hero Animation in Framer

    Component

    Futuristic dark interface displaying 'Your Secure' followed by a encrypted version fo the text, with a glowing central light effect

    Encryption Hero Animation in Framer

    Component