paint-brush
How to Get Started Quickly with a Navigation Bar in Your React Project by@superflows
334 reads
334 reads

How to Get Started Quickly with a Navigation Bar in Your React Project

by Hrushi MNovember 3rd, 2022
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

This article shows you how to add a navigation bar to your React project in 2 minutes. The navigation bar is arguably the most important component of your website or web app. It anchors the users to your website and allows them to effortlessly traverse through the website. It also contextualises the application to the user, mentions the subscription status, next action to be taken, etc. It will render as follows: (https://www.hackernoon.com/images/ZuuM3fSjXmf2oETrekt5pezKail2-rx93qk8)

Company Mentioned

Mention Thumbnail
featured image - How to Get Started Quickly with a Navigation Bar in Your React Project
Hrushi M HackerNoon profile picture

What is a navigation bar?

A navigation bar is arguably the most important component of your website or web app. It anchors the users to your website. It allows them to effortlessly traverse through the website. It also contextualizes the application to the user, mentions the subscription status, next action to be taken, etc.


This article shows you how to add a navigation bar to your React project in 2 minutes.


Prerequisites

I am assuming that the reader could be a React beginner. But familiarity with basic React concepts is necessary. If you are an absolute novice at React, this tutorial, could help you get started with React. Post which, come back to this article.


Step 1 - Install the Superflows navigation bar library

Superflows is a React library that provides reusable and customizable components. In this article, we use the navigation bar provided by Superflows.


Install it as follows:


npm install --save react-sf-themes
npm install --save react-sf-building-blocks


Step 2 - Import and Usage

After installation is successful, import and use the navigation bar component, called SfNav, in your project as shown below.


import { SfNav } from 'react-sf-building-blocks';
return (
    <div>
      <SfNav stylesContainerDesktop={{ fontFamily: 'Georgia' }} />
      {/* Your Code */}
    </div>
  );


It will render as follows:


Video Tutorial

https://www.youtube.com/watch?v=J2jJO9_EtUk


Reference Links


Further Reading

You can learn further about navigation bar functionality by reading subsequent articles of this series.


Conclusion

This article gets you started with a navigation bar in your React project. It shows you how to integrate the Superflows library and set up the default navigation bar.


Also Published Here