Creating a Custom Horizontal Nav Component Using React Office UI Fabric

Sibeesh Venu
Oct 19, 2018 · 3 min read

Introduction

Welcome to my blog. I assume that you are working in Office UI Fabric React components and you wanted to create a horizontal menu component in your react solution. Unfortunately, the normal Nav component in the Office UI Fabric doesn’t give you this option. And somehow you reached here by searching for a solution to implement the horizontal menu. You are in the right place then. Let’s skip the talking and jump into the code. I hope you will like this article. Let’s start coding.

Source Code

The source code can be found here.

Background

As I mentioned in the introduction, there is no option to make a horizontal menu if you are using UI Fabric Nav component. And I also ended up in spending some time playing with the Nav component to make it horizontal, but it wasn’t working as expected. And I found a different way to achieve the same, hereby I am sharing it as I couldn’t find such a solution on the internet. You can always see my answer here on StackOverflow.

Nav menu vertical

Creating Horizontal Nav component

I believe that you have already created your solution and you are just trying to create a new Menu web part in the existing solution. If you haven’t created a solution, you can create one using the below command.

yo @microsoft/sharepoint

MenuWebPart.ts

Once you have created a new web part, you can see that there is a file called MenuWebPart.ts. This is the file we are going to edit first. You can see the content of that file below.

Custom menu web part

As you can see I am calling the Menu component here with the property items, this is where you need to mention the contents of your menu.

Menu.tsx

Now let’s start editing the code in Menu.tsx file.

Menu

As you can see that I am using CommandBar here which accepts the items property which we have set before.

IMenuProps.ts

You would also need to add the items property in the IMenuProps.ts file.

Custom menu properties

Output

If you have configured the CommandBar component in an above-mentioned way, you would have seen a horizontal menu by now. Please be keep in mind that there are some limitations using in CommandBar. I would use this until Microsoft introduces a new property in the existing Nav component to make it horizontal.

Nav horizontal

Conclusion

Thanks a lot for reading. Did I miss anything that you may think which is needed? Could you find this post as useful? I hope you liked this article. Please share me your valuable suggestions and feedback.

You can always follow me here on Medium and Twitter.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a question unrelated to this post, you’re better off posting it on Stack Overflow instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I can.

Kindest Regards
Sibeesh Venu

medialesson

We help our customers design, architect, develop and operate modern, intelligent, beautiful and usable apps on any platform powered by the Cloud, IoT and AI.

Sibeesh Venu

Written by

An #Engineer by profession and #Writer by passion. Microsoft MVP. sibeeshpassion.com, youtube.com/sibeeshPassion, youtube.com/njanorumalayali

medialesson

We help our customers design, architect, develop and operate modern, intelligent, beautiful and usable apps on any platform powered by the Cloud, IoT and AI.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade