This is the top navigation of our demo app.
It was made using Material-UI's AppBar, but with some custom styling.
You will find this component in components/Header/Header.js. In this component, there is just the structure of the navbar. The links can be found in components/Header/HeaderLinks.js. We've done this because on responsive we create a Sidebar / Drawer with all these links, and we wanted to only write them once.
You can choose between 9 colors by using the color property.
If this property is not set, then the Appbar will be white.
You will find the styles for this component in
styles/jss/nextjs-material-kit-pro/components/headerStyle.js.
And you will find the styles for the links inside styles/jss/nextjs-material-kit-pro/components/headerLinksStyle.js
import React from "react";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
// @material-ui/icons
import Search from "@material-ui/icons/Search";
import Email from "@material-ui/icons/Email";
import Face from "@material-ui/icons/Face";
import Settings from "@material-ui/icons/Settings";
import AccountCircle from "@material-ui/icons/AccountCircle";
import Explore from "@material-ui/icons/Explore";
// core components
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";
import Header from "components/Header/Header.js";
import CustomInput from "components/CustomInput/CustomInput.js";
import CustomDropdown from "components/CustomDropdown/CustomDropdown.js";
import Button from "components/CustomButtons/Button.js";
import navbarsStyle from "styles/jss/nextjs-material-kit-pro/pages/componentsSections/navbarsStyle.js";
const useStyles = makeStyles(navbarsStyle);
export default function SectionNavbars(){
const classes = useStyles();
return (
<div className={`${classes.section} cd-section`} id="navigation">
<div className={classes.container}>
<GridContainer>
<GridItem xs={12} sm={6} md={6}>
<div className={classes.title}>
<h3>Menu</h3>
</div>
<Header
brand="Menu"
color="primary"
links={
<List className={classes.list}>
<ListItem className={classes.listItem}>
<Button
href="#pablo"
className={
classes.navLink + " " + classes.navLinkActive
}
onClick={e => e.preventDefault()}
color="transparent"
>
Link
</Button>
</ListItem>
<ListItem className={classes.listItem}>
<Button
href="#pablo"
className={classes.navLink}
onClick={e => e.preventDefault()}
color="transparent"
>
Link
</Button>
</ListItem>
<ListItem className={classes.listItem}>
<CustomDropdown
buttonText="Dropdown"
dropdownHeader="Dropdown Header"
buttonProps={{
className: classes.navLink,
color: "transparent"
}}
dropdownList={[
"Action",
"Another action",
"Something else here",
{ divider: true },
"Separated link",
{ divider: true },
"One more separated link"
]}
/>
</ListItem>
</List>
}
/>
</GridItem>
<GridItem xs={12} sm={6} md={6}>
<div className={classes.title}>
<h3>Menu with Icons</h3>
</div>
<Header
brand="Icons"
color="info"
links={
<List className={classes.list + " " + classes.mlAuto}>
<ListItem className={classes.listItem}>
<Button
justIcon
color="transparent"
className={classes.navLink}
>
<Email />
</Button>
</ListItem>
<ListItem className={classes.listItem}>
<Button
justIcon
color="transparent"
className={classes.navLink}
>
<Face />
</Button>
</ListItem>
<ListItem className={classes.listItem}>
<CustomDropdown
left
dropdownHeader="Dropdown Header"
buttonIcon={Settings}
buttonProps={{
className: classes.navLink,
color: "transparent"
}}
dropdownList={[
"Action",
"Another action",
"Something else here",
{ divider: true },
"Separated link",
{ divider: true },
"One more separated link"
]}
/>
</ListItem>
</List>
}
/>
</GridItem>
</GridContainer>
<div className={classes.title}>
<h3>Navigation</h3>
</div>
</div>
<div id="navbar" className={classes.navbar}>
<div
className={classes.navigation}
style={{ backgroundImage: "url('/img/bg.jpg')" }}
>
<Header
brand="Brand"
color="rose"
links={
<div className={classes.collapse}>
<List className={classes.list + " " + classes.mrAuto}>
<ListItem className={classes.listItem}>
<Button
href="#pablo"
className={
classes.navLink + " " + classes.navLinkActive
}
onClick={e => e.preventDefault()}
color="transparent"
>
Link
</Button>
</ListItem>
<ListItem className={classes.listItem}>
<Button
href="#pablo"
className={classes.navLink}
onClick={e => e.preventDefault()}
color="transparent"
>
Link
</Button>
</ListItem>
</List>
<div className={classes.mlAuto}>
<CustomInput
white
inputRootCustomClasses={classes.inputRootCustomClasses}
formControlProps={{
className: classes.formControl
}}
inputProps={{
placeholder: "Search",
inputProps: {
"aria-label": "Search",
className: classes.searchInput
}
}}
/>
<Button color="white" justIcon round>
<Search className={classes.searchIcon} />
</Button>
</div>
</div>
}
/>
<Header
brand="Info Color"
color="info"
links={
<List className={classes.list + " " + classes.mlAuto}>
<ListItem className={classes.listItem}>
<Button
href="#pablo"
className={classes.navLink + " " + classes.navLinkActive}
onClick={e => e.preventDefault()}
color="transparent"
>
Discover
</Button>
</ListItem>
<ListItem className={classes.listItem}>
<Button
href="#pablo"
className={classes.navLink}
onClick={e => e.preventDefault()}
color="transparent"
>
Profile
</Button>
</ListItem>
<ListItem className={classes.listItem}>
<Button
href="#pablo"
className={classes.navLink}
onClick={e => e.preventDefault()}
color="transparent"
>
Settings
</Button>
</ListItem>
</List>
}
/>
<Header
brand="Primary Color"
color="primary"
links={
<List className={classes.list + " " + classes.mlAuto}>
<ListItem className={classes.listItem}>
<Button
href="#pablo"
className={classes.navLink + " " + classes.navLinkActive}
onClick={e => e.preventDefault()}
color="transparent"
>
<Explore /> Discover
</Button>
</ListItem>
<ListItem className={classes.listItem}>
<Button
href="#pablo"
className={classes.navLink}
onClick={e => e.preventDefault()}
color="transparent"
>
<AccountCircle /> Profile
</Button>
</ListItem>
<ListItem className={classes.listItem}>
<Button
href="#pablo"
className={classes.navLink}
onClick={e => e.preventDefault()}
color="transparent"
>
<Settings /> Settings
</Button>
</ListItem>
</List>
}
/>
<Header
brand="Navbar with notifications"
color="dark"
links={
<List className={classes.list + " " + classes.mlAuto}>
<ListItem className={classes.listItem}>
<Button
href="#pablo"
className={classes.navLink}
onClick={e => e.preventDefault()}
color="transparent"
>
Discover
</Button>
</ListItem>
<ListItem className={classes.listItem}>
<Button
href="#pablo"
className={classes.navLink}
onClick={e => e.preventDefault()}
color="transparent"
>
Wishlist
</Button>
</ListItem>
<ListItem className={classes.listItem}>
<Button
href="#pablo"
className={classes.notificationNavLink}
onClick={e => e.preventDefault()}
color="rose"
justIcon
round
>
<Email />
</Button>
</ListItem>
<ListItem className={classes.listItem}>
<CustomDropdown
left
caret={false}
hoverColor="dark"
dropdownHeader="Dropdown Header"
buttonText={
<img
src="/img/faces/avatar.jpg"
className={classes.img}
alt="profile"
/>
}
buttonProps={{
className:
classes.navLink + " " + classes.imageDropdownButton,
color: "transparent"
}}
dropdownList={[
"Me",
"Settings and other stuff",
"Sign out"
]}
/>
</ListItem>
</List>
}
/>
<Header
brand="Navbar with profile"
links={
<List className={classes.list + " " + classes.mlAuto}>
<ListItem className={classes.listItem}>
<Button
href="#pablo"
className={classes.navLink}
onClick={e => e.preventDefault()}
color="transparent"
>
Discover
</Button>
</ListItem>
<ListItem className={classes.listItem}>
<Button
href="#pablo"
className={classes.navLink}
onClick={e => e.preventDefault()}
color="transparent"
>
Wishlist
</Button>
</ListItem>
<ListItem className={classes.listItem}>
<Button
href="#pablo"
className={classes.registerNavLink}
onClick={e => e.preventDefault()}
color="rose"
round
>
Register
</Button>
</ListItem>
</List>
}
/>
<Header
brand="Transparent"
color="transparent"
links={
<List className={classes.list + " " + classes.mlAuto}>
<ListItem className={classes.listItem}>
<Button
color="transparent"
className={
classes.navLink + " " + classes.socialIconsButton
}
>
<i
className={
classes.socialIcons +
" " +
classes.marginRight5 +
" fab fa-twitter"
}
/>{" "}
Twitter
</Button>
</ListItem>
<ListItem className={classes.listItem}>
<Button
color="transparent"
className={
classes.navLink + " " + classes.socialIconsButton
}
>
<i
className={
classes.socialIcons +
" " +
classes.marginRight5 +
" fab fa-facebook"
}
/>{" "}
Facebook
</Button>
</ListItem>
<ListItem className={classes.listItem}>
<Button
color="transparent"
className={
classes.navLink + " " + classes.socialIconsButton
}
>
<i
className={
classes.socialIcons +
" " +
classes.marginRight5 +
" fab fa-instagram"
}
/>{" "}
Instagram
</Button>
</ListItem>
</List>
}
/>
</div>
</div>
</div>
);
}Header.defaultProp = {
color: "white"
};
Header.propTypes = {
classes: PropTypes.object.isRequired,
color: PropTypes.oneOf([
"primary",
"info",
"success",
"warning",
"danger",
"transparent",
"white",
"rose",
"dark"
]),
links: PropTypes.node,
brand: PropTypes.string,
fixed: PropTypes.bool,
absolute: PropTypes.bool,
// this will cause the sidebar to change the color from
// this.props.color (see above) to changeColorOnScroll.color
// when the window.pageYOffset is heigher or equal to
// changeColorOnScroll.height and then when it is smaller than
// changeColorOnScroll.height change it back to
// this.props.color (see above)
changeColorOnScroll: PropTypes.shape({
height: PropTypes.number.isRequired,
color: PropTypes.oneOf([
"primary",
"info",
"success",
"warning",
"danger",
"transparent",
"white",
"rose",
"dark"
]).isRequired
})
};