How to create navigation bar in react js?
March 30, 2023Hi Friends π,
Welcome To aGuideHub!
To create navigation bar in React js, you have to use <nav>
element. It will create navigation bar in react js.
Today, I am going to show you, how to create navigation bar in react js.
Table of contents
- Set up the React project.
- Import necessary components.
- Create the NavigationBar component.
Letβs start with the first step.
Step 1: Set up the React project.
First you have to install the React project. You should use create-react-app
command to create a new React project.
npx create-react-app my-app
cd my-app
npm start
Step 2: Import necessary components.
You have to import the react
component, which you can use in your React component. and import App.css.
import React from 'react';
import "./App.css";
Step 3: Create the NavigationBar component.
To create a navigation bar. You have to use an unordered list <ul>
with four list items <li>
inside.
function NavigationBar() {
return (
<div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
);
}
ReactJS create NavigationBar example.
The below code is an example of, You have to use an unordered list <ul>
with four list items <li>
inside. Each list item has a "#"
symbol and an anchor tag <a>
with an href
attribute. then use css class.
App.js
import React from 'react';
import "./App.css";
function NavigationBar() {
return (
<nav>
<ul>
<li><a href="#">aGuideHub</a></li>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
);
}
export default NavigationBar;
App.css
nav {
background-color: #f3b3b3;
color: white;
display: flex;
align-items: right;
justify-content: right;
padding: 10px;
}
ul {
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
}
li {
margin-right: 20px;
}
a {
color: white;
text-decoration: none;
}
a:hover {
text-decoration: none;
}
Check the output of the above code example.
Here, we are provided code sandbox links for the above program create navigation bar in React js. Then you can use whenever you went and do the changes as per your requirements.
All the best π