# 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.
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 },
})