Summary
The top bar pattern should be placed on top of a page. When using the page pattern, it
should be placed above the element that contains the zui-page-panel class.
There are no attributes defined for this pattern.
Example
Markup
<header class="zui-top-bar" role="banner">
<nav role="navigation">
<div class="zui-header-primary">
<h1 class="zui-top-bar-logo">
<a href="http://example.com/">
ZUI
</a>
</h1>
<ul class="zui-nav">
<li>
<a href="#">Action</a>
</li>
<li>
<a href="#">Action</a>
</li>
<li>
<a href="#">Action</a>
</li>
<li>
<a href="#" class="zui-button-dropdown" aria-haspopup="true" aria-controls="dropdown-box-txt" aria-expanded="false" id="standardMenu1">Menu</a>
<div class="zui-dropdown-menu" id="dropdown-box-txt" aria-hidden="true">
<ul>
<li><a href="http://example.com/">Item 1</a></li>
<li><a href="http://example.com/">Item 2</a></li>
<li><a href="http://example.com/">Item 4</a></li>
<li><a href="http://example.com/">Item 4</a></li>
<li><a href="http://example.com/">Item 5</a></li>
</ul>
<ul>
<li><a href="http://example.com/">Item 6</a></li>
<li><a href="http://example.com/">Item 7</a></li>
<li><a href="http://example.com/">Item 8</a></li>
<li><a href="http://example.com/">Item 9</a></li>
<li><a href="http://example.com/">Item 10</a></li>
</ul>
</div>
</li>
<li>
<a href="#" class="zui-button-dropdown" aria-haspopup="true" aria-controls="dropdown-box-with-headers-txt" aria-expanded="false" id="standardMenu2">Header Menu</a>
<div class="zui-dropdown-menu" id="dropdown-box-with-headers-txt" aria-hidden="true">
<div class="zui-nav-heading">
<strong>Heading</strong>
</div>
<ul>
<li><a href="http://example.com/">Item 1</a></li>
<li><a href="http://example.com/">Item 2</a></li>
<li><a href="http://example.com/">Item 4</a></li>
<li><a href="http://example.com/">Item 4</a></li>
<li><a href="http://example.com/">Item 5</a></li>
</ul>
<div class="zui-nav-heading">
<strong>Heading</strong>
</div>
<ul>
<li><a href="http://example.com/">Item 6</a></li>
<li><a href="http://example.com/">Item 7</a></li>
</ul>
<ul>
<li><a href="http://example.com/">Item 8</a></li>
<li><a href="http://example.com/">Item 9</a></li>
</ul>
<h5>Another header</h5>
<ul>
<li><a href="http://example.com/">Item 10</a></li>
<li><a href="http://example.com/">Item 11</a></li>
</ul>
</div>
</li>
<li>
<a href="#" class="zui-button-dropdown" aria-haspopup="true" aria-controls="dropdown-box-with-scroll-txt" aria-expanded="false" id="standardMenu3">Scroll Menu</a>
<div class="zui-dropdown-menu" id="dropdown-box-with-scroll-txt" aria-hidden="true">
<ul>
<li>
<div class="zui-dropdown-field">
<input type="text">
</div>
</li>
</ul>
<div class="zui-dropdown-scroll">
<div class="zui-nav-heading">
<strong>Header</strong>
</div>
<ul>
<li><a href="http://example.com/">Item 1</a></li>
<li><a href="http://example.com/">Item 2</a></li>
<li><a href="http://example.com/">Item 4</a></li>
<li><a href="http://example.com/">Item 4</a></li>
<li><a href="http://example.com/">Item 5</a></li>
</ul>
<div class="zui-nav-heading">
<strong>Header</strong>
</div>
<ul>
<li><a href="http://example.com/">Item 6</a></li>
<li><a href="http://example.com/">Item 7</a></li>
</ul>
<ul>
<li><a href="http://example.com/">Item 8</a></li>
<li><a href="http://example.com/">Item 9</a></li>
</ul>
<h5>Another header</h5>
<ul>
<li><a href="http://example.com/">Item 10</a></li>
<li><a href="http://example.com/">Item 11</a></li>
</ul>
</div>
<ul>
<li>
<div class="zui-dropdown-field">
<input type="text">
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="zui-top-bar-secondary">
<ul class="zui-nav">
<li>
<form action="/foo" method="post" class="zui-top-bar-quicksearch">
<input type="text" placeholder="Search...">
</form>
</li>
<li>
<a href="#">Action</a>
</li>
</ul>
</div>
</nav>
</header>
