# 3.2 Setup

Most people like explanations in the context of doing what is just being explained. So let's do something very simple as the first step in showing how to use Materialize bridge. We will add several interesting pages rendering Materialize controls to the well known **Aurelia Skeleton Navigation**, a starter kit for building a standard navigation-style app with Aurelia. \


Get it from [**here**](https://github.com/aurelia/skeleton-navigation) and use the Download ZIP method so we do not have to deal with Git issues in this simple context. After downloading this application, extract the contents of the folder named **skeleton-esnext** into the folder conveniently named `skeleton-navigation-materialize` and use the instructions to build and run this app. Make sure that you already have the NodeJS, jspm and gulp installed, this application should be running after you execute \


**JSPM**:

```
npm install
jspm install
gulp watch
```

**webpack**:

```
npm install
npm start
```

\
&#x20;and subsequently browse to [http://localhost:9000](http://localhost:9000), resulting with the following: \
&#x20;\


![](http://i.imgur.com/kZ9dCzC.png)

\
\
&#x20;Image 1

Next, install aurelia-materialize-bridge as described in the [installation instructions](https://aurelia-ui-toolkits.gitbooks.io/materialize-bridge-docs/content/installation.html).

Now, we want to add four additional pages to this application. These pages will show Materialize **select**, **button**, **slider** and **collapsible** components:

![](http://i.imgur.com/Kmi4Y3r.png)

\
\
&#x20;Image 2 (collapsible shown rendered in its pop-out variant)

At this point verify that your `main.js` class looks like this: \


```javascript
import 'materialize-css';

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-materialize-bridge', bridge => bridge.useAll());

  aurelia.start()
    .then(au => au.setRoot('app'));
}
```

as this will ensure that the application we are about to augment from its original form, loads the Aurelia Materialize bridge (named bridge in the above code).

The next screenshot depicts the final UI for the application we are about to create, with four additional menubar items

* Materialize select
* Materialize button
* Materialize slider
* Materialize collapsible

![](http://i.imgur.com/kcCLiy7.jpg)

\
\
&#x20;Image 4\
&#x20;In order to clearly separate the added code from the original Aurelia Navigation Skeleton, the original project structure is changed to this:\


![](http://i.imgur.com/i4PJFWV.png)

\
\
&#x20;Image 5

\
&#x20;In the following articles you will fill the blue box.

As the last actions in this **Setup** section of the tutorial, you need to make the following changes, that are indicated in the **Modified code** section of Image 5 above

## File `app.html`

```markup
<template>
  <!-- the path below may even be "materialize-css/materialize.css", depending on your chosen materialize -->
  <require from="materialize-css/bin/materialize.css"></require>
  <require from="nav-bar.html"></require>

  <nav-bar router.bind="router"></nav-bar>

  <div class="page-host">
    <router-view></router-view>
  </div>
</template>
```

## File `main.js`

```javascript
import 'materialize-css';

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-materialize-bridge', bridge => bridge.useAll());

  aurelia.start()
    .then(au => au.setRoot('app'));
}
```

## File `nav-bar.html`

```javascript
<template bindable="router">
  <md-navbar fixed="true">
    <a href="#" class="brand-logo left"><span class="flow-text">${router.title}</span></a>
    <ul class="right hide-on-med-and-down">
      <li md-waves repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
        <a href.bind="row.href">${row.title}</a>
      </li>
    </ul>
  </md-navbar>
</template>
```
