New
New
New
Component
Shortcut Component for Framer
This is a handy component for Framer that lets you create custom keyboard shortcuts for navigating your website. Just add it to your page, type in the key combinations and links you want in the properties panel, and let your visitors jump around your site using their keyboard – no coding needed!
Created by
About the resource
Getting started is simple: just copy and paste the Shortcuts component onto your Framer canvas. Since you'll often want shortcuts (especially for navigation) to work across your entire site, the best place to put this component is usually inside your main site navigation component. Doing this means it will automatically be included on every page that uses that navigation. Crucially, remember that the keyboard shortcuts you define will only work on pages where this Shortcut component is actually present.
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.
About the resource
Getting started is simple: just copy and paste the Shortcuts component onto your Framer canvas. Since you'll often want shortcuts (especially for navigation) to work across your entire site, the best place to put this component is usually inside your main site navigation component. Doing this means it will automatically be included on every page that uses that navigation. Crucially, remember that the keyboard shortcuts you define will only work on pages where this Shortcut component is actually present.
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.
About the resource
Getting started is simple: just copy and paste the Shortcuts component onto your Framer canvas. Since you'll often want shortcuts (especially for navigation) to work across your entire site, the best place to put this component is usually inside your main site navigation component. Doing this means it will automatically be included on every page that uses that navigation. Crucially, remember that the keyboard shortcuts you define will only work on pages where this Shortcut component is actually present.
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.
Once you've placed the component, select it and look at the properties panel on the right side of Framer. This is where you bring your shortcuts to life! For each shortcut:
Enter the key combination in the
Keyfield. Use a "+" sign to join multiple keys together (e.g.,cmd+k, orshift+h).Set the
Linkfield to the page or external website you want the shortcut to navigate to.Choose if the link should open in a
New Tab.
Once you've placed the component, select it and look at the properties panel on the right side of Framer. This is where you bring your shortcuts to life! For each shortcut:
Enter the key combination in the
Keyfield. Use a "+" sign to join multiple keys together (e.g.,cmd+k, orshift+h).Set the
Linkfield to the page or external website you want the shortcut to navigate to.Choose if the link should open in a
New Tab.
Once you've placed the component, select it and look at the properties panel on the right side of Framer. This is where you bring your shortcuts to life! For each shortcut:
Enter the key combination in the
Keyfield. Use a "+" sign to join multiple keys together (e.g.,cmd+k, orshift+h).Set the
Linkfield to the page or external website you want the shortcut to navigate to.Choose if the link should open in a
New Tab.
The properties of the Shortcuts component for Framer.
The properties of the Shortcuts component for Framer.
The properties of the Shortcuts component for Framer.
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!
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!
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!
