<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>