<header role="banner">

<nav role="navigation" class="navbar navbar-default navbar-fixed-top">

<div class="container-fluid">

<!-- Contains the logo and a toggle button for smaller screen sizes. -->

<div class="navbar-header">

<!-- Toggles the visibility of the nav area on smaller screen sizes. -->

<button type="button" class="navbar-toggle pull-left collapsed" data-toggle="collapse" data-target="#navbar-collapse-div">

<span class="sr-only">Toggle navigation</span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

<span class="icon-bar"></span>

</button>

<!-- Top-left logo. -->

<a class="navbar-brand" href="/index.html" aria-label="TypeScript Home Page">

<img class="navbar-logo" src="/assets/images/logo_nocircle.svg" alt="TypeScript logo"/>

</a>

</div>

<!-- The navigation items. -->

<div class="collapse navbar-collapse centered-navbar" id="navbar-collapse-div">

<ul class="nav navbar-nav">

<li class="{% if page.url contains '/docs/' %}active{% endif %}"><a href="/docs/index.html">Documentation </a></li>

<li><a href="/index.html#download-links">Download</a></li>

<li class="{% if page.url contains '/community/' %}active{% endif %}"><a href="/community/index.html">Connect</a></li>

<li class="{% if page.url contains '/play/' %}active{% endif %}"><a href="/play/index.html">Playground</a></li>

</ul>

<form class="navbar-form navbar-right" role="search">

<div class="form-group">

<input type="search" class="form-control site-search" placeholder="Search">

</div>

</form>

</div>

</div>

</nav>

</header>