Menu

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

Made by imskyleen
Edit on GitHub

Installation

Usage

With Highlight

<Menu>
  <MenuTrigger>Open</MenuTrigger>

  <MenuPortal>
    <MenuPositioner>
      <MenuPopup>
        <MenuHighlight>
          <MenuGroup>
            <MenuHighlightItem>
              <MenuItem>
                <span>Profile</span>
                <MenuShortcut>⇧⌘P</MenuShortcut>
              </MenuItem>
            </MenuHighlightItem>
            <MenuHighlightItem>
              <MenuItem>
                <span>Billing</span>
                <MenuShortcut>⌘B</MenuShortcut>
              </MenuItem>
            </MenuHighlightItem>
            <MenuHighlightItem>
              <MenuItem>
                <span>Settings</span>
                <MenuShortcut>⌘S</MenuShortcut>
              </MenuItem>
            </MenuHighlightItem>
            <MenuHighlightItem>
              <MenuItem>
                <span>Keyboard shortcuts</span>
                <MenuShortcut>⌘K</MenuShortcut>
              </MenuItem>
            </MenuHighlightItem>
          </MenuGroup>

          <MenuSeparator />

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

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

              <MenuPortal>
                <MenuPositioner>
                  <MenuPopup>
                    <MenuHighlightItem>
                      <MenuItem>
                        <span>Email</span>
                      </MenuItem>
                    </MenuHighlightItem>
                    <MenuHighlightItem>
                      <MenuItem>
                        <span>Message</span>
                      </MenuItem>
                    </MenuHighlightItem>
                    <MenuSeparator />
                    <MenuHighlightItem>
                      <MenuItem>
                        <span>More...</span>
                      </MenuItem>
                    </MenuHighlightItem>
                  </MenuPopup>
                </MenuPositioner>
              </MenuPortal>
            </MenuSubmenu>

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

          <MenuSeparator />

          <MenuHighlightItem>
            <MenuItem>
              <span>Log out</span>
              <MenuShortcut>⇧⌘Q</MenuShortcut>
            </MenuItem>
          </MenuHighlightItem>
        </MenuHighlight>
      </MenuPopup>
    </MenuPositioner>
  </MenuPortal>
</Menu>

Without Highlight

<Menu>
  <MenuTrigger>Open</MenuTrigger>

  <MenuPortal>
    <MenuPositioner>
      <MenuPopup>
        <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>

            <MenuPortal>
              <MenuPositioner>
                <MenuPopup>
                  <MenuItem>
                    <span>Email</span>
                  </MenuItem>
                  <MenuItem>
                    <span>Message</span>
                  </MenuItem>
                  <MenuSeparator />
                  <MenuItem>
                    <span>More...</span>
                  </MenuItem>
                </MenuPopup>
              </MenuPositioner>
            </MenuPortal>
          </MenuSubmenu>

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

        <MenuSeparator />

        <MenuItem>
          <span>Log out</span>
          <MenuShortcut>⇧⌘Q</MenuShortcut>
        </MenuItem>
      </MenuPopup>
    </MenuPositioner>
  </MenuPortal>
</Menu>

API Reference

Base UI Menu.Root API Reference Base UI Menu.Trigger API Reference Base UI Menu.Portal API Reference

The keepMounted property is not supported in the MenuPortal component, as it is used for animation.

Base UI Menu.Positioner API Reference Base UI Menu.Popup API Reference
PropTypeDefault
transition?
Transition
{ duration: 0.2 }
...props?
HTMLMotionProps<"div">
-
Animate UI API Reference - Highlight
PropTypeDefault
transition?
Transition
{ type: "spring", stiffness: 350, damping: 35 }
Animate UI API Reference - HighlightItem Base UI Menu.Group API Reference Base UI Menu.GroupLabel API Reference Base UI Menu.Separator API Reference Base UI Menu.Item API Reference Base UI Menu.CheckboxItem API Reference Base UI Menu.CheckboxItemIndicator API Reference Base UI Menu.RadioGroup API Reference Base UI Menu.RadioItem API Reference Base UI Menu.RadioItemIndicator API Reference Base UI Menu.Shortcut API Reference Base UI Menu.Arrow API Reference Base UI Menu.Submenu API Reference Base UI Menu.SubmenuTrigger API Reference

Credits

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

Last updated: 10/18/2025