Hello everyone today i am going to show you how to create a collapsible navbar with 'reactstrap', which is just like Bootstrap but with React components.
Few Commands before Diving into the code
npm i reactstrap react-reveal bootstrap
First we will import the modules required here
import React,{useState} from 'react'
import Fade from 'react-reveal/Fade'
import {Navbar,NavbarBrand,
NavbarToggler,Nav,
NavItem,NavLink,
Collapse} from 'reactstrap';
import "bootstrap/dist/css/bootstrap.min.css";
import './App.css'
Then inside the function we will set the states
const[toggle,setToggle] = useState(false);
const isToggle = () => setToggle(!toggle);
//It is used to toggle the navbar here the initial
//state is set to false which means closed navbar
//isToggle is an arrow function which will change state
//of toggle to true and false
Now inside the return statement we will design the navbar-
<div className="">
<Navbar color="dark" dark style={{alignItems:"flex-start"}}>
<NavbarBrand className="">
<h1 className="mainLogo">Coder Academy</h1>
</NavbarBrand>
<NavbarToggler onClick={isToggle} />
<Collapse isOpen={toggle} navbar>
<Fade left>
<Nav navbar className="text-center display-4"
style={{height:"55%"}}>
<NavItem>
<NavLink>
<p className="navLink">Home</p>
</NavLink>
</NavItem>
<NavItem>
<NavLink >
<p className="navLink">Resume</p>
</NavLink>
</NavItem>
<NavItem>
<NavLink >
<p className="navLink">Why us</p>
</NavLink>
</NavItem>
<NavItem>
<NavLink >
<p className="navLink">About</p>
</NavLink>
</NavItem>
<NavItem>
<NavLink >
<p className="navLink">Contact</p>
</NavLink>
</NavItem>
</Nav>
</Fade>
</Collapse>
</Navbar>
</div>
ABOUT THE CODE -
*Here we are using the tags instead of using bootstrap classes.
*Inside these tags there are attributes just like html tags.
*Then we did some inline styling to the elements.
*For the logo we have used the NavbarBrand tag.
*For the collapse icon we have used NavbarToggler Tag and inside
it we have attribute onClick which will call the isToggle
function and change the state of toggle to true or false.
*True - Open navbar and False - Closed navbar.
*Inside it we have Collapsed tag with attribute isOpen which have
value toggle, the value of toggle can be changed by NavbarToggler
element.
*inside Collapsed tag we have Fade tag which is an animation tag
element from react-reveal library, on opening the navbar, it will
create a fade effect from left side.
*Then we created our Navbar inside Copllapsed with NavItem and
inside it NavLink.
Here is the full code -
import React,{useState} from 'react'
import Fade from 'react-reveal/Fade'
import {Navbar,NavbarBrand,NavbarToggler,Nav,NavItem,NavLink,Collapse} from 'reactstrap';
import "bootstrap/dist/css/bootstrap.min.css";
import './App.css'
function App() {
const[toggle,setToggle] = useState(false);
const isToggle = () => setToggle(!toggle);
return (
<div className="">
<Navbar color="dark" dark style={{alignItems:"flex-start"}}>
<NavbarBrand className="">
<h1 className="mainLogo">Coder Academy</h1>
</NavbarBrand>
<NavbarToggler onClick={isToggle} />
<Collapse isOpen={toggle} navbar>
<Fade left>
<Nav navbar className="text-center display-4" style={{height:"55%"}}>
<NavItem>
<NavLink>
<p className="navLink">Home</p>
</NavLink>
</NavItem>
<NavItem>
<NavLink >
<p className="navLink">Resume</p>
</NavLink>
</NavItem>
<NavItem>
<NavLink >
<p className="navLink">Why us</p>
</NavLink>
</NavItem>
<NavItem>
<NavLink >
<p className="navLink">About</p>
</NavLink>
</NavItem>
<NavItem>
<NavLink >
<p className="navLink">Contact</p>
</NavLink>
</NavItem>
</Nav>
</Fade>
</Collapse>
</Navbar>
</div>
)
}
export default App
Here is the Css part -
.navLink{
color: aquamarine;
transition: all 0.5s ease;
}
.navLink:hover{
transform: scale(1.4);
}
.mainLogo{
color: aquamarine;
}
Well i am just a newbie here so if You find any mistake please highlight it
THANK YOU FOR READING THIS POST
Top comments (4)
I just copy and pasted your code into a codesandbox (and added the 2 dependencies you mentioned) but it doesn't seem to be working right.
Try to run it in localhost in your pc using VScode
CodeSandBox may be dont support these dependencies
CodeSandBox just uses NPM I don't think and dependencies can be unsupported.
I read the documentation you have to import bootstrap too.
It may be worth updating your article.
yes i was about to comment this Bootstrap installation
Thank you for highlighting the problem