0

I have a FluenUI contextual menu component, initialized like this:

const items = [
  {
    key: 'linkWithTarget',
    text: 'Download File',
    href: 'https://some.site.com/somefolder/somefile.txt',
  }
];

<ContextualMenu items={menuItems} ... />

How do I specify download attribute for this menu item to force download? I mean, I would like to get generated HTML like this:

<a href="http://somesite.net/somefolder/somefile.txt" download>Download file</a>

I have looked at the template options available for this component, but have not found anything reasonable.

Nikolay
  • 10,752
  • 2
  • 23
  • 51
  • have you tried putting the 'download' key in the desired item object...? From the docs and their "Basic ContextualMenu" example it looks like it automatically populates all the attributes from the keys that exist in each object. – Tyler Stoney Dec 20 '21 at 18:04
  • I need to put the attribute into menu list item (so when user clicks the item, the file is downloaded). The menu itself is a compound component (it consists of many parts, the tag I'm interested in rendered from somewhere "deep inside", it is not a top-level component) – Nikolay Dec 20 '21 at 18:18
  • I guess the next question would be do you want this to happen dynamically? If not, then again, from what I see in the docs, it looks as straightforward as hard-coding the key/value pair "download: filename" in the desired items in the list. – Tyler Stoney Dec 20 '21 at 18:24
  • If you try to put "download: filename" in that list, I think you'll get a syntax error (it is a typescript library, only existing, declared members are allowed to present). But I'll try this to be sure, thanks :) – Nikolay Dec 20 '21 at 19:48
  • 1
    Yes, if you try to put "download: something" then compile fails, because items should be of type IContextualMenuItem (https://learn.microsoft.com/en-us/javascript/api/react-internal/icontextualmenuitem?view=office-ui-fabric-react-latest). This type does not define property "download", there are only "href" and "target". – Nikolay Dec 20 '21 at 19:56
  • How about to use `onRender` inside items object: https://codepen.io/savkelita/pen/wvrqazw?editors=0010 – Marko Savic Dec 20 '21 at 20:06
  • This is the "template" option I was talking in the description above. The template for this control is too complex to customize IMHO (~40 lines). It does not have sub-template to customize the link only (or I have not found any). I mean, to keep all styling you'll have to copy tons of code, that can be changed later in the library later by developers. I think this path is not reasonable (I did not elaborate in description but now I think it is clearer). – Nikolay Dec 20 '21 at 20:14
  • @Nikolay ahh oh gotcha. Wow that's a bit restrictive, microsoft! I'll keep poking around the docs, but the only other thing that jumps out at me is the `data` property from that link. Wonder if we could fudge something with that... – Tyler Stoney Dec 20 '21 at 20:44

0 Answers0