Relative Overlays

Relative Overlays can be added to Frames, Text, and even Components. We’ve also updated all Navigations in the Insert Panel, and added new Menus that you can drop onto any layer to instantly create new Overlays. Design dropdowns, menus, and tooltips within minutes.

Creating a Dropdown Menu: Begin by selecting the item you want to add a dropdown to. In the insert panel, you'll find a new category called 'menus' which offers various custom-designed menu templates. Dragging one of these onto your text layer adds it as a relative overlay.

Exploring the New Overlay Edit Mode

Once you've added a dropdown menu:

1. Customization Options: The new edit mode allows you to directly customize each item in the menu. This saves time as you don't have to manually set up these common menu layouts.

2. Adjusting Overlay Properties: On the right side, there are properties to customize your overlays, such as alignment, positioning, and triggers. For instance, you can easily adjust the distance between the menu item and the dropdown using keyboard shortcuts.

Using Overlays within Components

For practical application in real projects:

1. Component Integration: To create a consistent navigation experience across all pages, turn your navigation with overlays into a component. This allows for reusability and consistency.

2. Overlay Edit Mode for Components: Framer provides a special overlay edit mode for components, ensuring the dropdown menus in your navigations are reusable and customizable within the component structure.

Adding and Customizing Overlays from Scratch

For more flexibility:

1. Starting from Scratch: You can add new relative overlays from scratch, customizing a Frame to your liking.

2. Swapping Overlays with Menus: Framer allows you to swap different types of menus into your overlay, offering the flexibility to experiment with various designs.

Advanced Customization and Componentization

Taking your design to the next level:

1. Componentizing Links: Convert all links into components for use in different contexts, like mobile menus, with variants to adjust styling.

2. Customizable Triggers: Create components for your menu triggers with different variants for open and closed states.

3. Dynamic Safe Area: Framer intelligently handles the gap between the trigger and the menu, preventing accidental menu dismissal.

Navigations in the Insert Menu

1. Enhanced Navigation Section: The insert menu in Framer has been refreshed to include advanced navigation options that adapt to different breakpoints, ensuring responsive design.

2. Cross-Breakpoint Consistency: Any edits you make to these navigation components will be reflected across all breakpoints, maintaining design consistency.