import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Container from '@material-ui/core/Container';
import Box from '@material-ui/core/Box';
import Typography from '@material-ui/core/Typography';
import Link from '@material-ui/core/Link';
const useStyles = makeStyles((theme) => ({
rootBox: {
[theme.breakpoints.down('md')]: {
justifyContent: 'center'
}
},
footerNav: {
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'center',
marginRight: 'auto',
marginLeft: theme.spacing(3),
marginBottom: theme.spacing(0),
[theme.breakpoints.down('md')]: {
width: '100%',
marginLeft: 'auto',
marginTop: theme.spacing(3),
marginBottom: theme.spacing(2),
}
},
footerLink: {
marginLeft: theme.spacing(3),
marginRight: theme.spacing(3),
[theme.breakpoints.down('md')]: {
marginBottom: theme.spacing(2),
}
},
}));
export default function Footer(props) {
const classes = useStyles();
const content = {
'brand': { image: 'nereus-assets/img/nereus-light.png', width: 110 },
'copy': '© 2020 Nereus All rights reserved.',
'link1': 'First Link',
'link2': 'Second Link',
'link3': 'Third Link',
'link4': 'Fourth Link',
...props.content
};
let brand;
if (content.brand.image) {
brand = <img src={ content.brand.image } alt="" width={ content.brand.width } />;
} else {
brand = content.brand.text || '';
}
return (
<footer>
<Container maxWidth="lg">
<Box py={6} display="flex" flexWrap="wrap" alignItems="center" className={classes.rootBox}>
<Link href="#" color="inherit" underline="none">
{brand}
</Link>
<Box component="nav" className={classes.footerNav}>
<Link href="#" variant="body1" color="textPrimary" className={classes.footerLink}>{content['link1']}</Link>
<Link href="#" variant="body1" color="textPrimary" className={classes.footerLink}>{content['link2']}</Link>
<Link href="#" variant="body1" color="textPrimary" className={classes.footerLink}>{content['link3']}</Link>
<Link href="#" variant="body1" color="textPrimary" className={classes.footerLink}>{content['link4']}</Link>
</Box>
<Typography color="textSecondary" component="p" variant="caption" gutterBottom={false}>{content['copy']}</Typography>
</Box>
</Container>
</footer>
);
}Framework
Material-UI
UI Library
All Libraries
Components
- Alert 80
- Banners 5
- Blog 6
- Call to action 6
- Contact 5
- Content 14
- Cookies 4
- FAQ 1
- Features 12
- Footers 7
- Gallery 5
- Graph tiles 3
- Graphs 8
- HTTP codes 7
- Hero section 24
- How it works 6
- Navbar 17
- Navigation (horizontal) 13
- Navigation (vertical) 12
- Portfolio 6
- Pricing 8
- Projects 6
- Sign in / Sign up 4
- Stats 19
- Tables 21
- Team 5
- Testimonials 7
- Users 8
Component #1
Component #2
Component #3
Component #4
Component #5
Component #6
Component #7
Footer is the place where you will put the site navigation and all the relevant information. That is why it is worth putting some effort into its design, prioritizing vital information and links over the less important ones.
Choose from many variants of Material-Ui components footers. The variants shown here are available in various UI libraries in the Shuffle Editor. You will also find many other types of components that will be in the same style. This will allow you to build a comprehensive Material-Ui website template. Each library is designed by a professional designer and coded by our team of developers.
Get access to all Material-Ui components footers section, code and our editor. Try the demo for free.
