Navigation

Search…
Navigation
API Reference
useNavigation
A hook that lets you push and pop view components in the navigation stack.
You most likely won't use this hook too often. To push a new component, use the Push Action. When a user presses ESC, we automatically pop to the previous component.
Signature
1
function useNavigation(): Navigation;
Copied!
Example
1
import { ActionPanel, Detail, useNavigation } from "@raycast/api";
2
​
3
function Ping() {
4
  const { push } = useNavigation();
5
​
6
  return (
7
    <Detail
8
      markdown="Ping"
9
      actions={
10
        <ActionPanel>
11
          <ActionPanel.Item title="Push" onAction={() => push(<Pong />)} />
12
        </ActionPanel>
13
      }
14
    />
15
  );
16
}
17
​
18
function Pong() {
19
  const { pop } = useNavigation();
20
​
21
  return (
22
    <Detail
23
      markdown="Pong"
24
      actions={
25
        <ActionPanel>
26
          <ActionPanel.Item title="Pop" onAction={pop} />
27
        </ActionPanel>
28
      }
29
    />
30
  );
31
}
32
​
33
export default function Command() {
34
  return <Ping />;
35
}
Copied!
Return
A Navigation object with Navigation.push and Navigation.pop functions. Use the functions to alter the navigation stack.
Types
Navigation
Return type of the useNavigation hook to perform push and pop actions.
Properties
Property
Description
Type
pop*
Pop current view component from the navigation stack.
() => void
push*
Push a new view component to the navigation stack.
(component: React.ReactNode) => void
Icons & Images
Next - API Reference
Utilities
Last modified 3d ago
Copy link
Edit on GitHub
Contents