Navigation

Basic Nav
Active
Link
Link
Disabled

       <Nav className="nav1 br-7" activeKey='link-1'>
       <Nav.Item className="nav-item1">
         <Nav.Link eventKey='link-1'>Active</Nav.Link>
       </Nav.Item>
       <Nav.Item className="nav-item1">
         <Nav.Link eventKey='link-2'>Link</Nav.Link>
       </Nav.Item>
       <Nav.Item className="nav-item1">
         <Nav.Link eventKey='link-3'>Link</Nav.Link>
       </Nav.Item>
       <Nav.Item className="nav-item1">
         <Nav.Link eventKey='link-4' className="disabled">Disabled</Nav.Link>
       </Nav.Item>
     </Nav>
Nav Vertical
Active
Link
Link
Disabled

 <Nav className="nav1 flex-column br-7" activeKey='link-1'>
 <Nav.Item className="nav-item1">
   <Nav.Link eventKey='link-1' active>Active</Nav.Link>
 </Nav.Item>
 <Nav.Item className="nav-item1">
   <Nav.Link eventKey='link-2'>Link</Nav.Link>
 </Nav.Item>
 <Nav.Item className="nav-item1">
   <Nav.Link eventKey='link-3'>Link</Nav.Link>
 </Nav.Item>
 <Nav.Item className="nav-item1">
   <Nav.Link eventKey='link-4' className="disabled">Disabled</Nav.Link>
 </Nav.Item>
</Nav>
Color Navigation
Active
Link
Disabled

 <Nav className="nav-pills" activeKey='link-1'>
 <Nav.Item className="m-2">
   <Nav.Link eventKey='link-1' className="px-4 py-2" active>Active</Nav.Link>
 </Nav.Item>

 <Dropdown className='nav-item'>
   <Dropdown.Toggle variant='' className="px-4 m-2 py-2" >Dropdown </Dropdown.Toggle>
   <Dropdown.Menu>
     <Dropdown.Item eventKey="1">Action</Dropdown.Item>
     <Dropdown.Item eventKey="2">Another action</Dropdown.Item>
     <Dropdown.Item eventKey="3">Something else</Dropdown.Item>
     <Dropdown.Divider className='text-dark' />
     <Dropdown.Item eventKey="4">Separated link</Dropdown.Item>
   </Dropdown.Menu>
 </Dropdown>

 <Nav.Item className="m-2">
   <Nav.Link eventKey='link-2' className="px-4 py-2">Link</Nav.Link>
 </Nav.Item>

 <Nav.Item className="m-2">
   <Nav.Link eventKey='link-3' className="px-4 py-2 disabled">Disabled</Nav.Link>
 </Nav.Item>
</Nav>
Icon Navigation
Home
Lock
Videos
Severs
Gallery

 <Nav variant="pills" defaultActiveKey="Home">
 <Nav.Item>
   <Nav.Link className="border py-3 px-5 m-2" eventKey="Home" ><i className="fe fe-home me-2"></i> Home</Nav.Link>
 </Nav.Item>
 <Nav.Item>
   <Nav.Link className="border py-3 px-5 m-2" eventKey="Lock" ><i className="fe fe-unlock me-2"></i> Lock</Nav.Link>
 </Nav.Item>
 <Nav.Item>
   <Nav.Link className="py-3 px-5 border show m-2" eventKey="Videos"><i className="fe fe-play me-2"></i> Videos</Nav.Link>
 </Nav.Item>
 <Nav.Item>
   <Nav.Link className="border py-3 px-5 m-2" eventKey="servers"><i className="fe fe-layers me-2"></i> Severs</Nav.Link>
 </Nav.Item>
 <Nav.Item>
   <Nav.Link className="border py-3 px-5 m-2" eventKey="Gallery"><i className="fe fe-image me-2"></i> Gallery</Nav.Link>
 </Nav.Item>
</Nav>
Icon Nav Bar

 <Nav variant="pills" className="nav-pills-circle" defaultActiveKey="home">
 <Nav.Item>
   <Nav.Link className="border w-8 h-8 text-center br-100 m-2" eventKey="home" > <span className="text-center mx-auto"><i className="fe fe-home fs-20"></i></span></Nav.Link>
 </Nav.Item>
 <Nav.Item>
   <Nav.Link className="border w-8 h-8 br-100 m-2" eventKey="lock" ><span className="text-center mx-auto"><i className="fe fe-unlock fs-20"></i></span></Nav.Link>
 </Nav.Item>
 <Nav.Item>
   <Nav.Link className="border show w-8 h-8 br-100 m-2" eventKey="play"><span className="text-center mx-auto"><i className="fe fe-play fs-20"></i></span></Nav.Link>
 </Nav.Item>
 <Nav.Item>
   <Nav.Link className="border w-8 h-8 br-100 m-2" eventKey="layer"><span className="text-center mx-auto"><i className="fe fe-layers fs-20"></i></span></Nav.Link>
 </Nav.Item>
 <Nav.Item>
   <Nav.Link className="border  w-8 h-8 br-100 m-2" eventKey="images"><span className="text-center mx-auto"><i className="fe fe-image fs-20"></i></span></Nav.Link>
 </Nav.Item>
