office-ui-fabric-reactfluent-ui

Is there a way to add input field in nav element using React FluentUI (@fluentui/react)?


The examples on website show many examples of navbars with links. Image of navbar demo as shown on website.

I want to implement a search bar inside the nav element like this. Is there a way to do it?


Solution

  • I would try with OnRenderLink or linkAs methods.

    onRenderLink: Used to customize how content inside the link tag is rendered

    linkAs: Render a custom link in place of the normal one. This replaces the entire button rather than simply button content

    Source: INavProps interface https://developer.microsoft.com/en-us/fluentui#/controls/web/nav