头部 - 导航/Navigatoin

在header子元素内可以使用导航/navigation，导航块由一个导航容器 和若干导航链接构成：

<div class="mdl-layout__header-row">
    <!--导航容器-->
    <nav class="mdl-navigation">
        <!--导航链接-->
        <a href="...">link</a>
        <a href="...">link</a>
        <a href="...">link</a>
    </nav>
</div>

如上例所示，导航块使用nav元素建立。在头部的导航块自动按水平排列各 链接项。

一个常见的UI模式是标题居左，导航居右，如下图所示：

mdl-layout-spacer可以自动地填充行容器（mdl-layout__header-row） 的剩余空间（扣除title和navigation的宽度），因此可以简单地实现为：

<div class="mdl-layout__header-row">
    <span class="mdl-layout-title">title</span>
    <div class="mdl-layout-spacer"></div>
    <nav class="mdl-navigation">...</nav>
</div>