</Nav>
Navigation backgrounds
Active
Link
Link
Disabled
Active
Link
Link
Disabled
Active
Link
Link
Disabled
Active
Link
Link
Disabled
Active
Link
Link
Disabled
Active
Link
Link
Disabled

 <Nav className="nav1 bg-primary br-7" defaultActiveKey="Primary-Active">
 <Nav.Item className="nav-item1">
   <Nav.Link eventKey="Primary-Active" className="text-white" active>Active</Nav.Link>
 </Nav.Item>
 <Nav.Item className="nav-item1">
   <Nav.Link eventKey="Primary-Link-1" className="text-white">Link</Nav.Link>
 </Nav.Item>
 <Nav.Item className="nav-item1">
   <Nav.Link eventKey="Primary-Link-2" className="text-white">Link</Nav.Link>
 </Nav.Item>
 <Nav.Item className="nav-item1">
   <Nav.Link eventKey="Primary-Disable" className="text-white-50" disabled>Disabled</Nav.Link>
 </Nav.Item>
</Nav>
<Nav className="nav1 bg-info mt-4 br-7" defaultActiveKey="Info-Active">
 <Nav.Item className="nav-item1">
   <Nav.Link className="text-white active" eventKey="Info-Active">Active</Nav.Link>
 </Nav.Item>
 <Nav.Item className="nav-item1">
   <Nav.Link className="text-white" eventKey="Info-Link-1">Link</Nav.Link>
 </Nav.Item>
 <Nav.Item className="nav-item1">
   <Nav.Link className="text-white" eventKey="Info-Link-2" >Link</Nav.Link>
 </Nav.Item>
 <Nav.Item className="nav-item1">
   <Nav.Link className="disabled text-white-50" eventKey="Info-Disable">Disabled</Nav.Link>
 </Nav.Item>
</Nav>
<Nav className="nav1 bg-success mt-4 br-7" defaultActiveKey="Success-Active">
 <Nav.Item className="nav-item1">
   <Nav.Link className="text-white active" eventKey="Success-Active" >Active</Nav.Link>
 </Nav.Item>
 <Nav.Item className="nav-item1">
   <Nav.Link eventKey="Success-Link-1" className="text-white">Link</Nav.Link>
 </Nav.Item>
 <Nav.Item className="nav-item1">
   <Nav.Link eventKey="Success-Link-2" className="text-white">Link</Nav.Link>
 </Nav.Item>
 <Nav.Item className="nav-item1">
   <Nav.Link eventKey="Success-Disable" className="text-white-50" disabled>Disabled</Nav.Link>
 </Nav.Item>
</Nav>
<Nav className="nav1 bg-danger mt-4 br-7" defaultActiveKey="danger-Active">
 <Nav.Item className="nav-item1">
   <Nav.Link eventKey="danger-Active" className="text-white" active>Active</Nav.Link>
 </Nav.Item>
 <Nav.Item className="nav-item1">
   <Nav.Link eventKey="danger-Link-1" className="text-white">Link</Nav.Link>
 </Nav.Item>
 <Nav.Item className="nav-item1">
   <Nav.Link eventKey="danger-Link-2" className="text-white">Link</Nav.Link>
 </Nav.Item>
 <Nav.Item className="nav-item1">
   <Nav.Link eventKey="danger-Disable" className="text-white-50" disabled>Disabled</Nav.Link>
 </Nav.Item>
</Nav>
<Nav className="nav1 bg-secondary mt-4 br-7" defaultActiveKey="secondary-Active">
 <Nav.Item className="nav-item1">
   <Nav.Link eventKey="secondary-Active" className="text-white" active>Active</Nav.Link>
 </Nav.Item>
 <Nav.Item className="nav-item1">
   <Nav.Link eventKey="secondary-Link-1" className="text-white">Link</Nav.Link>
 </Nav.Item>
 <Nav.Item className="nav-item1">
   <Nav.Link eventKey="secondary-Link-2" className="text-white">Link</Nav.Link>
 </Nav.Item>
 <Nav.Item className="nav-item1">
   <Nav.Link eventKey="secondary-Disable" className="text-white-50" disabled>Disabled</Nav.Link>
 </Nav.Item>
</Nav>
<Nav className="nav1 bg-yellow mt-4 br-7" defaultActiveKey="yellow-Active">
 <Nav.Item className="nav-item1">
   <Nav.Link eventKey="yellow-Active" className="text-white" active>Active</Nav.Link>
 </Nav.Item>
 <Nav.Item className="nav-item1">
   <Nav.Link eventKey="yellow-Link-1" className="text-white">Link</Nav.Link>
 </Nav.Item>
 <Nav.Item className="nav-item1">
   <Nav.Link eventKey="yellow-Link-2" className="text-white">Link</Nav.Link>
 </Nav.Item>
 <Nav.Item className="nav-item1">
   <Nav.Link eventKey="yellow-Disable" className="text-white-50" disabled>Disabled</Nav.Link>
 </Nav.Item>
</Nav>