Mobile Menu
This pattern contains:
components-main-menu
HTML
<div class="region-navigation" style="display: none !important">
<nav class="block block--menu-block" role="navigation">
<h2 class="element-invisible block__title">Main menu</h2>
<ul class="nav nav--main-menu">
<li class="nav__item"><a class="nav__link" href="#">Home</a></li>
<li class="nav__item"><a class="nav__link" href="#">About</a></li>
<li class="nav__item"><a class="nav__link" href="#">Blog</a></li>
<li class="nav__item"><a class="nav__link" href="#">Contact</a></li>
</ul>
</nav>
</div>
Main Menu
HTML
<nav class="block block--menu-block" role="navigation">
<h2 class="element-invisible block__title">Main menu</h2>
<ul class="nav nav--main-menu">
<li class="nav__item"><a class="nav__link" href="#">Home</a></li>
<li class="nav__item"><a class="nav__link" href="#">About</a></li>
<li class="nav__item"><a class="nav__link" href="#">Blog</a></li>
<li class="nav__item"><a class="nav__link" href="#">Contact</a></li>
</ul>
</nav>
Breadcrumbs
HTML
<nav class="breadcrumb" role="navigation">
<h2 class="breadcrumb__title">You are here</h2>
<ul class="breadcrumb__list">
<li class="breadcrumb__item"><a href="#">Home</a></li>
<li class="breadcrumb__item"><a href="#">Section</a></li>
</ul>
</nav>
Local Tasks
Primary tasks
Secondary tasks
HTML
<h2 class="element-invisible">Primary tasks</h2>
<ul class="nav nav--primary-local-tasks">
<li class="nav__item"><a class="nav__link" href="#">Primary</a></li>
<li class="nav__item is-active"><a class="nav__link active" href="#">Local<span class="element-invisible">(active tab)</span></a></li>
<li class="nav__item"><a class="nav__link" href="#">Tasks</a></li>
</ul>
<h2 class="element-invisible">Secondary tasks</h2>
<ul class="nav nav--secondary-local-tasks">
<li class="nav__item is-active"><a class="nav__link active" href="#">Secondary<span class="element-invisible">(active tab)</span></a></li>
<li class="nav__item"><a class="nav__link" href="#">Local</a></li>
<li class="nav__item"><a class="nav__link" href="#">Tasks</a></li>
</ul>
Pager
HTML
<nav role="navigation">
<h2 class="element-invisible">Pages</h2>
<ul class="pager">
<li class="pager__item pager__item--first"><a class="pager__link pager__link--first" href="#"><span class="element-invisible">First page</span></a></li>
<li class="pager__item pager__item--previous"><a class="pager__link pager__link--previous" rel="prev" href="#"><span class="element-invisible">Previous page</span></a></li>
<li class="pager__item pager__item--ellipsis" role="presentation">…</li>
<li class="pager__item"><a class="pager__link" href="#"><span class="element-invisible">Page </span>2</a></li>
<li class="pager__item"><a class="pager__link" href="#"><span class="element-invisible">Page </span>3</a></li>
<li class="pager__item"><a class="pager__link" href="#"><span class="element-invisible">Page </span>4</a></li>
<li class="pager__item"><a class="pager__link" href="#"><span class="element-invisible">Page </span>5</a></li>
<li class="pager__item pager__item--current"><span class="element-invisible">Currently on page </span>6</li>
<li class="pager__item"><a class="pager__link" href="#"><span class="element-invisible">Page </span>7</a></li>
<li class="pager__item"><a class="pager__link" href="#"><span class="element-invisible">Page </span>8</a></li>
<li class="pager__item"><a class="pager__link" href="#"><span class="element-invisible">Page </span>9</a></li>
<li class="pager__item"><a class="pager__link" href="#"><span class="element-invisible">Page </span>10</a></li>
<li class="pager__item pager__item--ellipsis" role="presentation">…</li>
<li class="pager__item pager__item--next"><a class="pager__link pager__link--next" rel="next" href="#"><span class="element-invisible">Next page</span></a></li>
<li class="pager__item pager__item--last"><a class="pager__link pager__link--last" href="#"><span class="element-invisible">Last page</span></a></li>
</ul>
</nav>
Footer Menu
HTML
<nav class="block block--menu-block" role="navigation">
<h2 class="element-invisible block__title">Footer menu</h2>
<ul class="nav nav--menu-footer">
<li class="nav__item"><a class="nav__link" href="#">Home</a></li>
<li class="nav__item"><a class="nav__link" href="#">About</a></li>
<li class="nav__item"><a class="nav__link" href="#">Blog</a></li>
<li class="nav__item"><a class="nav__link" href="#">Contact</a></li>
</ul>
</nav>