<commit_before><% @side_nav = "nav" %>

<div class="row">
  <div class="large-9 push-3 columns">

    <% @page_title = "Top Bar" %>
    <div class="row">
      <div class="large-12 columns">
        <h1><%= @page_title %></h1>
        <h4 class="subheader">The Foundation Top Bar gives you a great way to display a complex navigation bar on small or large screens.</h4>

        <nav class="top-bar">
          <ul class="title-area">
            <!-- Title Area -->
            <li class="name">
              <h1><a href="/">Top Bar</a></h1>
            </li>
            <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
            <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
          </ul>

          <section class="top-bar-section">
            <ul class="left">
              <li class="divider"></li>
              <li class="has-dropdown"><a href="<%= features_path %>">Item 1</a>

                <ul class="dropdown">
                  <li><label>Level One</label></li>
                  <li><a href="#">Sub-item 1</a></li>
                  <li><a href="#">Sub-item 2</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Sub-item 3</a></li>
                  <li class="has-dropdown"><a href="#">Sub-item 4</a>

                    <ul class="dropdown">
                      <li><label>Level Two</label></li>
                      <li class="has-dropdown"><a href="#">Sub-item 1</a>

                        <ul class="dropdown">
                          <li><label>Level Three</label></li>
                          <li class="has-dropdown"><a href="#">Sub-item 1</a>

                            <ul class="dropdown">
                              <li><label>Level Four</label></li>
                              <li><a href="#">Sub-item 1</a></li>
                            </ul>
                          </li>
                          <li><a href="#">Sub-item 2</a></li>
                          <li><a href="#">Sub-item 3</a></li>
                          <li class="divider"></li>
                          <li><a href="#">Sub-item 4</a></li>
                        </ul>
                      </li>
                      <li><a href="#">Sub-item 2</a></li>
                      <li><a href="#">Sub-item 3</a></li>
                      <li><a href="#">Sub-item 4</a>
                    </ul>
                  </li>
                  <li><a href="#">Sub-item 5</a></li>
                </ul>
              </li>
              <li class="divider"></li>
            </ul>
            <!-- Right Nav Section -->
            <ul class="right">
              <li class="divider hide-for-small"></li>
              <li><a href="#">Item 2</a></li>
            </ul>
          </section>
        </nav>

        <hr>
      </div>
    </div>

    <div class="row">
      <div class="large-12 columns">

        <p>The topbar is only designed to have one per page, so we can't include a demo on this page due to the fact that we have one on the page already. Take a look at the code we have below and checkout our topbar to get a feel for how it works. The only thing about the one on this page is it doesn't have a dropdown.</p>
        <hr>

        <h3>Build With HTML Classes</h3>
        <p>The top bar is a pretty complex piece of magical UI goodness, which makes it really difficult to create a mixin from it. We rely on many presentational classes to accomplish the styles and there's a lot happening in the JS.</p>

        <h5>Basic Needs</h5>
        <p>The top bar has four main elements, three of which are needed for proper functionality: <code>ul.title-area</code>, one of the section <code>ul class="right/left</code> elements and the <code>li.toggle-topbar</code> element that will expand the menu in the mobile layout. You can leave out the li class="name" as long as you include the .toggle-topbar element.</p>

        <h5>Positioning the Bar</h5>
        <p>The top bar is built with a single <code>nav</code> element with a class of <code>top-bar</code>. It will take on full-browser width by default. To make the top bar stay fixed as you scroll, wrap it in <code>div class="fixed"</code>. If you want your navigation to be set to your grid width, wrap it in <code>div class="contain-to-grid"</code>. You may use <code>fixed</code> and <code>contain-to-grid</code> together.</p>

        <h5>Building the Nav</h5>
        <p>When building your bar it is good to be aware of how many links your're going to need in it so you can customize your responsive breakpoint accordingly. Build your navigation with <code>ul.left</code> and/or <code>ul.right</code> depending where you want links. To add items, simply include <code>li</code> elements with and anchor inside them for your top-level. To build a dropdown menu, you'll need to add <code>has-dropdown</code> to the <code>li</code> and include <code>ul.dropdown</code> after that anchor. Add a class of <code>active</code> to mark the current page.</p>

        <h5>Other Elements</h5>
        <p>To make this navigation nice and flexible, we've included patterns for elements like buttons, inputs and dividers. To create dividers between your navigation, just add an empty <code>li.divider</code> and you'll get some separation. You can use a small Foundation button in the nav, just include <code>has-form</code> as a class for its parent li. You can include two different input types: search and text. To use these, add a class of search to the parent li.</p>

        <h5>Sticky Top Bar</h5>
        <p>You may also wrap your top bar in <code>div class="contain-to-grid sticky"</code> and put it anywhere within your markup. When the navigation hits the top of the browser, it will act like the fixed top bar and stick to the top as users continue to scroll.</p><commit_msg>removed reference about a single top-bar only<commit_after><% @side_nav = "nav" %>

