MDC-102 Web: Material Structure and Layout (Web)

1. Introduction


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

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:

  • A navigation drawer
  • An image list full of products


MDC Web components in this codelab

  • Drawer
  • Image list

What you'll need

  • A recent version of Node.js (which comes bundled with npm, a JavaScript package manager).
  • The sample code (to be downloaded in the next step)
  • Basic knowledge of HTML, CSS, and JavaScript

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

Novice Intermediate Proficient

2. Set up your development environment

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

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
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.

3. Add a navigation drawer

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 and List

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:

<aside class="mdc-drawer shrine-drawer">
  <div class="mdc-drawer__header">
    <svg class="shrine-logo-drawer" version="1.1" xmlns="" xmlns:xlink="" 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" focusable="false">
          <path 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"/>
        <rect fill="none" width="24" height="24"/>
    <h1 class="shrine-title">SHRINE</h1>
  <div class="mdc-drawer__content">
    <nav class="mdc-list">
      <a class="mdc-list-item mdc-list-item--activated" aria-selected="true" tabindex="0" href="#">
        <span class="mdc-list-item__text">Featured</span>
      <a class="mdc-list-item" href="#">
        <span class="mdc-list-item__text">Apartment</span>
      <a class="mdc-list-item" href="#">
        <span class="mdc-list-item__text">Accessories</span>
      <a class="mdc-list-item" href="#">
        <span class="mdc-list-item__text">Shoes</span>
      <a class="mdc-list-item" href="#">
        <span class="mdc-list-item__text">Tops</span>
      <a class="mdc-list-item" href="#">
        <span class="mdc-list-item__text">Bottoms</span>
      <a class="mdc-list-item" href="#">
        <span class="mdc-list-item__text">Dresses</span>
      <a class="mdc-list-item" href="#">
        <span class="mdc-list-item__text">My Account</span>

Add the CSS

In home.scss, add the following import statements after the existing import:

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

At the bottom of home.scss, add the following styles:

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

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

Add the JavaScript

We need to instantiate the MDC List inside the navigation drawer for proper keyboard navigation. Open home.js, which is currently empty, and add the following code:

import {MDCList} from '@material/list';

new MDCList(document.querySelector('.mdc-list'));

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.

4. Add images with text labels

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 <aside> 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>

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, in home.scss, add an import for the image list component styles after the existing imports:

@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>

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.

5. Recap

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