Edit Page

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

#Navigate

The Navigate action in Framer is one of the default actions you can use. Navigate provides a number of customizable options, such as Target, Transition, and more.

You'll see this as an option under the Prototyping panel after selecting an event. If you use the Prototype Connector or the hotkey "L", the Navigate action will be attached to the onTap event by default.

#useNavigation

Similarly to Action Controls, navigation can also be handled through code. The useNavigation() hook can be called from within a function component, a code override, or a custom action.

// Custom Action example
export function CustomAction(): ActionHandler {
  const navigation = useNavigation()

  return () => {
    navigation.goBack()
  }
}

#Transitions

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.

Certain transitions can also accept more arguments to customize it's behavior. If you're using the useNavigation hook with custom actions, it might be helpful to pass a ComponentInstance to the custom action through ActionControls.

#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 appearFrom property. Set to right by default.

navigation.push(<Component />)
navigation.push(<Component />, { appearFrom: "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 appearFrom 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 />, {
  appearFrom: "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 appearFrom property. Set to right by default.

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

#Custom Transitions

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.

export function CustomAction(): ActionHandler {
  const navigation = useNavigation()

  const CustomTransition: NavigationTransition = {
    position: { top: 0, right: 0, bottom: 0, left: 0 },
  }
  return () => {
    navigation.customTransition(
      <Component />
      CustomTransition
    )
  }
}

#animation: Transition

Animation options that set the transition properties for the animation.

export function CustomAction(): ActionHandler {
  const navigation = useNavigation()

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

#overCurrentContext: boolean

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

export function CustomAction(): ActionHandler {
  const navigation = useNavigation()

  const CustomTransition: NavigationTransition = {
    overCurrentContext: true,
  }
  return () => {
    navigation.customTransition(
      <Component />
      CustomTransition
    )
  }
}

#backdropColor: string

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

export function CustomAction(): ActionHandler {
  const navigation = useNavigation()

  const CustomTransition: NavigationTransition = {
    backdropColor: "rgba(4,4,15,0.4)",
  }
  return () => {
    navigation.customTransition(
      <Component />
      CustomTransition
    )
  }
}

#goBackOnTapOutside: boolean

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

export function CustomAction(): ActionHandler {
  const navigation = useNavigation()

  const CustomTransition: NavigationTransition = {
    goBackOnTapOutside: true,
  }
  return () => {
    navigation.customTransition(
      <Component />
      CustomTransition
    )
  }
}

#backfaceVisible: boolean

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

export function CustomAction(): ActionHandler {
  const navigation = useNavigation()

  const CustomTransition: NavigationTransition = {
    backfaceVisible: true,
  }
  return () => {
    navigation.customTransition(
      <Component />
      CustomTransition
    )
  }
}

#enter: Partial<FrameProps>

Defines the begin state of the incoming screen wrapper.

export function CustomAction(): ActionHandler {
  const navigation = useNavigation()

  const CustomTransition: NavigationTransition = {
    enter: { y: "100%" },
  }
  return () => {
    navigation.customTransition(
      <Component />
      CustomTransition
    )
  }
}

#exit: Partial<FrameProps>

Defines the end state of the outgoing screen wrapper.

export function CustomAction(): ActionHandler {
  const navigation = useNavigation()

  const CustomTransition: NavigationTransition = {
    exit: { y: "100%" },
  }
  return () => {
    navigation.customTransition(
      <Component />
      CustomTransition
    )
  }
}