index.js

import 'babel-polyfill';
import React from 'react';
import {render} from 'react-dom';
import {Router, browserHistory} from 'react-router';
import routes from './routes';
import './styles/styles.scss';
import 'bootstrap-sass/assets/stylesheets/_bootstrap.scss';
import 'react-mdl/extra/material.css';
import 'react-mdl/extra/material';






render(
    <Router history={browserHistory} routes={routes} />,
    document.getElementById('app')
);

Navbar.js

import React from 'react';
import {Link, IndexLink} from 'react-router';
import * as ReactMDL from 'react-mdl';
let Navigation = ReactMDL.Navigation;
let Drawer = ReactMDL.Drawer;
let Layout = ReactMDL.Layout;
let Content = ReactMDL.Content;
let Header = ReactMDL.Content;


const Navbar = () => {
    return (

        <div style={{height: '300px', position: 'relative'}}>
            <Layout fixedHeader>
                <Header title={<span><span style={{ color: '#ddd' }}>Area / </span><strong>The Title</strong></span>}>
                    <Navigation>
                        <a href="">Link</a>
                        <a href="">Link</a>
                        <a href="">Link</a>
                        <a href="">Link</a>
                    </Navigation>
                </Header>
                <Drawer title="Title">
                    <Navigation>
                        <a href="">Link</a>
                        <a href="">Link</a>
                        <a href="">Link</a>
                        <a href="">Link</a>
                    </Navigation>
                </Drawer>
                <Content />
            </Layout>
        </div>
    );
};
export default Navbar;