After the incredible response to my Tweet on this, I decided to create a tutorial for how to transform a bottom navigation into a footer using Framer.

Remix File

Step 1

Start with a navigation component, set Position to Fixed with a Bottom value of 0.

Step 2

Let's make sure the navigation component is set up correctly. Edit the component and recreate your navigation Fill as a Frame within the variant. I’m creating this one at 1200px wide, but it can be whatever size works best for your design.

While holding Command, drag the bottom of your frame down. This amount will be the distance that your bottom navigation sits above the bottom of the page.

Go back and set your Component to Fit Contents.

Step 3

Now create your footer design as a secondary variant within your navigation component.

Add some additional footer content.

Tip: Make sure your bottom radiuses are set to zero so the footer is flush with bottom of page.

Step 4

Make sure the navigation is centered and still Fixed to the bottom at 0.

Add a Scroll Section somewhere at the end of your site. You may have to customize where this trigger is so the footer transforms at the appropriate time.

Add a Scroll Variant to the navigation, set Viewport to Bottom, Replay to Yes, add the Section and Variant.

You’re done!