Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- import React from 'react';
- import {
- MDBNavbar,
- MDBNavbarNav,
- MDBNavbarItem,
- MDBNavbarLink,
- MDBNavbarToggler,
- MDBContainer,
- MDBIcon,
- MDBBadge } from 'mdb-react-ui-kit';
- export default function Header(Properties) {
- return (
- <MDBNavbar expand='lg' light bgColor='white'>
- <MDBContainer fluid>
- <MDBNavbarToggler aria-controls='Navbar' aria-expanded='false' aria-label='Toggle navigation'>
- <MDBIcon fas icon='bars' />
- </MDBNavbarToggler>
- <div className='collapse navbar-collapse' id='#Navbar'>
- <MDBNavbarNav right className='mb-2 mb-lg-0'>
- <MDBNavbarItem active>
- <MDBNavbarLink aria-current='page' href='#'>
- Home
- </MDBNavbarLink>
- </MDBNavbarItem>
- <MDBNavbarItem>
- <MDBNavbarLink href='#'>Features</MDBNavbarLink>
- </MDBNavbarItem>
- <MDBNavbarItem>
- <MDBNavbarLink href='#'>Pricing</MDBNavbarLink>
- </MDBNavbarItem>
- <MDBNavbarItem>
- <MDBNavbarLink href='#'>About</MDBNavbarLink>
- </MDBNavbarItem>
- </MDBNavbarNav>
- </div>
- {/* Right Align */}
- <div class="d-flex align-items-center">
- <a class="text-reset me-3" href="#">
- <MDBIcon fas icon="shopping-cart" />
- </a>
- <a
- class="text-reset me-3 dropdown-toggle hidden-arrow"
- href="#"
- id="navbarDropdownMenuLink"
- role="button"
- data-mdb-toggle="dropdown"
- aria-expanded="false"
- >
- <MDBIcon fas icon="bell" />
- <MDBBadge class="badge rounded-pill badge-notification bg-danger">1</MDBBadge>
- </a>
- <ul
- class="dropdown-menu dropdown-menu-end"
- aria-labelledby="navbarDropdownMenuLink"
- >
- <li>
- <a class="dropdown-item" href="#">Some news</a>
- </li>
- <li>
- <a class="dropdown-item" href="#">Another news</a>
- </li>
- <li>
- <a class="dropdown-item" href="#">Something else here</a>
- </li>
- </ul>
- <a
- class="dropdown-toggle d-flex align-items-center hidden-arrow"
- href="#"
- id="navbarDropdownMenuLink"
- role="button"
- data-mdb-toggle="dropdown"
- aria-expanded="false"
- >
- <img
- src="https://mdbootstrap.com/img/new/avatars/2.jpg"
- class="rounded-circle"
- height="25"
- alt=""
- loading="lazy"
- />
- </a>
- <ul
- class="dropdown-menu dropdown-menu-end"
- aria-labelledby="navbarDropdownMenuLink"
- >
- <li>
- <a class="dropdown-item" href="#">My profile</a>
- </li>
- <li>
- <a class="dropdown-item" href="#">Settings</a>
- </li>
- <li>
- <a class="dropdown-item" href="#">Logout</a>
- </li>
- </ul>
- </div>
- {/* Right Align */}
- </MDBContainer>
- </MDBNavbar>
- );
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement