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