<header class="header-6">
<div class="branding">
<a href="..." class="nav-link">
<clr-icon shape="vm-bug"></clr-icon>
<span class="title">Project Clarity</span>
</a>
</div>
<div class="header-nav">
<a href="..." class="active nav-link"><span class="nav-text">Dashboard</span></a>
<a href="..." class="nav-link"><span class="nav-text">Interactive Analytics</span></a>
</div>
<div class="header-actions">
<a href="..." class="nav-link nav-icon">
<clr-icon shape="cog"></clr-icon>
</a>
</div>
</header>
<header class="header-6">
<div class="branding">
<a href="..." class="nav-link">
<clr-icon shape="vm-bug"></clr-icon>
<span class="title">Project Clarity</span>
</a>
</div>
<form class="search">
<label for="search_input">
<input id="search_input" type="text" placeholder="Search for keywords...">
</label>
</form>
<div class="header-actions">
<a href="..." class="nav-link nav-icon">
<clr-icon shape="cog"></clr-icon>
</a>
</div>
</header>
<header class="header-6">
<div class="branding">
<a href="..." class="nav-link">
<clr-icon shape="vm-bug"></clr-icon>
<span class="title">Project Clarity</span>
</a>
</div>
<div class="header-actions">
<clr-dropdown class="dropdown bottom-right">
<button class="nav-icon" clrDropdownToggle>
<clr-icon shape="cog"></clr-icon>
<clr-icon shape="caret down"></clr-icon>
</button>
<div class="dropdown-menu">
<a href="..." clrDropdownItem>About</a>
<a href="..." clrDropdownItem>Preferences</a>
<a href="..." clrDropdownItem>Log out</a>
</div>
</clr-dropdown>
</div>
</header>
<header class="header-6">
<div class="branding">
<a href="..." class="nav-link">
<clr-icon shape="vm-bug"></clr-icon>
<span class="title">Project Clarity</span>
</a>
</div>
<div class="header-nav">
<a href="..." class="nav-link nav-icon">
<clr-icon shape="cloud"></clr-icon>
</a>
<a href="..." class="active nav-link nav-icon">
<clr-icon shape="folder"></clr-icon>
</a>
</div>
<form class="search">
<label for="search_input">
<input id="search_input" type="text" placeholder="Search for keywords...">
</label>
</form>
<div class="header-actions">
<clr-dropdown class="dropdown bottom-right">
<button class="nav-icon" clrDropdownToggle>
<clr-icon shape="user"></clr-icon>
<clr-icon shape="caret down"></clr-icon>
</button>
<div class="dropdown-menu">
<a href="..." clrDropdownItem>About</a>
<a href="..." clrDropdownItem>Preferences</a>
<a href="..." clrDropdownItem>Log out</a>
</div>
</clr-dropdown>
</div>
</header>
<header class="header-6">
<div class="branding">
<a href="..." class="nav-link">
<clr-icon shape="vm-bug"></clr-icon>
<span class="title">Project Clarity</span>
</a>
</div>
<div class="header-actions">
<a href="..." class="nav-link nav-text">
Log Out
</a>
</div>
</header>
<header class="header-6">
<div class="branding">
<a href="..." class="nav-link">
<clr-icon shape="vm-bug"></clr-icon>
<span class="title">Project Clarity</span>
</a>
</div>
<div class="header-actions">
<clr-dropdown class="dropdown bottom-right">
<button class="nav-text" clrDropdownToggle>
john.doe@vmware.com
<clr-icon shape="caret down"></clr-icon>
</button>
<div class="dropdown-menu">
<a href="..." clrDropdownItem>Preferences</a>
<a href="..." clrDropdownItem>Log out</a>
</div>
</clr-dropdown>
</div>
</header>