<div class="row">
  <div class="large-9 push-3 columns">

    <% @page_title = "Top Bar" %>
    <div class="row">
      <div class="large-12 columns">
        <h1><%= @page_title %></h1>
        <h4 class="subheader">The Foundation Top Bar gives you a great way to display a complex navigation bar on small or large screens.</h4>

        <nav class="top-bar">
          <ul class="title-area">
            <!-- Title Area -->
            <li class="name">
              <h1><a href="/">Top Bar</a></h1>
            </li>
            <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
            <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
          </ul>

          <section class="top-bar-section">
            <ul class="left">
              <li class="divider"></li>
              <li class="has-dropdown"><a href="<%= features_path %>">Item 1</a>

                <ul class="dropdown">
                  <li><label>Level One</label></li>
                  <li><a href="#">Sub-item 1</a></li>
                  <li><a href="#">Sub-item 2</a></li>
                  <li class="divider"></li>
                  <li><a href="#">Sub-item 3</a></li>
                  <li class="has-dropdown"><a href="#">Sub-item 4</a>

                    <ul class="dropdown">
                      <li><label>Level Two</label></li>
                      <li class="has-dropdown"><a href="#">Sub-item 1</a>

                        <ul class="dropdown">
                          <li><label>Level Three</label></li>
                          <li class="has-dropdown"><a href="#">Sub-item 1</a>

                            <ul class="dropdown">
                              <li><label>Level Four</label></li>
                              <li><a href="#">Sub-item 1</a></li>
                            </ul>
                          </li>
                          <li><a href="#">Sub-item 2</a></li>
                          <li><a href="#">Sub-item 3</a></li>
                          <li class="divider"></li>
                          <li><a href="#">Sub-item 4</a></li>
                        </ul>
                      </li>
                      <li><a href="#">Sub-item 2</a></li>
                      <li><a href="#">Sub-item 3</a></li>
                      <li><a href="#">Sub-item 4</a>
                    </ul>
                  </li>
                  <li><a href="#">Sub-item 5</a></li>
                </ul>
              </li>
              <li class="divider"></li>
            </ul>
            <!-- Right Nav Section -->
            <ul class="right">
              <li class="divider hide-for-small"></li>
              <li><a href="#">Item 2</a></li>
            </ul>
          </section>
        </nav>

        <hr>
      </div>
    </div>

    <div class="row">
      <div class="large-12 columns">

        <h3>Build With HTML Classes</h3>
        <p>The top bar is a pretty complex piece of magical UI goodness, which makes it really difficult to create a mixin from it. We rely on many presentational classes to accomplish the styles and there's a lot happening in the JS.</p>

        <h5>Basic Needs</h5>
        <p>The top bar has four main elements, three of which are needed for proper functionality: <code>ul.title-area</code>, one of the section <code>ul class="right/left</code> elements and the <code>li.toggle-topbar</code> element that will expand the menu in the mobile layout. You can leave out the li class="name" as long as you include the .toggle-topbar element.</p>

        <h5>Positioning the Bar</h5>
        <p>The top bar is built with a single <code>nav</code> element with a class of <code>top-bar</code>. It will take on full-browser width by default. To make the top bar stay fixed as you scroll, wrap it in <code>div class="fixed"</code>. If you want your navigation to be set to your grid width, wrap it in <code>div class="contain-to-grid"</code>. You may use <code>fixed</code> and <code>contain-to-grid</code> together.</p>

        <h5>Building the Nav</h5>
        <p>When building your bar it is good to be aware of how many links your're going to need in it so you can customize your responsive breakpoint accordingly. Build your navigation with <code>ul.left</code> and/or <code>ul.right</code> depending where you want links. To add items, simply include <code>li</code> elements with and anchor inside them for your top-level. To build a dropdown menu, you'll need to add <code>has-dropdown</code> to the <code>li</code> and include <code>ul.dropdown</code> after that anchor. Add a class of <code>active</code> to mark the current page.</p>

        <h5>Other Elements</h5>
        <p>To make this navigation nice and flexible, we've included patterns for elements like buttons, inputs and dividers. To create dividers between your navigation, just add an empty <code>li.divider</code> and you'll get some separation. You can use a small Foundation button in the nav, just include <code>has-form</code> as a class for its parent li. You can include two different input types: search and text. To use these, add a class of search to the parent li.</p>

        <h5>Sticky Top Bar</h5>
        <p>You may also wrap your top bar in <code>div class="contain-to-grid sticky"</code> and put it anywhere within your markup. When the navigation hits the top of the browser, it will act like the fixed top bar and stick to the top as users continue to scroll.</p>
{'fraction_non_alphanumeric': 0.14064133844545137, 'fraction_numerical': 0.006971070059254096, 'mean_word_length': 1.952662721893491, 'pattern_counts': {'":': 0, '<': 408, '<?xml version=': 0, '>': 408, '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': '3375568', 'n_tokens_mistral': 3304, 'n_tokens_neox': 3119, 'n_words': 1195}