how to add custom html attribute with fabric react nav component?

Question

I am using

import { Nav } from 'office-ui-fabric-react';
function CustomNav(props) {
  return <Nav groups={groups} selectedKey={selectedKey} onLinkClick={handleLinkClick} data-myTag="hello" />;
}

For nav object, I want to add custom html attributes such as data-myTag. How do I add this attribute to the button that is added to the DOM by this Nav object.

Answer 1

Based on looking at the source where Nav is rendered, it unfortunately looks like it isn't possible to add data tags to the container.

Your best bet would likely be to either:

• Put the data attributes on a div you return from your CustomNav component, or
• Create a pull request with Fabric itself which renders those data attributes