I was working with Office UI Fabric React library.
Out of 9 links, I had to make 3 of them external (with target="__blank")

The documentation didn't show how to add external links nor a demo.

A quick search for target returned no result.
There is this hard-to-find button, See more. Expanding it will show a target property.

So all you have to do is to add target property with __blank.
Reference: Anchor target on MDN.

1<Nav2  styles={{ root: { width: 300 } }}3  ariaLabel="Nav example similiar to one found in this demo page"4  groups={[5    {6      name: "Basic components",7      expandAriaLabel: "Expand Basic components section",8      collapseAriaLabel: "Collapse Basic components section",9      links: [10        {11          key: "React",12          name: "React Home Page",13          url: "https://reactjs.org/",14          target: "__blank",15        },16        {17          key: "r/reactjs",18          name: "r/reactjs",19          url: "https://www.reddit.com/r/reactjs/",20          target: "__blank",21        },22        {23          key: "sung.codes",24          name: "Sung's Home Page",25          url: "https://sung.codes/",26          target: "__blank",27        },28      ],29    },30  ]}31/>

---

Demo

https://codesandbox.io/embed/nervous-hypatia-yeqyh

Security Concerns

Opening a new link with target="__blank" needs rel="noopener noreferrer" because Links to cross-origin destinations are unsafe.

Nav is to add "rel" automatically for external links with target specified but it didn't.

I've filed an issue to notify.