> ## Documentation Index
> Fetch the complete documentation index at: https://rive-react-imperative.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Selection and Navigation

> Select objects, move through nested groups, and navigate the stage.

export const YouTube = ({id, timestamp}) => {
  const videoSrc = timestamp ? `https://www.youtube.com/embed/${id}?start=${timestamp}` : `https://www.youtube.com/embed/${id}`;
  return <iframe width="100%" height="400" src={videoSrc} title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerPolicy="strict-origin-when-cross-origin" allowFullScreen />;
};

Use selection and navigation controls to choose objects, move through nested groups, and move around the stage.

<Tip>
  For a complete list of shortcuts, see [Keyboard Shortcuts](/editor/keyboard-shortcuts).
</Tip>

## Selecting Objects

<YouTube id="xQK498Y1J8M" />

Click an object to select it. To select multiple objects, drag over them to create a marquee selection.

Hold `Shift` while clicking or dragging to add objects to the current selection or remove selected objects.

### Select Objects Inside Groups

To select an object inside a group, double-click the object. This moves you one level down in the hierarchy, so you can select objects inside that group.

<img src="https://mintcdn.com/rive-react-imperative/_1IBe0EQmp7-trLQ/images/editor/fundamentals/DoubleClick2.gif?s=b53dbbbf084e140c1ce04bc9c5d81943" alt="Double Click" width="800" height="459" data-path="images/editor/fundamentals/DoubleClick2.gif" />

### Deep Select

To select an object inside nested groups, hold `⌘` on macOS or `Ctrl` on Windows, then click the object.

Deep select lets you select an object directly, even when it is inside multiple groups.

<Note>
  [Targets](/editor/fundamentals/groups#target) are directly selectable on the stage. You don't need to use **Deep Select** to select them.
</Note>

<img src="https://mintcdn.com/rive-react-imperative/_1IBe0EQmp7-trLQ/images/editor/fundamentals/DeepSelect.gif?s=90e282a62ebba2f1a9009475094c308c" alt="Deep Select" width="800" height="459" data-path="images/editor/fundamentals/DeepSelect.gif" />

### Select Behind

When you hover over an object on the stage, Rive outlines the object that will be selected if you click.

If multiple objects overlap, press `Alt` to cycle through objects under the cursor. When the object you want is outlined, click to select it.

<img src="https://mintcdn.com/rive-react-imperative/_1IBe0EQmp7-trLQ/images/editor/interface-overview/select-behind.gif?s=0330c7c31bbcb7b5bdf869be52a7a75f" alt="Select behind" width="640" height="341" data-path="images/editor/interface-overview/select-behind.gif" />

### Moving Up and Down the Hierarchy

Use `Enter` and `Esc` to move through nested objects in the hierarchy.

* Press `Enter` to move down into the selected group and select its first child.
* Press `Esc` to move up and select the parent of the current selection.

<img src="https://mintcdn.com/rive-react-imperative/_1IBe0EQmp7-trLQ/images/editor/fundamentals/EnterAndEscape.gif?s=a0a326847795e8a1d3d9d620368425b4" alt="Enter And Escape" width="800" height="459" data-path="images/editor/fundamentals/EnterAndEscape.gif" />

## Navigating the Stage

### Pan

To pan the stage, right-click and drag.

You can also hold `Spacebar` to temporarily switch to the Pan tool, then click and drag to move around the stage.

If you're using a trackpad, scroll left or right to pan horizontally.

<img src="https://mintcdn.com/rive-react-imperative/_1IBe0EQmp7-trLQ/images/editor/interface-overview/pan.gif?s=ec91946ba0c2ba743410dc48402c6d45" alt="Panning the stage" width="1384" height="997" data-path="images/editor/interface-overview/pan.gif" />

### Zoom

To zoom in or out, place your cursor over the stage, then hold `⌘` on macOS or `Ctrl` on Windows and scroll.

<img src="https://mintcdn.com/rive-react-imperative/_1IBe0EQmp7-trLQ/images/editor/interface-overview/zoom.gif?s=7e10e0e37c4f2091d87b8505a1a75bb5" alt="Zooming the stage" width="1385" height="998" data-path="images/editor/interface-overview/zoom.gif" />

You can also use keyboard shortcuts:

* Press `+` to zoom in.
* Press `-` to zoom out.
* Press `⌘` + `0` on macOS or `Ctrl` + `0` on Windows to return to 100%.

### Fit Selection

Press `F` to fit the current selection in the viewable stage area.

<img src="https://mintcdn.com/rive-react-imperative/_1IBe0EQmp7-trLQ/images/editor/interface-overview/fit-selection.gif?s=9ea71ef1601764e501c4cccca98145f5" alt="Fitting the selected object in view" width="1381" height="993" data-path="images/editor/interface-overview/fit-selection.gif" />

If an object is selected, Rive fits that object in view. If an artboard is selected, Rive fits the artboard in view.

<Tip>
  If you lose track of an artboard or object on the stage, select it in the hierarchy and press `F` to fit it in view.
</Tip>
