Create Navigation Card With Nextjs & Material-UI V5

Create Navigation Card With Nextjs & Material-UI V5

This section act like secondary navigation with brief information about the core business page. I recommend inserting your copywriting here to attract the visitor to click to view the core page.

Tutorial 7: Build a navigation card section with Nextjs and Material-UI v5

Note: If you direct land on this page from searches, you may want to visit:-

Before starting the section, I would like to add an image section between the review and navigation sections.

It's easy. We can reuse the "SectionImage" component.

I use a sushi image from Unsplash if you want to use the same image. Click Unsplash's link below:

A Sushi photo by Jakub Dziubak on Unsplash. Download and rename it to "sushi". Then add it to the public folder.

Add the Section Image as below:

Start the file,

npm run dev

Check your homepage. You shall see the new image section.

Create the file,

touch components/NavigationCard.jsx

Initialize The Component

const NavigationCard = ({ imgSrc, imgAlt, title, desc, pagePath, ctaText }) => {
  return ();
};

export default NavigationCard;
  • Destructure "imgSrc", "imgAlt", "title" and "desc" (description), "pagePath" and "ctaText" (call to action) props to use in the component later.

Initially, I want to use the "next image" component, but after some trial and error. I still can't figure out how to implement "next image" with the MUI5 card component.

Hence, I will use the MUI5 card native component to code this card.

(If you know how to use "next image" with the MUI5 card component, or you come across an article talking about it. Please tweet me @AnsonLowZF).

The Card Image

I'll use these images from Unsplash if you want to use the same image. Click Unsplash's link below:

(For this part, download the small size will do) .

import Card from "@mui/material/Card";
import CardMedia from "@mui/material/CardMedia";
<Card sx={{ maxWidth: 480 }}>
  <CardMedia sx={{ height: 270 }} image={imgSrc} title={imgAlt} />
</Card>

Add the code:

  • I want to use a ratio of 16/9 for the image. So If  the width is 480px, I use 480/16 * 9 = 270px.

The Card Content

import CardContent from "@mui/material/CardContent";
import Typography from "@mui/material/Typography";

Add the code:

<CardContent>
  <Typography component="h3" variant="h5" gutterBottom>
    {title}
  </Typography>
  <Typography variant="body2" color="text.secondary">
    {desc}
  </Typography>
</CardContent>
  • Define title and description inside "Card Content".
  • Tell the "Typography" component to use the "h3" tag with the "h5" variant for the title.
  • Then add a gutter bottom below the title to create white space.
  • The body2 variant will use a "p" tag, so no need to specify it.
  • Set the text colour to "text.secondary" is to have lighter black colour text.

The Card Actions

import CardActions from "@mui/material/CardActions";
import Button from "@mui/material/Button";
import MuiNextLink from "./MuiNextLink";

Add the code:

<CardActions>
  <MuiNextLink href={pagePath} underline="none">
    <Button variant="contained" size="large">
      {ctaText}
    </Button>
  </MuiNextLink>
</CardActions>

Define The Card Container

Open ./pages/index.js,

import Container from "@mui/material/Container";
import Grid from "@mui/material/Grid";

Add the code:

<Container maxWidth="md" sx={{ my: 15 }}>
  <Grid container spacing={2}>
    <Grid container item justifyContent="center" xs={12} md={6}></Grid>
    <Grid container item justifyContent="center" xs={12} md={6}></Grid>
  </Grid>
</Container>
  • Tell the Container to has a max-width of "md" size.
  • Set 120px white space on margin-top and margin-bottom. (15 x 8px)
  • Define a 16px gap on the Grid component.
  • Define 2 columns in the "md" breakpoint, and 1 column is "xs" and "sm" breakpoint.
  • Use the container attribute in the "Grid" item to centre the card.

Add Card Component to Homepage

Now let's add the card to the homepage's Container we define earlier,

import NavigationCard from "../components/NavigationCard";

Add the code:

<NavigationCard
  imgSrc="/menu.jpg"
  imgAlt="food menu"
  title="Menu"
  desc="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, minus."
  page="./menu"
  ctaText="Check Out"
/>

<NavigationCard
  imgSrc="/catering.jpg"
  imgAlt="catering"
  title="Catering"
  desc="Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique, minus."
  page="./catering"
  ctaText="Find Out"
/>

Save the file and check your homepage.

We successfully build the customer review section with Nextjs & Material-UI

Next~ We going to the last part of our homepage, the footer


Feel free to tweet me if you have any feedback, improvement, suggestion or error.