#Navigation

Navigation in Framer is built on top of the Framer API. Learn how to customize and create flows easily.

Expressing flows is an important part of the prototyping process, and easy to set up in Framer. Continue reading to learn how to set up your own flows, or create something new for your project.

Open example file

Note: The recommended way to navigate from code is to instead add an EventHandler property control to a code component.

The following Navigation API is currently in Beta. Please reach out to support@framer.com with any issues.

#useNavigation Beta

Navigating your prototype can be handled through code. The useNavigation() hook can be called from a component or a code override.

import * as React from "react"
import { useNavigation } from "framer"

export function Button() {
  const navigation = useNavigation()
  return (
    <button
      onClick={() => {
        navigation.goBack()
      }}
    />
  )
}

#Transitions Beta

All of the transitions in the Framer UI are also available from code. All transitions require a ComponentInstance as the first argument other than the goBack() transition.

import { ComponentInstance } from "./canvas"

To reference a Component Instance in code, you’ll need to first create a Design Component, and import it into your Code Component or Override file.

Certain transitions can also accept more arguments to customize it’s behavior. Continue reading to learn more about the properties that can be customized.

#Go Back

goBack() shows the previous screen, using the original transition that was used to navigate to the current screen.

navigation.goBack()

#Instant

instant() shows the next screen instantly.

navigation.instant(<Component />)

#Fade

fade() brings the user to the next screen by fading out the current screen and fading in the next.

navigation.fade(<Component />)

#Push

push() brings the user to the next screen by pushing the current screen out of view with the next.

You can customize which way the screen pushes through the appearsFrom property. Set to right by default.

navigation.push(<Component />)
navigation.push(<Component />, { appearsFrom: "top" }) // optional

#Modal

modal() fades in the next screen on top of the current screen in the center.

You can customize the backdrop color through the backdropColor property. Set to rgba(4,4,15,0.4) by default.

navigation.modal(<Component />)
navigation.modal(<Component />, {
  backdropColor: "rgba(4,4,15,0.4)",
}) // optional

#Overlay

overlay() pushes the next screen on top of the current screen.

You can customize which way the screen pushes through the appearsFrom property, and the backdrop color through the backdropColor property. Set to right and rgba(4,4,15,0.4) by default.

navigation.overlay(<Component />)
navigation.overlay(<Component />, {
  appearsFrom: "left",
  backdropColor: "rgba(4,4,15,0.4)",
}) // optional

#Flip

flip() shows the next screen by flipping the current screen 180 degrees.

You can customize which way the screen flips through the appearsFrom property. Set to right by default.

navigation.flip(<Component />)
navigation.flip(<Component />, { appearsFrom: "right" }) // optional

#Custom Transitions Beta

Not only can you use the built in default transitions, but you have the ability to create your own.

#Custom Transition

customTransition() allows you to design and customize the flows your users will experience through your prototypes.

All built-in transitions are defined using the same API as custom transitions. The definition contains eight properties which are all optional.

navigation.customTransition(
  <Component />,
  userTransitionDefinition
)

#position: NavigationTransitionPosition

Defines the position and size of the incoming screen wrapper. Defaults to top, right, bottom, and left of 0.

navigation.customTransition(<Component />, {
  position: { top: 0, right: 0, bottom: 0, left: 0 },
})

#animation: Transition

Animation options that set the transition properties for the animation.

navigation.customTransition(<Component />, {
  animation: {
        type: "spring"
        stiffness: 300,
        damping: 100,
    }
})

#overCurrentContext: boolean

Defines whether the incoming screen should render over the current context, like an overlay or modal. Defaults to false.

navigation.customTransition(<Component />, {
  overCurrentContext: true,
})

#backdropColor: string

Defines the backdrop color when the incoming screen is rendered over the current context. Defaults to rgba(4,4,15,0.4).

navigation.customTransition(<Component />, {
  backdropColor: "rgba(4,4,15,0.4)",
})

#goBackOnTapOutside: boolean

Defines whether a tap in the background should dismiss the screen presented over the current context. Defaults to true.

navigation.customTransition(<Component />, {
  goBackOnTapOutside: true,
})

#backfaceVisible: boolean

Defines whether the backface of the incoming and outgoing screens should be visible, necessary for certain 3D transitions. Defaults to true.

navigation.customTransition(<Component />, {
  backfaceVisible: true,
})

#enter: Partial<FrameProps>

Defines the beginning state of the incoming screen wrapper.

navigation.customTransition(<Component />, {
  enter: { y: "100%", scale: 0 },
})

#exit: Partial<FrameProps>

Defines the end state of the outgoing screen wrapper.

navigation.customTransition(<Component />, {
  exit: { y: "100%", opacity: 0 },
})