<commit_before>---
description:
  This component is intended for narrow viewports.
  On wide viewports, you should use the Secondary Navigation component.
order: 3
---
<nav role="navigation" data-id="navigation-narrow-1">
  <ul class="sprk-c-Accordion sprk-c-Accordion--navigation sprk-b-List sprk-b-List--bare">
    <li class="sprk-c-Accordion__item" data-sprk-toggle="container">
      <a aria-controls="details1" class="sprk-c-Accordion__summary" data-sprk-toggle="trigger" data-sprk-toggle-type="accordion" href="#">
        <span class="sprk-b-TypeBodyTwo sprk-c-Accordion__heading">
          Item 1
        </span>

        <svg class="sprk-c-Icon sprk-c-Icon--l sprk-c-Accordion__icon" data-sprk-toggle="icon" viewBox="0 0 64 64">
          <use xlink:href="#chevron-down"></use>
        </svg>
      </a>

      <ul id="details1" class="sprk-b-List sprk-b-List--bare sprk-c-Accordion__details" data-sprk-toggle="content">
        <li>
          <a class="sprk-b-Link sprk-b-Link--simple sprk-u-pam" href="#">
            Item 1
          </a>
        </li>

        <li>
          <a class="sprk-b-Link sprk-b-Link--simple sprk-u-pam" href="#">
            Item 2
          </a>
        </li>

        <li>
          <a class="sprk-b-Link sprk-b-Link--simple sprk-u-pam" href="#">
            Item 3
          </a>
        </li>
      </ul>
    </li>

    <li class="sprk-c-Accordion__item sprk-c-Accordion__item--active">
      <a class="sprk-c-Accordion__summary" href="#">
        <span class="sprk-b-TypeBodyTwo sprk-c-Accordion__heading">
          Item 2
        </span>
      </a>
    </li>

    <li class="sprk-c-Accordion__item" data-sprk-toggle="container">
      <a
        aria-controls="details3"
        class="sprk-c-Accordion__summary"
        data-sprk-toggle="trigger"
        data-sprk-toggle-type="accordion"
        href="#">
        <span class="sprk-b-TypeBodyTwo sprk-c-Accordion__heading">
          Item 3
        </span>

        <svg class="sprk-c-Icon sprk-c-Icon--l sprk-c-Accordion__icon" data-sprk-toggle="icon" viewBox="0 0 64 64">
          <use xlink:href="#chevron-down"></use>
        </svg>
      </a>

      <ul id="details3" class="sprk-b-List sprk-b-List--bare sprk-c-Accordion__details" data-sprk-toggle="content">
        <li>
          <a class="sprk-b-Link sprk-b-Link--simple sprk-u-pam" href="#">
            Item 1
          </a>
        </li>

        <li>
          <a class="sprk-b-Link sprk-b-Link--simple sprk-u-pam" href="#">
            Item 2
          </a>
        </li>

        <li>
          <a class="sprk-b-Link sprk-b-Link--simple sprk-u-pam" href="#">
            Item 3
          </a><commit_msg>update narrow nav partial<commit_after>---
description:
  This component is intended for narrow viewports.
  On wide viewports, you should use the Secondary Navigation component.
