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

Question

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?

Answer 1

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