Material Components (MDC) help developers implement Material Design. Created by a team of engineers and UX designers at Google, MDC features dozens of beautiful and functional UI components and is available for Android, iOS, web and Flutter.

material.io/develop

In codelab MDC-101, you used two Material Components (MDC) to build a login page UI: the text field and button. Now let's expand upon this by adding navigation, structure, and data.

What you'll build

In this codelab, you'll build a home page for an app called Shrine, an e-commerce app that sells clothing and home goods. It will contain:

MDC Web components in this codelab

What you'll need

How would you rate your level of experience with web development?

Novice Intermediate Proficient

Continuing from MDC-101?

If you completed MDC-101, your code should be prepared for this codelab. Skip to step 3: Add a navigation drawer.

Download the starter codelab app

Download starter app

The starter app is located in the material-components-web-codelabs-master/mdc-102/starter directory. Be sure to cd into that directory before beginning.

...or clone it from GitHub

To clone this codelab from GitHub, run the following commands:

git clone https://github.com/material-components/material-components-web-codelabs
cd material-components-web-codelabs/mdc-102/starter

Install project dependencies

Your current directory should be material-components-web-codelabs/mdc-102/starter. From there, run the following command:

npm install

After a lot of activity appears, your terminal should show a successful install:

Run the starter app

In the same directory, run this:

npm start

The webpack-dev-server will start. Point your browser to http://localhost:8080/ to see the page.

Success! You should see the Shrine login page from the MDC-101 codelab.

Now that the login page looks good, let's populate the app with some products. Enter a valid username and password, then click the "Next" button to go to the home page.

When the user signs in, a homepage is revealed that says, "You did it!" That's great! But now our user needs actions to take and a sense of where they are in the app. To help with that, let's add navigation.

Material Design navigation patterns offer a high degree of usability. The Material navigation drawer provides navigation and quick access to other actions. Let's add one.

Install MDC Drawer

To install the packages for the drawer component, run:

npm install @material/drawer @material/list

Add the HTML

In home.html, replace "You did it!" with the following markup for the drawer and its items:

<nav class="shrine-drawer mdc-drawer mdc-drawer--permanent">
  <svg class="shrine-logo-drawer" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="48px" height="48px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve" fill="#000000">
    <g id="XMLID_2_">
      <g id="XMLID_4_">
        <path id="XMLID_5_" d="M17,2H7L2,6.62L12,22L22,6.62L17,2z M16.5,3.58l3.16,2.92H16.5V3.58z M7.59,3.5H15v3H4.34L7.59,3.5z     M11.25,18.1L7.94,13h3.31V18.1z M11.25,11.5H6.96L4.69,8h6.56V11.5z M16.5,12.32 M12.75,18.09V8h6.56L12.75,18.09z"/>
      </g>
      <rect id="XMLID_1_" fill="none" width="24" height="24"/>
    </g>
  </svg>
  <h1 class="shrine-title">SHRINE</h1>
  <div class="mdc-drawer__content">
    <nav class="mdc-list">
      <a class="mdc-list-item" href="#">
        Featured
      </a>
      <a class="mdc-list-item" href="#">
        Apartment
      </a>
      <a class="mdc-list-item" href="#">
        Accessories
      </a>
      <a class="mdc-list-item" href="#">
        Shoes
      </a>
      <a class="mdc-list-item" href="#">
        Tops
      </a>
      <a class="mdc-list-item" href="#">
        Bottoms
      </a>
      <a class="mdc-list-item" href="#">
        Dresses
      </a>
      <a class="mdc-list-item" href="#">
        My Account
      </a>
    </nav>
  </div>
</nav>

Add the CSS

At the top of app.scss, add the following import statements:

@import "@material/drawer/mdc-drawer";
@import "@material/list/mdc-list";

Under // Home page styles in app.scss, add the following styles:

.shrine-logo-drawer {
  width: 48px;
  padding: 40px 0 0;
  margin: 0 auto;
  fill: currentColor;
}

.shrine-title {
  align-self: center;
  margin: 5px auto;
}

Refresh the page at http://localhost:8080/home.html. Your home page should now look like this:

Now the home page has a persistent navigation drawer displaying various navigation items, with the first item active.

Now that our app has some structure, let's organize the content by placing it in an image list.

Install MDC Image List

To install the package for the image list component, run:

npm install @material/image-list

Add the HTML for a list with one item

Let's start by adding an image list next to the navigation drawer. We'll start the list by adding a single item, which consists of an image and a text label.

In home.html, add the following HTML after the end of the <nav> element:

<ul class="mdc-image-list product-list">
  <li class="mdc-image-list__item">
    <img class="mdc-image-list__image" src="assets/weave-keyring.jpg">
    <div class="mdc-image-list__supporting">
      <span class="mdc-image-list__label">Weave keyring</span>
    </div>
  </li>
</ul>

The list includes an additional class, product-list, which will apply custom styles, both in this tutorial and in MDC-103.

Add the CSS

First, at the top of app.scss, add an import for the image list component styles:

@import "@material/image-list/mdc-image-list";

Next, add the following styles after the initial home page styles:

.product-list {
  @include mdc-image-list-standard-columns(4);

  overflow: auto;
}

These styles instruct the image list to display images across four columns, ensuring that the image list scrolls independently of the drawer.

Refresh the page. The home page should now look like this:

An image list is intended to display many images in a collection, so let's add more images to better see how the component works.

In home.html, copy the existing <li> element:

  <li class="mdc-image-list__item">
    <img class="mdc-image-list__image" src="assets/weave-keyring.jpg">
    <div class="mdc-image-list__supporting">
      <span class="mdc-image-list__label">Weave keyring</span>
    </div>
  </li>

Then paste it after the existing item (before the closing </ul> tag) 15 times. This will result in a total of 16 images. Don't worry about unique images and titles yet; you'll get to those in MDC-103.

Refresh. Now the home page should look like this:

The image list displays four images per row, and the images automatically size to fit the available screen space.

Your site has a basic flow that takes the user from the sign in page to a home page, where products can be viewed. In just a few lines of code, you added a drawer and an image list to present content. The home page now has a basic structure and content.

Next steps

With the drawer and image list, you've now used two more Material Design core components from the MDC Web library! You can explore more components by visiting the MDC Web Catalog.

While it's fully functioning, the home page doesn't yet express any particular brand or point of view. In MDC-103: Material Design Theming with Color, Shape, Elevation and Type, you'll customize the style of these components to express a vibrant, modern brand.

I was able to complete this codelab with a reasonable amount of time and effort

Strongly agree Agree Neutral Disagree Strongly disagree

I would like to continue using Material Components in the future

Strongly agree Agree Neutral Disagree Strongly disagree