<commit_before>---
title: Horizontal Navigation
author: gcardoso
layout: page-tabs
---
<div class="tab-content"> 
  <div role="tabpanel" class="tab-pane active" id="overview">
    <p>It is recommended to use horizontal navigation when you want to provide access to global navigation of an application at the top of every page. This horizontal navigation pattern will support up to three levels of navigation.</p>
    <p>The top level (primary) navigation should always be exposed.  Secondary and tertiary levels can either be persistent or hidden within drop-down menus.  The latter provides less visibility to lower-level categories but saves vertical screen space.</p>
    <p>As a rule of thumb, the horizontal navigation is the prefered choice over <a href="{{site.baseurl}}pattern-library/navigation/vertical-navigation/">vertical navigation</a> when:</p>
    <ul>
      <li>There are a small number of fixed categories.</li>
      <li>You want to provide the best visibility to primary categories by placing them immediately below the page header area.</li>
    </ul>
    <p>Consider using <a href="{{site.baseurl}}pattern-library/navigation/vertical-navigation/">vertical navigation</a> if you need a solution that can easily scale for a large amount of menu items and easily adapt to small screen sizes. Horizontal menus can also be made responsive but it usually requires a transformation from horizontal to vertical. Since vertical menus are already in this format, the transition from desktop to mobile is less disorienting.</p>
    <p>Jump to <a href="#example-overview-1">Standard Horizontal Navigation</a>, or <a href="#example-overview-2">Navbar Variations</a></p>
    <h2 id="example-overview-1">Standard Horizontal Navigation</h2>
    <div class="example-pf">
      <iframe src="{{ site.baseurl}}pattern-library/navigation/horizontal-navigation/horizontal-navigation.html"
              width="100%" height="650px;" scrolling="no" seamless></iframe>
    </div><commit_msg>Fixing typo - "preferred" vs "prefered"<commit_after>---
title: Horizontal Navigation
author: gcardoso
layout: page-tabs
---
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="overview">
    <p>It is recommended to use horizontal navigation when you want to provide access to global navigation of an application at the top of every page. This horizontal navigation pattern will support up to three levels of navigation.</p>
    <p>The top level (primary) navigation should always be exposed.  Secondary and tertiary levels can either be persistent or hidden within drop-down menus.  The latter provides less visibility to lower-level categories but saves vertical screen space.</p>
    <p>As a rule of thumb, the horizontal navigation is the preferred choice over <a href="{{site.baseurl}}pattern-library/navigation/vertical-navigation/">vertical navigation</a> when:</p>
    <ul>
      <li>There are a small number of fixed categories.</li>
      <li>You want to provide the best visibility to primary categories by placing them immediately below the page header area.</li>
    </ul>
    <p>Consider using <a href="{{site.baseurl}}pattern-library/navigation/vertical-navigation/">vertical navigation</a> if you need a solution that can easily scale for a large amount of menu items and easily adapt to small screen sizes. Horizontal menus can also be made responsive but it usually requires a transformation from horizontal to vertical. Since vertical menus are already in this format, the transition from desktop to mobile is less disorienting.</p>
    <p>Jump to <a href="#example-overview-1">Standard Horizontal Navigation</a>, or <a href="#example-overview-2">Navbar Variations</a></p>
    <h2 id="example-overview-1">Standard Horizontal Navigation</h2>
    <div class="example-pf">
      <iframe src="{{ site.baseurl}}pattern-library/navigation/horizontal-navigation/horizontal-navigation.html"
              width="100%" height="650px;" scrolling="no" seamless></iframe>
    </div>
{'fraction_non_alphanumeric': 0.09970014992503748, 'fraction_numerical': 0.005497251374312844, 'mean_word_length': 4.529005524861878, 'pattern_counts': {'":': 0, '<': 67, '<?xml version=': 0, '>': 67, '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': '7249319', 'n_tokens_mistral': 1034, 'n_tokens_neox': 969, 'n_words': 441}