order: 3
---
<nav
  class="sprk-c-Masthead__narrow-nav sprk-u-Display--none"
  data-sprk-mobile-nav="mobileNav2"
  role="navigation"
  data-id="navigation-narrow-1">
  <ul class="sprk-c-MastheadAccordion sprk-b-List sprk-b-List--bare">
    <li class="sprk-c-MastheadAccordion__item sprk-o-Box sprk-o-Stack sprk-o-Stack--center-column sprk-o-Stack--center-row sprk-o-Stack--center-column">
      <div class="sprk-u-Position--relative sprk-o-Stack__item sprk-u-Width-100">
        <a
          class="sprk-c-Masthead__selector sprk-b-Link sprk-b-Link--plain sprk-o-Stack sprk-o-Stack--split@xxs sprk-o-Stack--center-column"
          href="#nogo"
          data-sprk-dropdown-trigger="dropdown05"
          aria-haspopup="true"
          data-id="link-1">
          <span class="sprk-o-Stack__item sprk-o-Stack__item--flex@xxs" data-sprk-dropdown-trigger-text-container="" role="combobox">My Selector</span>
          <svg class="sprk-c-Icon sprk-c-Icon--l sprk-c-Icon--current-color sprk-Stack__item" viewBox="0 0 100 100">
            <use xlink:href="#chevron-down" />
          </svg>
        </a>

        <div class="sprk-c-Dropdown sprk-u-Display--none sprk-u-Width-100" data-sprk-dropdown="dropdown05">
          <div class="sprk-c-Dropdown__header">
            <h2 class="sprk-c-Dropdown__title sprk-b-TypeBodyTwo">
              My Choices
            </h2>
          </div>

          <ul class="sprk-c-Dropdown__links">
            <li class="sprk-c-Dropdown__item">
              <a class="sprk-c-Dropdown__link" href="#nogo" data-sprk-dropdown-choice="Selection Choice Title 1" role="option">
                <p class="sprk-b-TypeBodyOne">Selection Choice Title 1</p>
                <p>Information here</p>
              </a>
            </li>

            <li class="sprk-c-Dropdown__item" data-sprk-dropdown-choice="Selection Choice Title 2">
              <a class="sprk-c-Dropdown__link" href="#nogo" role="option">
                <p class="sprk-b-TypeBodyOne">Selection Choice Title 2</p>
                <p>Information here</p>
              </a>
            </li>
          </ul>

          <div class="sprk-c-Dropdown__footer sprk-u-TextAlign--center">
            <a class="sprk-c-Button sprk-c-Button--compact sprk-c-Button--tertiary" href="#nogo">
              Placeholder
            </a>
          </div>
        </div>
      </div>
    </li>

    <li class="sprk-c-MastheadAccordion__item" data-sprk-toggle="container">
      <a
        aria-controls="details1"
        class="sprk-c-MastheadAccordion__summary"
        data-sprk-toggle="trigger"
        data-sprk-toggle-type="masthead-accordion"
        href="#">
        <span class="sprk-c-MastheadAccordion__heading">
          Navigation Item
        </span>

        <svg class="sprk-c-Icon sprk-c-Icon--l sprk-c-Icon--current-color sprk-c-MastheadAccordion__icon" data-sprk-toggle="icon" viewBox="0 0 64 64">
          <use xlink:href="#chevron-down"></use>
        </svg>
      </a>

      <ul id="details1" class="sprk-b-List sprk-b-List--bare sprk-c-MastheadAccordion__details" data-sprk-toggle="content">
        <li>
          <a class="sprk-b-Link sprk-b-Link--plain sprk-c-Masthead__link" href="#">
            Item 1
          </a>
        </li>

        <li>
          <a class="sprk-b-Link sprk-b-Link--plain sprk-c-Masthead__link" href="#">
            Item 2
          </a>
        </li>

        <li>
          <a class="sprk-b-Link sprk-b-Link--plain sprk-c-Masthead__link" href="#">
            Item 3
          </a>
        </li>
      </ul>
    </li>

    <li class="sprk-c-MastheadAccordion__item sprk-c-MastheadAccordion__item--active">
      <a class="sprk-c-MastheadAccordion__summary" href="#">
        <span class="sprk-c-MastheadAccordion__heading">
          Your Item
        </span>
      </a>
    </li>

    <li class="sprk-c-MastheadAccordion__item">
      <a class="sprk-c-MastheadAccordion__summary" href="#">
        <span class="sprk-c-MastheadAccordion__heading">
          Nav Item
        </span>
      </a>
    </li>

    <li class="sprk-c-MastheadAccordion__item" data-sprk-toggle="container">
      <a
        aria-controls="details3"
        class="sprk-c-MastheadAccordion__summary"
        data-sprk-toggle="trigger"
        data-sprk-toggle-type="masthead-accordion"
        href="#">
        <span class="sprk-c-MastheadAccordion__heading">
          Navigation Item
        </span>

        <svg class="sprk-c-Icon sprk-c-Icon--l sprk-c-Icon--current-color sprk-c-MastheadAccordion__icon" data-sprk-toggle="icon" viewBox="0 0 64 64">
          <use xlink:href="#chevron-down"></use>
        </svg>
      </a>

      <ul id="details3" class="sprk-b-List sprk-b-List--bare sprk-c-MastheadAccordion__details" data-sprk-toggle="content">
        <li>
          <a class="sprk-b-Link sprk-b-Link--plain sprk-c-Masthead__link" href="#nogo">
            Item 1
          </a>
        </li>

        <li>
          <a class="sprk-b-Link sprk-b-Link--plain sprk-c-Masthead__link" href="#nogo">
            Item 2
          </a>
        </li>

        <li>
          <a class="sprk-b-Link sprk-b-Link--plain sprk-c-Masthead__link" href="#nogo">
            Item 3
          </a>
        </li>
      </ul>
    </li>

    <li class="sprk-c-MastheadAccordion__item">
      <a class="sprk-c-MastheadAccordion__summary" href="#nogo">
        <span class="sprk-c-MastheadAccordion__heading">
          Item
        </span>
      </a>
    </li>
  </ul>

  <span class="sprk-c-Divider" data-id="divider-1"></span>

  <ul class="sprk-c-MastheadAccordion sprk-b-List sprk-b-List--bare">
    <li class="sprk-c-MastheadAccordion__item">
      <a class="sprk-c-MastheadAccordion__summary" href="#nogo">
        <span class="sprk-c-MastheadAccordion__heading">
          <svg class="sprk-c-Icon sprk-c-Icon--current-color sprk-c-Icon--l sprk-u-mrs" viewBox="0 0 64 64">
            <use xlink:href="#call-team-member" />
          </svg>
          Talk To Us
        </span>
      </a>
    </li>

    <li class="sprk-c-MastheadAccordion__item">
      <a class="sprk-c-MastheadAccordion__summary" href="#nogo">
        <span class="sprk-c-MastheadAccordion__heading">
          <svg class="sprk-c-Icon sprk-c-Icon--current-color sprk-c-Icon--l sprk-u-mrs" viewBox="0 0 64 64">
            <use xlink:href="#settings" />
          </svg>
          Settings
        </span>
      </a>
    </li>

    <li class="sprk-c-MastheadAccordion__item" data-sprk-toggle="container">
      <a
        aria-controls="details4"
        class="sprk-c-MastheadAccordion__summary"
        data-sprk-toggle="trigger"
        data-sprk-toggle-type="accordion"
        href="#">
        <span class="sprk-c-MastheadAccordion__heading">
          <svg class="sprk-c-Icon sprk-c-Icon--current-color sprk-c-Icon--l sprk-u-mrs" viewBox="0 0 64 64">
            <use xlink:href="#user" />
          </svg>
          My Account
        </span>

        <svg class="sprk-c-Icon sprk-c-Icon--l sprk-c-Icon--current-color sprk-c-MastheadAccordion__icon" data-sprk-toggle="icon" viewBox="0 0 64 64">
          <use xlink:href="#chevron-down"></use>
        </svg>
      </a>

      <ul id="details4" class="sprk-b-List sprk-b-List--bare sprk-c-MastheadAccordion__details" data-sprk-toggle="content">
        <li>
          <a class="sprk-b-Link sprk-b-Link--plain sprk-c-Masthead__link" href="#nogo">
            Change Username
          </a>
        </li>

        <li>
          <a class="sprk-b-Link sprk-b-Link--plain sprk-c-Masthead__link" href="#nogo">
            Change Password
          </a>
        </li>

        <li>
          <a class="sprk-b-Link sprk-b-Link--plain sprk-c-Masthead__link" href="#nogo">
            Sign Out
          </a>
{'fraction_non_alphanumeric': 0.16247637051039698, 'fraction_numerical': 0.009829867674858222, 'mean_word_length': 2.0545612009237875, 'pattern_counts': {'":': 0, '<': 209, '<?xml version=': 0, '>': 209, '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': '4370092', 'n_tokens_mistral': 3923, 'n_tokens_neox': 3766, 'n_words': 614}