Guide
- Keyboard
- Shortcut
- Navigation
Guide
- Keyboard
- Shortcut
- Navigation
Guide
- Keyboard
- Shortcut
- Navigation
How to Add Keyboard Shortcut Navigation to Framer Websites
If you want to make your Framer site feel fast, slick, and professional, keyboard shortcuts are the way to go. They let users jump between pages instantly without clicking around. But here’s the catch: Framer doesn’t support keyboard navigation out of the box. Don’t worry though, I’ll show you a clever workaround that doesn’t require any code.
Posted by
Nandi
Table of contents
What we’re building
We’re setting up a navigation system where users can either:
Click the menu items
Or use keyboard shortcuts (like 1, 2, 3, 4) to jump between pages
You’ll even see little shortcut tags next to each menu item, just like pro-level apps. And the best part? You only need to drag, drop, and tweak a few components.
What we’re building
We’re setting up a navigation system where users can either:
Click the menu items
Or use keyboard shortcuts (like 1, 2, 3, 4) to jump between pages
You’ll even see little shortcut tags next to each menu item, just like pro-level apps. And the best part? You only need to drag, drop, and tweak a few components.
What we’re building
We’re setting up a navigation system where users can either:
Click the menu items
Or use keyboard shortcuts (like 1, 2, 3, 4) to jump between pages
You’ll even see little shortcut tags next to each menu item, just like pro-level apps. And the best part? You only need to drag, drop, and tweak a few components.
Keyboard shortcut navigation
Keyboard shortcut navigation
Keyboard shortcut navigation
Build your navigation menu
Create a clean, simple nav with a few items stacked next to each other.
Each item will include:
The page name (like “Home” or “Contact”)
A shortcut tag (like “1” or “4”)
You can build this using stacks and text layers. Then, wrap each menu item into its own component. Inside that component:
Turn the page name into a title variable
Turn the shortcut tag into a shortcut variable
Add a link to the correct page
Create active/inactive variants for styling
Example: On the active variant, highlight the background and tag. On the inactive one, drop the opacity.
Make it reusable
Once your menu items are set up:
Stack them all together
Wrap the whole menu in a navigation component
Create variants for each page (Home, Work, About, Contact, etc.)
Each variant highlights the active page. So on the “Home” page, the “Home” item is active, and the rest are inactive. On the “Work” page, “Work” is active, and so on. Now you’ve got one navigation component that adjusts automatically based on the page it’s placed on.
Add the component to the navigation
Now for the magic touch. Open your navigation component, and paste in the Shortcut Component. Don't worry about the component cluttering your design – it's a completely invisible 0x0 component. You can also set it to absolute position so it doesn’t push other content away on the page.
Build your navigation menu
Create a clean, simple nav with a few items stacked next to each other.
Each item will include:
The page name (like “Home” or “Contact”)
A shortcut tag (like “1” or “4”)
You can build this using stacks and text layers. Then, wrap each menu item into its own component. Inside that component:
Turn the page name into a title variable
Turn the shortcut tag into a shortcut variable
Add a link to the correct page
Create active/inactive variants for styling
Example: On the active variant, highlight the background and tag. On the inactive one, drop the opacity.
Make it reusable
Once your menu items are set up:
Stack them all together
Wrap the whole menu in a navigation component
Create variants for each page (Home, Work, About, Contact, etc.)
Each variant highlights the active page. So on the “Home” page, the “Home” item is active, and the rest are inactive. On the “Work” page, “Work” is active, and so on. Now you’ve got one navigation component that adjusts automatically based on the page it’s placed on.
Add the component to the navigation
Now for the magic touch. Open your navigation component, and paste in the Shortcut Component. Don't worry about the component cluttering your design – it's a completely invisible 0x0 component. You can also set it to absolute position so it doesn’t push other content away on the page.
Build your navigation menu
Create a clean, simple nav with a few items stacked next to each other.
Each item will include:
The page name (like “Home” or “Contact”)
A shortcut tag (like “1” or “4”)
You can build this using stacks and text layers. Then, wrap each menu item into its own component. Inside that component:
Turn the page name into a title variable
Turn the shortcut tag into a shortcut variable
Add a link to the correct page
Create active/inactive variants for styling
Example: On the active variant, highlight the background and tag. On the inactive one, drop the opacity.
Make it reusable
Once your menu items are set up:
Stack them all together
Wrap the whole menu in a navigation component
Create variants for each page (Home, Work, About, Contact, etc.)
Each variant highlights the active page. So on the “Home” page, the “Home” item is active, and the rest are inactive. On the “Work” page, “Work” is active, and so on. Now you’ve got one navigation component that adjusts automatically based on the page it’s placed on.
Add the component to the navigation
Now for the magic touch. Open your navigation component, and paste in the Shortcut Component. Don't worry about the component cluttering your design – it's a completely invisible 0x0 component. You can also set it to absolute position so it doesn’t push other content away on the page.
The Shortcuts component within the navigation component, as an absolute position element.
The Shortcuts component within the navigation component, as an absolute position element.
The Shortcuts component within the navigation component, as an absolute position element.
Assign keyboard shortcuts
In the right-hand panel of the Shortcut Component, you can define which keys trigger which pages.
Example:
Pressing 1 goes to the Home page
Pressing 2 goes to Work
Pressing 3 goes to About
Pressing 4 goes to Contact
Match these shortcuts to the tags you displayed on the nav items. Now, users can either click or tap a key to navigate.
Assign keyboard shortcuts
In the right-hand panel of the Shortcut Component, you can define which keys trigger which pages.
Example:
Pressing 1 goes to the Home page
Pressing 2 goes to Work
Pressing 3 goes to About
Pressing 4 goes to Contact
Match these shortcuts to the tags you displayed on the nav items. Now, users can either click or tap a key to navigate.
Assign keyboard shortcuts
In the right-hand panel of the Shortcut Component, you can define which keys trigger which pages.
Example:
Pressing 1 goes to the Home page
Pressing 2 goes to Work
Pressing 3 goes to About
Pressing 4 goes to Contact
Match these shortcuts to the tags you displayed on the nav items. Now, users can either click or tap a key to navigate.
The properties of the Shortcuts component for Framer.
The properties of the Shortcuts component for Framer.
The properties of the Shortcuts component for Framer.
Bonus tip: You can even build a mobile version of your navigation and include the shortcut component there too (just make sure it exists on every breakpoint where you want keyboard support).
Wrapping up
With just a few components and no code at all, you’ve added full-on keyboard shortcut navigation to your Framer site. It’s a small detail that adds a ton of polish, and now you’ve got it working seamlessly across pages. To avoid frustration, the shortcuts are automatically disabled if a visitor is currently clicking and typing inside a text box, search bar, or any similar input area. This prevents them from accidentally navigating away when they just mean to type!
Bonus tip: You can even build a mobile version of your navigation and include the shortcut component there too (just make sure it exists on every breakpoint where you want keyboard support).
Wrapping up
With just a few components and no code at all, you’ve added full-on keyboard shortcut navigation to your Framer site. It’s a small detail that adds a ton of polish, and now you’ve got it working seamlessly across pages. To avoid frustration, the shortcuts are automatically disabled if a visitor is currently clicking and typing inside a text box, search bar, or any similar input area. This prevents them from accidentally navigating away when they just mean to type!
Bonus tip: You can even build a mobile version of your navigation and include the shortcut component there too (just make sure it exists on every breakpoint where you want keyboard support).
Wrapping up
With just a few components and no code at all, you’ve added full-on keyboard shortcut navigation to your Framer site. It’s a small detail that adds a ton of polish, and now you’ve got it working seamlessly across pages. To avoid frustration, the shortcuts are automatically disabled if a visitor is currently clicking and typing inside a text box, search bar, or any similar input area. This prevents them from accidentally navigating away when they just mean to type!
