How to create simple navbar in reactJs
Best way I believe to learn any scripting or programming language is with practice.
Let’s start coding,you can clone my repository or start from scratch.
https://github.com/kalburgimanjunath/newprofile/
Create a blank react javascript project using stackblitz
edit App.js
import React from ‘react’;
import ‘./style.css’;
import About from ‘./components/About’;
import Navbar from ‘./components/Navbar’;
export default function App() {
return (
<div>
<Navbar />
<About />
</div>
);
}
Create component folder inside your root directory
For basic understanding I have created 2 components one which display about page and another to display your navbar.
import React from ‘react’;
export default function About() {
return <div>About</div>;
}
navbar.js
import React from ‘react’;
export default function Navbar() {
return (
<div className=”navbar”>
<ul>
<li>
<a href=”/about”>About</a>
</li>
<li>
<a href=”/about”>Followers</a>
</li>
<li>
<a href=”/about”>Following</a>
</li>
<li>
<a href=”/about”>Interests</a>
</li>
<li>
<a href=”/about”>Contact Me</a>
</li>
</ul>
</div>
);
}
Import both your new components at App.js
import React from ‘react’;
import ‘./style.css’;
import About from ‘./components/About’;
import Navbar from ‘./components/Navbar’;
export default function App() {
return (
<div>
<Navbar />
<About />
</div>
);
}
Done?
No you can give some styles,I have added some styles to have some look.
use your style.css file created at stackbliz
.navbar {
display: flex;
width: 100%;
background-color: blueviolet;
}
.navbar li {
display: inline-flex;
align-items: stretch;
padding: 10px 5px;
}
.navbar li a {
color: #fff;
font-family: Cambria, Cochin, Georgia, Times, ‘Times New Roman’, serif;
}
Final result looks like below screen.Right hand side is your browser output.
Simple isn’t it? let me know your comments or feedback.
Thanks for reading.
