SubMenu on Menu can't open by touch device.

[piyanggoon]

It can open by hit "space bar" on keyboard.

[cschroeter]

@piyanggoon

I've tested the sub menu at https://park-ui.com/react/docs/components/menu and works fine. Please provide a reproduction so I can assist you.

[piyanggoon]

@cschroeter

const MENU = [
    { url: "/market", name: "Market", icon: <Listing w={24} h={24} /> },
    { url: "/user/sales", name: "Selling", icon: <Selling w={24} h={24} /> },
]

const MENU_SOCIAL = [
    { url: "/", name: "Discord" },
    { url: "/", name: "Twitter" }
]

const MENU_MORE = [
    { url: "/faq", name: "Frequently Asked Questions" },
    { url: "/terms", name: "Terms of Service" },
    { url: "/privacy", name: "Privacy Policy" },
    { url: "/aboutus", name: "About Us" },
]

<Menu.Root
    positioning={{
        placement: "bottom"
    }}
>
    <Menu.Trigger
        cursor="pointer"
        color="fg.muted"
        _open={{
            color: "fg.default"
        }}
        md={{
            display: "none"
        }}
    >
        <More w={24} h={24} />
    </Menu.Trigger>
    <Menu.Positioner>
        <Menu.Content>
            <Menu.ItemGroup>
                {MENU.map((val, idx) => (
                    <Menu.Item
                        key={idx}
                        value={val.name}
                        asChild
                    >
                        <Link href={val.url}>
                            <Text as="p" fontWeight="semibold">
                                {val.name}
                            </Text>
                        </Link>
                    </Menu.Item>
                ))}
                <Menu.Separator />
                {MENU_SOCIAL.map((val, idx) => (
                    <Menu.Item
                        key={idx}
                        value={val.name}
                        asChild
                    >
                        <Link href={val.url} target="_blank">
                            <Text as="p" fontWeight="semibold">
                                {val.name}
                            </Text>
                        </Link>
                    </Menu.Item>
                ))}
                <Menu.Separator />
                <Menu.Root
                    positioning={{
                        placement: "right-start"
                    }}
                >
                    <Menu.Trigger>
                        <Menu.TriggerItem>
                            <HStack justify="space-between" flex="1">
                                <Text as="p" fontWeight="semibold">
                                    More
                                </Text>
                                <ArrowRight w={24} h={24} />
                            </HStack>
                        </Menu.TriggerItem>
                    </Menu.Trigger>
                    <Menu.Positioner>
                        <Menu.Content>
                            {MENU_MORE.map((val, idx) => (
                                <Menu.Item
                                    key={idx}
                                    value={val.name}
                                    asChild
                                >
                                    <Link href={val.url}>
                                        <Text as="p" fontWeight="semibold">
                                            {val.name}
                                        </Text>
                                    </Link>
                                </Menu.Item>
                            ))}
                        </Menu.Content>
                    </Menu.Positioner>
                </Menu.Root>
            </Menu.ItemGroup>
        </Menu.Content>
    </Menu.Positioner>
</Menu.Root>

Code on server component.

[piyanggoon]

Hit on touch device

Hit by "space bar"

[cschroeter]

<Menu.Content>
  <Menu.Root>
    <Menu.TriggerItem>Nested Menu</Menu.TriggerItem>

Your setup is slightly in correct. You only need one Menu.Trigger

Learn more here: https://ark-ui.com/react/docs/components/menu#nested-menu

[piyanggoon]

Lol, sorry for my mistake look stupid rofl.