<commit_before>---
layout: page
title: New navbar
---

Proposal to replace the existing navbar with something simpler and more customizable.

<div class="navbar navbar-default">
  <h3 class="navbar-brand pull-left">
    <a href="#">Navbar</a>
  </h3>
</div>

<div class="navbar navbar-default">
  <h3 class="navbar-brand pull-left">
    <a href="#">Navbar</a>
  </h3>
  <ul class="nav nav-pills pull-left">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Features</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Pricing</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
  </ul>
</div>

<div class="navbar navbar-default">
  <h3 class="navbar-brand pull-left">
    <a href="#">Navbar</a>
  </h3>
  <ul class="nav nav-pills pull-left">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Features</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Pricing</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
  </ul>
  <ul class="nav nav-pills pull-right">
    <li class="nav-item">
      <a class="nav-link" href="#">Help</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Sign out</a>
    </li>
  </ul>
</div>

<div class="navbar navbar-default">
  <h3 class="navbar-brand pull-left">
    <a href="#">Navbar</a>
  </h3>
  <ul class="nav nav-pills pull-left">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Features</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Pricing</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
  </ul>
  <form class="form-inline pull-right">
    <input class="form-control" type="text" placeholder="Search">
    <button class="btn btn-primary" type="submit">Search</button>
  </form>
</div>

<div class="navbar navbar-inverse">
  <h3 class="navbar-brand pull-left">
    <a href="#">Navbar</a>
  </h3>
  <ul class="nav nav-pills pull-left">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Features</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Pricing</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
  </ul>
  <form class="form-inline pull-right">
    <input class="form-control" type="text" placeholder="Search">
    <button class="btn btn-primary" type="submit">Search</button>
  </form>
</div>


<div class="collapse" id="navbar-header">
  <div class="inverse p-a">
    <h3>Collapsed content</h3>
    <p>Toggleable via the navbar brand.</p>
  </div>
</div>
<div class="navbar navbar-default">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header">
    &#9776;
  </button>
</div>

<commit_msg>fix up the new navbar docs<commit_after>---
layout: page
title: New navbar
---

The navbar is a simple wrapper for positioning branding, navigation, and other elements. It's easily extensible and with the help of our collapse plugin it can easily integrate offscreen content.

### Basics

Here's what you need to know before getting started with the navbar:

- Navbars require a wrapping `.navbar` and either a color scheme class or custom styles.
- When using multiple components in a navbar, some [alignment classes](#alignment) are required.
- Navbars and their contents are fluid by default. Use [optional containers](#containers) to limit their horizontal width.

### Branding

Name your company, product, or project with `.navbar-brand`.

{% example html %}
<div class="navbar navbar-default">
  <h3 class="navbar-brand">
    <a href="#">Navbar</a>
  </h3>
</div>
{% endexample %}

### Navigation

Use `.nav-pills` within a navbar for basic navigation.

{% example html %}
<div class="navbar navbar-default">
  <ul class="nav nav-pills">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Features</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Pricing</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
  </ul>
</div>
{% endexample %}

### Inline forms

Add an `.inline-form` within the navbar with nearly any combination of form controls and buttons.

{% example html %}
<div class="navbar navbar-default">
  <form class="form-inline">
    <input class="form-control" type="text" placeholder="Search">
    <button class="btn btn-primary" type="submit">Search</button>
  </form>
</div>
{% endexample %}

### Containers

Although it's not required, you can wrap a navbar in a `.container` or add one within for basic horizontal control.

{% example html %}
<div class="navbar navbar-default">
  <div class="container">
    <h3 class="navbar-brand">
      <a href="#">Navbar</a>
    </h3>
  </div>
</div>
{% endexample %}

{% example html %}
<div class="container">
  <div class="navbar navbar-default">
    <h3 class="navbar-brand">
      <a href="#">Navbar</a>
    </h3>
  </div>
</div>
{% endexample %}

### Alignment

Use `.pull-left` or `.pull-right` to align multiple elements within the navbar.

{% example html %}
<div class="navbar navbar-default">
  <h3 class="navbar-brand pull-left">
    <a href="#">Navbar</a>
  </h3>
  <ul class="nav nav-pills pull-left">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Features</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Pricing</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
  </ul>
  <ul class="nav nav-pills pull-right">
    <li class="nav-item">
      <a class="nav-link" href="#">Help</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Sign out</a>
    </li>
  </ul>
</div>
{% endexample %}

### Inverse color scheme

Replace `.navbar-default` with `.navbar-inverse` for a darker background color and white text.

{% example html %}
<div class="navbar navbar-inverse">
  <h3 class="navbar-brand pull-left">
    <a href="#">Navbar</a>
  </h3>
  <ul class="nav nav-pills pull-left">
    <li class="nav-item active">
      <a class="nav-link" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Features</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Pricing</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
  </ul>
  <form class="form-inline pull-right">
    <input class="form-control" type="text" placeholder="Search">
    <button class="btn btn-primary" type="submit">Search</button>
  </form>
</div>
{% endexample %}

### Collapsible content

Our collapse plugin allows you to use a `<button>` to toggle hidden content.

{% example html %}
<div class="collapse" id="navbar-header">
  <div class="inverse p-a">
    <h3>Collapsed content</h3>
    <p>Toggleable via the navbar brand.</p>
  </div>
</div>
<div class="navbar navbar-default">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-header">
    &#9776;
  </button>
</div>
{% endexample %}
{'fraction_non_alphanumeric': 0.20468297816364114, 'fraction_numerical': 0.004209418574059458, 'mean_word_length': 3.329726651480638, 'pattern_counts': {'":': 0, '<': 262, '<?xml version=': 0, '>': 262, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3283173', 'n_tokens_mistral': 2773, 'n_tokens_neox': 2639, 'n_words': 691}