---
title: "Keyboard Variant — Framer component · Best of Framer"
description: "$3.00 · Framer component · by MJ Nafi · Navigation. Keyboard Shortcut to change Variant"
canonical: "https://framer.elliotli.dev/component/keyboard-variant"
---

[Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/Keyboard Variant

# Keyboard Variant

Keyboard Shortcut to change Variant

[View on Framer](https://framer.com/marketplace/components/keyboard-variant/?via=elliot-li)

![Keyboard Variant preview image 1](https://framer.elliotli.dev/og/component/keyboard-variant/76251343514e9ce8/1600x1200.jpg)

## Summary

Keyboard Shortcut to change Variant

## Description

This component only changes the variant of a component to another variant. Suppose, you want to change a component's variant from A to B using a shortcut(e.g. alt + x), this is the component you need. You cannot transition from page to page as of now.

## How to use it

[_Click here for proper documentation_](https://stewpeed-keyboardshortcut.framer.website/how)

1.  Drop this component inside another component that has multiple variants.
    
2.  Set position to absolute and pin it to all 4 sides. This will make it easy to link it to other variants. Have the Z index as -1 as well. Alternatively, you can keep the width and height to 1 and pin it to a corner.
    
3.  Configure this component: assign whatever key binding you want. You can choose multiple modifiers or no modifiers with a key. You can also only use modifiers as a trigger. Tab and Caps Lock cannot be combined with other key. You can separate two keys with "&&" (e.g. "a && b") - this will enable separate key bindings for the same event.
    
4.  Now connect this component to your desired variant. You can add the interaction through the interactions panel as well.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #10188

## Details

- **Author**: MJ Nafi
- **Price**: $3.00
- **Published**: 2026-01-24
- **Updated**: 2026-04-28
- **Added**: 2026-01-09
- **Categories**: Navigation

## More like this

-   [Reveal Navigations](/component/reveal-navigations) — Design Supply · Free — A calmer way to open your menu
-   [Collapsible Sidebar](/component/collapsible-sidebar) — Marso Angelov · $10 — Responsive Side Navigation
-   [Dial Picker](/component/dial-picker) — Tanmay Kaper · $14 — A machined dial for your projects
-   [Expanding Side Menu](/component/expanding-side-menu) — Russet Supply · $5 — Animated Framer Navigation