当你具有多层内容来显示当前位置时, 将使用Materialize CSS中的面包屑。 Materialize CSS提供了各种CSS类, 可以轻松地创建漂亮的面包屑。它使用两个类, 即nav-wrapper和breadcrumb.
nav-wrapper用于将导航组件设置为面包屑/导航栏包装。
breadcrumb面包屑用于将锚点元素设置为面包屑。最后一个锚元素处于活动状态, 而其余锚元素显示为灰色。
<nav>
<div class="nav-wrapper">
<div class="col s12">
<a href="#!" class="breadcrumb">First</a>
<a href="#!" class="breadcrumb">Second</a>
<a href="#!" class="breadcrumb">Third</a>
</div>
</div>
</nav>例子：
<!DOCTYPE html>
< html >
< head >
<!--Import Google Icon Font-->
< link href =
"https://fonts.googleapis.com/icon?family=Material+Icons"
rel = "stylesheet" />
<!-- Compiled and minified CSS -->
< link rel = "stylesheet" href =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css" />
<!--Let browser know website
is optimized for mobile-->
< meta name = "viewport" content =
"width=device-width, initial-scale=1.0" />
</ head >
< body >
< nav >
< div class = "nav-wrapper green" >
< div class = "col s12" >
< a href = "#" class = "breadcrumb" >
Home
</ a >
< a href = "#" class = "breadcrumb" >
Web Technologies
</ a >
< a href = "#" class = "breadcrumb" >
Materialize CSS
</ a >
< a href = "#" class = "breadcrumb" >
Breadcrumb
</ a >
</ div >
</ div >
</ nav >
<!-- Compiled and minified JavaScript -->
< script src =
"https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js" >
</ script >
</ body >
</ html >输出如下：
