Navigate using arrow keys

In this video lesson, we'll show how you can use the keyboard arrows in Webflow to quickly select between elements and their child elements on the canvas. The up arrow selects an element’s parent, the down arrow selects an element’s child, and the left and right arrows select between sibling elements on the same level.

Check out our full list of keyboard shortcuts in the Designer.

Video transcript

</summary>

[Grimur] When we select between elements, we use the arrow keys to go up and down. We can use the up and down arrow to move between... This is not working, it must be a bug… <br>

[Grimur]Meg?<br>

[Meg] It’s supposed to work that way.<br>

[Grimur] I’m talking abou–are you serious?<br>

[Meg] Yeah, it’s hierarchical.<br>

[Grimur] ...what?<br>

[Meg] Hierarchical<br>

[Grimur] [over] I got what you said; it’s not a real word.<br>

[Meg] Hierarchical.<br>

[Grimur] Higher oricle.

[Meg] Hierarchical.<br>

[Grimur] Harkle-cull.<br>

[Meg] Higher…<br>

[Grimur][high pitch] Harkle?<br>

[Meg] No, say “higher.”<br>

[Grimur] Higher.<br>

[Meg] Now “archicle.”<br>

[Grimur] No.<br>

[Meg]The up arrow? Selects an element’s parent. The down arrow...selects an element’s child.<br>

[Grimur] Oh. But that doesn’t explain the (left and right…)<br>

[Meg] [over] Left and right? Select between SIBLING elements.<br>

[Grimur] [over]: Sibling elements.<br>

[Meg] That’s right.<br>

[Grimur] Up and down to select between parents and children.<br>

[Meg] Good.<br>

[Grimur] Left and right to select between sibling elements on the same level. Does it 100% make sense now? Nuh---(yes.)<br>

[Meg] Yes.<br>

[Grimur] Higher-archial.<br>

</details>

Video details

Duration

0:57

Topic

Design & build

Continue watching

<h3>Migrate a site to Webflow</h3>1:16:53

<h3>Cursor follow interactions</h3>10:25

<h3>Build a cursor-following 3D button</h3>5:15

<h3>Webflow MCP: Build an FAQ accordion with Claude</h3>8:19

<h3>Page load interaction</h3>9:43

{
  "@context": "https://schema.org",
  "@type": "VideoObject",
  "name": "Navigate using arrow keys",
  "description": "In web design, there are elements that have child elements that may even have their own child elements. For example, a Section could contain a Div block that could contain a Heading, Paragraph and Button. You can view this element hierarchy in the Navigator and learn more about element hierarchy: http://wfl.io/webflow-element-hierarchy",
  "url": "https://university.webflow.com/videos/navigate-using-keyboard-arrows",
  "thumbnailUrl": "https://cdn.prod.website-files.com/64949e4863d96e26a1da8386/64b9453065a683fd39bcd7da_5f9326f8607fe1ed9715ee8f_YT-Thumbnail-20(Breakpoint-20shortcuts).webp",
  "duration": "0:57",
  "uploadDate": "2026-07-15T20:51:09.709Z",
  "contentUrl": "https://www.youtube.com/watch?v=hjapaHqMuAI",
  "embedUrl": "https://www.youtube.com/embed/hjapaHqMuAI",
  "inLanguage": "en",
  "publisher": {
    "@type": "Organization",
    "name": "Webflow",
    "logo": {
      "@type": "ImageObject",
      "url": "https://assets-global.website-files.com/6009ec03c3b4e33e78af04aa/6516be62e5c189e9d4fa5e8f_webflow-logo.svg"
    }
  },
  "about": {
    "@type": "Thing",
    "name": ""
  }
}