Menu

A list of actions in a dropdown, enhanced with keyboard navigation.

Made by imskyleen
Edit on GitHub

Installation

Usage

<Menu>
  <MenuTrigger>Open</MenuTrigger>

  <MenuPanel>
    <MenuGroup>
      <MenuItem>
        <span>Profile</span>
        <MenuShortcut>⇧⌘P</MenuShortcut>
      </MenuItem>
      <MenuItem>
        <span>Billing</span>
        <MenuShortcut>⌘B</MenuShortcut>
      </MenuItem>
      <MenuItem>
        <span>Settings</span>
        <MenuShortcut>⌘S</MenuShortcut>
      </MenuItem>
      <MenuItem>
        <span>Keyboard shortcuts</span>
        <MenuShortcut>⌘K</MenuShortcut>
      </MenuItem>
    </MenuGroup>

    <MenuSeparator />

    <MenuGroup>
      <MenuItem>
        <span>Team</span>
      </MenuItem>

      <MenuSubmenu>
        <MenuSubmenuTrigger>
          <span>Invite users</span>
          <ChevronRight />
        </MenuSubmenuTrigger>

        <MenuSubmenuPanel>
          <MenuItem>
            <span>Email</span>
          </MenuItem>
          <MenuItem>
            <span>Message</span>
          </MenuItem>

          <MenuSeparator />

          <MenuItem>
            <span>More...</span>
          </MenuItem>
        </MenuSubmenuPanel>
      </MenuSubmenu>

      <MenuItem>
        <span>New Team</span>
        <MenuShortcut>⌘+T</MenuShortcut>
      </MenuItem>
    </MenuGroup>

    <MenuSeparator />

    <MenuItem>
      <span>Log out</span>
      <MenuShortcut>⇧⌘Q</MenuShortcut>
    </MenuItem>
  </MenuPanel>
</Menu>

Examples

API Reference

PropTypeDefault
sideOffset?
number
4
transition?
Transition
{ duration: 0.2 }
PropTypeDefault
variant?
0
default
inset?
boolean
-
PropTypeDefault
inset?
boolean
-
PropTypeDefault
sideOffset?
number
4
transition?
Transition
{ duration: 0.2 }

Credits

Built by Skyleen. The source code is available on GitHub.

Last updated: 10/18/2025