navigator.share opens a smaller menu

Question

I am using web share API. This is the code

navigator
  .share({
    title: document.title,
    text,
  })

When I click the button and the above code is called, the smaller menu for sharing is opened, but I want the other complete menu to be opened. Currently, the bigger one is opened by manually clicking more button in the smaller menu which is at the last of the list

The smaller one-

The bigger one

Answer 1

Check this out

if (navigator.canShare && navigator.canShare({ files: filesArray })) {
  navigator.share({
    files: filesArray,
    title: 'Pictures',
    text: 'Our Pictures.',
  })
  .then(() => console.log('Share was successful.'))
  .catch((error) => console.log('Sharing failed', error));
} else {
  console.log(`Your system doesn't support sharing files.`);
}

Answer 2

Since you need to press More... to see the big menu (Share via); you can't do that using navigator.share API without user involvement.

Share via not possible from the browser, it's possible inside mobile applications (Android/iOS).

Again, navigator.share Just call the native share in Android/iOS, then the traget system handle the rest! this feature have some security concerns you can see it throw w3.org

https://www.w3.org/TR/web-share/#dom-navigator-share

At the end if want to share via specific app you can use deeplinking.