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.
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.
