UI components
Headers
Headers help users identify where they are and provide a quick, organized way to reach the main sections of a website. Our headers include branding to identify the site and horizontal navigation.
Basic header
<nav class="navbar navbar-inverse navbar-fixed-top" style="background-color: #4e5758;">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">OIT Website</a>
</div>
<ul class="nav navbar-nav" style="height: 50px;">
<li><a href="#">Home</a></li>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown 1</a><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Link 1-1</a></li>
<li><a href="#">Link 1-2</a></li>
<li><a href="#">Link 1-3</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right" style="padding: 8px 10px 0px 0px;">
<form class="oit-search oit-search-small">
<div role="search">
<input id="search-field-small" type="search" name="search">
<button type="submit">
<span class="oit-sr-only">Search</span>
</button>
</div>
</form>
</ul>
</div>
</nav>
What it does
The basic header is great if you have a modest number of sections in your main navigation. You can customize it (depending on your site structure) and use it with:
- A text or image logo
- With or without dropdown menus
- With or without a search bar
- With or without call-to-action buttons in place of the search bar
Why use it
Use the basic header if you have few enough sections in your main navigation to fit comfortably next to your logo; this will depend on the length of your text and whether you include a search bar. You may also use it if you’d like to include the full search bar in your header, or if each main section listed in the horizontal navigation has six or fewer subsections that you’d like to include in a dropdown menu.
When not to use it
Consider using the extended header if you have more sections in your horizontal navigation than will fit comfortably next to your logo, or if you have complex sections that require the use of a mega menu.