Header

Logos

You can supply your own any way you like; however logos are available for Bamboo, Confluence, FECRU, HipChat, JIRA and Stash. There's also a text-only option. User-supplied logo images will simply extend down from the top edge of the header - add transparent pixels for alignment. If we have a specific px size in mind we could provide a class to do a neater implementation.

<h1 id="logo" class="aui-header-logo aui-header-logo-textonly"><a href="http://example.com/">Text</a></h1>
<h1 id="logo" class="aui-header-logo aui-header-logo-bamboo"><a href="http://example.com/">Bamboo</a></h1>
<h1 id="logo" class="aui-header-logo aui-header-logo-confluence"><a href="http://example.com/">Confluence</a></h1>
<h1 id="logo" class="aui-header-logo aui-header-logo-fecru"><a href="http://example.com/">FishEye Crucible</a></h1>
<h1 id="logo" class="aui-header-logo aui-header-logo-hipchat"><a href="http://example.com/">HipChat</a></h1>
<h1 id="logo" class="aui-header-logo aui-header-logo-jira"><a href="http://example.com/">JIRA</a></h1>
<h1 id="logo" class="aui-header-logo aui-header-logo-stash"><a href="http://example.com/">Stash</a></h1>

Header dropdowns

Use dropdown2; add a span for the dropdown arrow/triangle (view source for example). Note this is using a CSS trick so its colour is easily changeable in themes etc. Actual 16px icons use the standard icon pattern.

Header avatars

Add class aui-avatar to the A element; then use an IMG for the avatar (user generated avatars are presumed to be IMG elements). Size is locked to 24px.

Quick Search

Yes, include the label too. Placeholders don't replace labels. Since we're styling this to look like a search input, it doesn't actually work very well to use a real search input. Irony!

<form action="/foo" method="post" class="aui-quicksearch">
<label for="quicksearchid" class="assistive">Quick Search</label>
<input id="quicksearchid" class="search" type="text" placeholder="Quick Search" name="quicksearchname">
</form>

Upgrade from old header

  1. Change class="global" to class="aui-header aui-dropdown2-trigger-group"
  2. Move list items or local to global (if that's not possible the whole UL can be moved)
  3. Remove the now-empty class="local" element

Continue using primary and secondary classes to set up left/right nav. Multiple UL elements will sit correctly if they fit but wrapping is likely to be ugly.

Pattern

Placed within #header, aui-header re-uses most of the first/legacy version's markup.

<header id="header" role="banner">
    <nav class="aui-header aui-dropdown2-trigger-group" role="navigation">
        <div class="primary">
            <h1 id="logo" class="aui-header-logo aui-header-logo-bamboo"><a href="http://example.com/">Logo</a></h1>
            <ul>
                <li><a href="#dropdown2-header1" aria-owns="dropdown2-header1" aria-haspopup="true" class="aui-dropdown2-trigger">Test item <span class="aui-icon-dropdown"></span></a></li>
                <li class="selected"><a href="#dropdown2-header2" aria-owns="dropdown2-header2" aria-haspopup="true" class="aui-dropdown2-trigger">Selected test item <span class="aui-icon-dropdown"></span></a></li>
                <li><a href="#dropdown2-header3" aria-owns="dropdown2-header3" aria-haspopup="true" class="aui-dropdown2-trigger">Test item <span class="aui-icon-dropdown"></span></a></li>
                <li><a href="#dropdown2-header4" aria-owns="dropdown2-header4" aria-haspopup="true" class="aui-dropdown2-trigger">Test item <span class="aui-icon-dropdown"></span></a></li>
                <li><a href="#dropdown2-header5" aria-owns="dropdown2-header5" aria-haspopup="true" class="aui-dropdown2-trigger">Test item <span class="aui-icon-dropdown"></span></a></li>
            </ul>
        </div>
        <div class="secondary">
            <ul>
                <li>
                    <form action="/foo" method="post" class="aui-quicksearch">
                        <input id="quicksearchid" class="search" type="search" title="Quick Search ( Type '/' )"
                        placeholder="Quick Search" name="quicksearchname">
                    </form>                            
                </li>
                <li><a href="#dropdown2-header6" aria-owns="dropdown2-header6" aria-haspopup="true" class="aui-dropdown2-trigger">Test item</a></li>
                <li><a href="#dropdown2-header7" aria-owns="dropdown2-header7" aria-haspopup="true" class="aui-dropdown2-trigger"><span
                class="aui-icon aui-icon-test16-black">Test Icon</span><span class="aui-icon-dropdown"></span></a></li>
            </ul>
        </div>
    </nav>
</header>