Skip to content

Navbar Dropdown items with a "to" tag cant be clicked on mobile #11049

@LostAndDead

Description

@LostAndDead

Have you read the Contributing Guidelines on issues?

Prerequisites

Description

When using a navbar dropdown item with a "to" tag it cant be clicked on mobile

If you have a navbar item as below

        {
          type: 'dropdown',
          label: 'Extraction',
          position: 'left',
          to: '/extraction/intro',
          items: [
            {
              label: 'MTP',
              to: '/extraction/mtp',
            },
            {
              label: 'ADB',
              to: '/extraction/adb/adb_extraction',
            },
            {
              label: 'Cloud',
              to: '/extraction/cloud',
            },
          ],
        },

If you open it on desktop the "Extraction" value shows the others when hovered and can be clicked to go to "/extraction/intro" but on mobile when clicked it opens the dropdown and clicking again closes it, its impossible to go to "/extraction/intro" on a mobile device using the navbar (unless you hold on "Extraction" and copy/follow the link)

this repo contains the problem. If you want a live example you can find it here

Reproducible demo

No response

Steps to reproduce

  1. Add dropdown navbar item with "to" value
  2. Open page on mobile
  3. Cant click on it to go to "to" value

Expected behavior

Desktop behaviour unchanged

On mobile clicking it once opens the menu, clicking again goes to the link, to close the menu click on the arrow

Actual behavior

You cant navigate to the url

Your environment

  • Public source code:
  • Public site URL:
  • Docusaurus version used:
  • Environment name and version (e.g. Chrome 89, Node.js 16.4):
  • Operating system and version (e.g. Ubuntu 20.04.2 LTS):

Self-service

  • I'd be willing to fix this bug myself.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugAn error in the Docusaurus core causing instability or issues with its execution

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions