Opening a new tab from Office UI Fabric Nav
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.
<Nav
styles={{ root: { width: 300 } }}
ariaLabel="Nav example similiar to one found in this demo page"
groups={[
{
name: "Basic components",
expandAriaLabel: "Expand Basic components section",
collapseAriaLabel: "Collapse Basic components section",
links: [
{
key: "React",
name: "React Home Page",
url: "https://reactjs.org/",
target: "__blank",
},
{
key: "r/reactjs",
name: "r/reactjs",
url: "https://www.reddit.com/r/reactjs/",
target: "__blank",
},
{
key: "sung.codes",
name: "Sung's Home Page",
url: "https://sung.codes/",
target: "__blank",
},
],
},
]}
/>Demo
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.
Image by Oberholster Venita from Pixabay
Webmentions
Loading counts...
❤️ 0 💬 0