Opening a new tab from Office UI Fabric Nav

Broken Post? → Let me know

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

Fetching Replies...

There is no reply...