// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Dropdowns.vue renders correctly 1`] = `
<div>
  <div
    class="row"
  >
    <div
      class="col-12 col-md-6"
    >
      <div
        class="card"
      >
        <header
          class="card-header"
        >
          <svg
            class="c-icon"
            role="img"
            viewBox="0 0 64 64"
            xmlns="http://www.w3.org/2000/svg"
          >
            undefined
          </svg>
           
          <strong>
             Bootstrap Dropdown
          </strong>
           
          <div
            class="card-header-actions"
          >
            <a
              class="card-header-action"
              href="https://coreui.io/vue/docs/components/dropdown"
              rel="noreferrer noopener"
              target="_blank"
            >
              <small
                class="text-muted"
              >
                docs
              </small>
            </a>
          </div>
        </header>
         
        <div
          class="card-body"
        >
          <div>
            <div
              class="m-2 dropdown"
            >
              <button
                aria-expanded="false"
                aria-haspopup="true"
                class="btn dropdown-toggle btn-secondary"
                type="button"
              >
                Dropdown Button
              </button>
              <!---->
              <div
                class="dropdown-menu"
              >
                <a
                  class="dropdown-item"
                  href="#"
                  role="menuitem"
                  target="_self"
                >
                  First Action
                </a>
                 
                <a
                  class="dropdown-item"
                  href="#"
                  role="menuitem"
                  target="_self"
                >
                  Second Action
                </a>
                 
                <a
                  class="dropdown-item"
                  href="#"
                  role="menuitem"
                  target="_self"
                >
                  Third Action
                </a>
                 
                <div
                  class="dropdown-divider"
                  role="separator"
                />
                 
                <a
                  class="dropdown-item"
                  href="#"
                  role="menuitem"
                  target="_self"
                >
                  Something else here...
                </a>
                 
                <a
                  aria-disabled="true"
                  class="dropdown-item disabled"
                  href="#"
                  role="menuitem"
                  tabindex="-1"
                  target="_self"
                >
                  Disabled action
                </a>
              </div>
            </div>
          </div>
           
          <div>
            <div
              class="m-2 dropdown"
            >
              <button
                aria-expanded="false"
                aria-haspopup="true"
                class="btn dropdown-toggle btn-secondary"
                type="button"
              >
                Dropdown with divider
              </button>
              <!---->
              <div
                class="dropdown-menu"
              >
                <a
                  class="dropdown-item"
                  href="#"
                  role="menuitem"
                  target="_self"
                >
                  First item
                </a>
                 
                <a
                  class="dropdown-item"
                  href="#"
                  role="menuitem"
                  target="_self"
                >
                  Second item
                </a>
                 
                <div
                  class="dropdown-divider"
                  role="separator"
                />
                 
                <a
                  class="dropdown-item"
                  href="#"
                  role="menuitem"
                  target="_self"
                >
                  Separated Item
                </a>
              </div>
            </div>
          </div>
           
          <div>
            <div
              class="m-2 dropdown"
            >
              <button
                aria-expanded="false"
                aria-haspopup="true"
                class="btn dropdown-toggle btn-secondary"
                type="button"
              >
                Dropdown with header
              </button>
              <!---->
              <div
                class="dropdown-menu"
              >
                <div
                  class="dropdown-header"
                >
                  Dropdown header
                </div>
                 
                <a
                  class="dropdown-item"
                  href="#"
                  role="menuitem"
                  target="_self"
                >
                  First item
                </a>
                 
                <a
                  class="dropdown-item"
                  href="#"
                  role="menuitem"
                  target="_self"
                >
                  Second Item
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
     
    <div
      class="col-12 col-md-6"
    >
      <div
        class="card"
      >
        <header
          class="card-header"
        >
          <svg
            class="c-icon"
            role="img"
            viewBox="0 0 64 64"
            xmlns="http://www.w3.org/2000/svg"
          >
            undefined
          </svg>
           
          <strong>
             Dropdown 
          </strong>
           
          <small>
            positioning
          </small>
        </header>
         
        <div
          class="card-body"
        >
          <div>
            <div
              class="m-2 d-inline-block dropdown"
            >
              <button
                aria-expanded="false"
                aria-haspopup="true"
                class="btn dropdown-toggle btn-primary"
                type="button"
              >
                Left align
              </button>
              <!---->
              <div
                class="dropdown-menu"
              >
                <a
                  class="dropdown-item"
                  href="#"
                  role="menuitem"
                  target="_self"
                >
                  Action
                </a>
                 
                <a
                  class="dropdown-item"
                  href="#"
                  role="menuitem"
                  target="_self"
                >
                  Another action
                </a>
                 
                <a
                  class="dropdown-item"
                  href="#"
                  role="menuitem"
                  target="_self"
                >
                  Something else here
                </a>
              </div>
            </div>
             
            <div
              class="m-2 d-inline-block dropdown"
            >
              <button
                aria-expanded="false"
                aria-haspopup="true"
                class="btn dropdown-toggle btn-primary"
                type="button"
              >
                Right align
              </button>
              <!---->
              <div
                class="dropdown-menu"
              >
                <a
                  class="dropdown-item"
                  href="#"
                  role="menuitem"
                  target="_self"
                >
                  Action
                </a>
                 
                <a
                  class="dropdown-item"
                  href="#"
                  role="menuitem"
                  target="_self"
                >
                  Another action
                </a>
                 
                <a
                  class="dropdown-item"
                  href="#"
                  role="menuitem"
                  target="_self"
                >
                  Something else here
                </a>
              </div>
            </div>
          </div>
           
          <div>
            <div
              class="m-2 dropup"
            >
              <button
                aria-expanded="false"
                aria-haspopup="true"
                class="btn dropdown-toggle btn-info"
                type="button"
              >
                Drop-Up
              </button>
              <!---->
              <div
                class="dropdown-menu"
              >
                <a
                  class="dropdown-item"
                  href="#"
                  role="menuitem"
                  target="_self"
                >
                  Action
                </a>
                 
                <a
                  class="dropdown-item"
                  href="#"
                  role="menuitem"
                  target="_self"
                >
                  Another action
                </a>
                 
                <a
                  class="dropdown-item"
                  href="#"
                  role="menuitem"
                  target="_self"
                >
                  Something else here
                </a>
              </div>
            </div>
          </div>
           
          <div>
            <div
              class="m-2 dropdown"
            >
              <button
                aria-expanded="false"
                aria-haspopup="true"
                class="btn dropdown-toggle btn-secondary"
                type="button"
              >
                Offset Dropdown
              </button>
              <!---->
              <div
                class="dropdown-menu"
              >
                <a
                  class="dropdown-item"
                  href="#"
                  role="menuitem"
                  target="_self"
                >
                  Action
                </a>
                 
                <a
                  class="dropdown-item"
                  href="#"
                  role="menuitem"
                  target="_self"
                >
                  Another action
                </a>
                 
                <a
                  class="dropdown-item"
                  href="#"
                  role="menuitem"
                  target="_self"
                >
                  Something else here
                </a>
              </div>
            </div>
          </div>
           
          <div>
            <div
              class="m-2 dropdown btn-group"
            >
              <button
                class="btn btn-secondary"
              >
                Split Dropdown
              </button>
              <button
                aria-expanded="false"
                aria-haspopup="true"
                class="dropdown-toggle dropdown-toggle-split btn btn-secondary"
                type="button"
              />
              <div
                class="dropdown-menu"
              >
                <a
                  class="dropdown-item"
                  href="#"
                  role="menuitem"
                  target="_self"
                >
                  Action
                </a>
                 
                <a
                  class="dropdown-item"
                  href="#"
                  role="menuitem"
                  target="_self"
                >
                  Another action
                </a>
                 
                <a
                  class="dropdown-item"
                  href="#"
                  role="menuitem"
                  target="_self"
                >
                  Something else here...
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
   
  <div
    class="row"
  >
    <div
      class="col-12 col-md-6"
    >
      <div
        class="card"
      >
        <header
          class="card-header"
        >
          <svg
            class="c-icon"
            role="img"
            viewBox="0 0 64 64"
            xmlns="http://www.w3.org/2000/svg"
          >
            undefined
          </svg>
           
          <strong>
             Dropdown 
          </strong>
           
          <small>
            hidden caret
          </small>
        </header>
         
        <div
          class="card-body"
        >
          <div>
            <div
              class="dropdown"
            >
              <button
                aria-expanded="false"
                aria-haspopup="true"
                class="btn btn-lg btn-link"
                type="button"
              >
                
                🔍
                <span
                  class="sr-only"
                >
                  Search
                </span>
              </button>
              <!---->
              <div
                class="dropdown-menu"
              >
                 
                <a
                  class="dropdown-item"
                  href="#"
                  role="menuitem"
                  target="_self"
                >
                  Action
                </a>
                 
                <a
                  class="dropdown-item"
                  href="#"
                  role="menuitem"
                  target="_self"
                >
                  Another action
                </a>
                 
                <a
                  class="dropdown-item"
                  href="#"
                  role="menuitem"
                  target="_self"
                >
                  Something else here...
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
     
    <div
      class="col-12 col-md-6"
    >
      <div
        class="card"
      >
        <header
          class="card-header"
        >
          <svg
            class="c-icon"
            role="img"
            viewBox="0 0 64 64"
            xmlns="http://www.w3.org/2000/svg"
          >
            undefined
          </svg>
           
          <strong>
             Dropdown 
          </strong>
           
          <small>
            sizing
          </small>
        </header>
         
        <div
          class="card-body"
        >
          <div>
            <div
              class="m-2 d-inline-block dropdown"
            >
              <button
                aria-expanded="false"
                aria-haspopup="true"
                class="btn dropdown-toggle btn-lg btn-secondary"
                type="button"
              >
                Large
              </button>
              <!---->
              <div
                class="dropdown-menu"
              >
                <a
                  class="dropdown-item"
                  href="#"
                  role="menuitem"
                  target="_self"
                >
                  Action
                </a>
                 
                <a
                  class="dropdown-item"
                  href="#"
                  role="menuitem"
                  target="_self"
                >
                  Another action
                </a>
                 
                <a
                  class="dropdown-item"
                  href="#"
                  role="menuitem"
                  target="_self"
                >
                  Something else here
                </a>
              </div>
            </div>
             
            <div
              class="m-2 dropdown btn-group"
            >
              <button
                class="btn btn-lg btn-secondary"
              >
                Large Split
              </button>
              <button
                aria-expanded="false"
                aria-haspopup="true"
                class="dropdown-toggle dropdown-toggle-split btn btn-lg btn-secondary"
                type="button"
              />
              <div
                class="dropdown-menu"
              >
                <a
                  class="dropdown-item"
                  href="#"
                  role="menuitem"
                  target="_self"
                >
                  Action
                </a>
                 
                <a
                  class="dropdown-item"
                  href="#"
                  role="menuitem"
                  target="_self"
                >
                  Another action
                </a>
                 
                <a
                  class="dropdown-item"
                  href="#"
                  role="menuitem"
                  target="_self"
                >
                  Something else here...
                </a>
              </div>
            </div>
             
            <br />
             
            <div
              class="m-2 d-inline-block dropdown"
            >
              <button
                aria-expanded="false"
                aria-haspopup="true"
                class="btn dropdown-toggle btn-sm btn-secondary"
                type="button"
              >
                Small
              </button>
              <!---->
              <div
                class="dropdown-menu"
              >
                <a
                  class="dropdown-item"
                  href="#"
                  role="menuitem"
                  target="_self"
                >
                  Action
                </a>
                 
                <a
                  class="dropdown-item"
                  href="#"
                  role="menuitem"
                  target="_self"
                >
                  Another action
                </a>
                 
                <a
                  class="dropdown-item"
                  href="#"
                  role="menuitem"
                  target="_self"
                >
                  Something else here...
                </a>
              </div>
            </div>
             
            <div
              class="m-2 dropdown btn-group"
            >
              <button
                class="btn btn-sm btn-secondary"
              >
                Small Split
              </button>
              <button
                aria-expanded="false"
                aria-haspopup="true"
                class="dropdown-toggle dropdown-toggle-split btn btn-sm btn-secondary"
                type="button"
              />
              <div
                class="dropdown-menu"
              >
                <a
                  class="dropdown-item"
                  href="#"
                  role="menuitem"
                  target="_self"
                >
                  Action
                </a>
                 
                <a
                  class="dropdown-item"
                  href="#"
                  role="menuitem"
                  target="_self"
                >
                  Another action
                </a>
                 
                <a
                  class="dropdown-item"
                  href="#"
                  role="menuitem"
                  target="_self"
                >
                  Something else here...
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
   
  <div
    class="row"
  >
    <div
      class="col-12 col-md-6"
    >
      <div
        class="card"
      >
        <header
          class="card-header"
        >
          <svg
            class="c-icon"
            role="img"
            viewBox="0 0 64 64"
            xmlns="http://www.w3.org/2000/svg"
          >
            undefined
          </svg>
           
          <strong>
             Dropdown 
          </strong>
           
          <small>
            headers and accessibility
          </small>
        </header>
         
        <div
          class="card-body"
        >
          <div>
            <div
              class="m-2 dropdown"
            >
              <button
                aria-expanded="false"
                aria-haspopup="true"
                class="btn dropdown-toggle btn-primary"
                type="button"
              >
                Dropdown ARIA
              </button>
              <!---->
              <div
                class="dropdown-menu"
              >
                <div
                  role="group"
                >
                  <div
                    class="dropdown-header"
                  >
                    Groups
                  </div>
                   
                  <a
                    class="dropdown-item"
                    href="#"
                    role="menuitem"
                    target="_self"
                  >
                    Add
                  </a>
                   
                  <a
                    class="dropdown-item"
                    href="#"
                    role="menuitem"
                    target="_self"
                  >
                    Delete
                  </a>
                </div>
                 
                <div
                  role="group"
                >
                  <div
                    class="dropdown-header"
                  >
                    Users
                  </div>
                   
                  <a
                    class="dropdown-item"
                    href="#"
                    role="menuitem"
                    target="_self"
                  >
                    Add
                  </a>
                   
                  <a
                    class="dropdown-item"
                    href="#"
                    role="menuitem"
                    target="_self"
                  >
                    Delete
                  </a>
                </div>
                 
                <div
                  class="dropdown-divider"
                  role="separator"
                />
                 
                <a
                  class="dropdown-item"
                  href="#"
                  role="menuitem"
                  target="_self"
                >
                  
                Something 
                  <strong>
                    not
                  </strong>
                   associated with user
              
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
     
    <div
      class="col-12 col-md-6"
    >
      <div
        class="card"
      >
        <header
          class="card-header"
        >
          <svg
            class="c-icon"
            role="img"
            viewBox="0 0 64 64"
            xmlns="http://www.w3.org/2000/svg"
          >
            undefined
          </svg>
           
          <strong>
             Dropdown 
          </strong>
           
          <small>
            <code>
              color
            </code>
          </small>
        </header>
         
        <div
          class="card-body"
        >
          <div
            class="m-0 d-inline-block dropdown"
          >
            <button
              aria-expanded="false"
              aria-haspopup="true"
              class="btn dropdown-toggle btn-sm btn-primary"
              type="button"
            >
              Primary
            </button>
            <!---->
            <div
              class="dropdown-menu"
            >
              <a
                class="dropdown-item"
                href="#"
                role="menuitem"
                target="_self"
              >
                First Action
              </a>
               
              <a
                class="dropdown-item"
                href="#"
                role="menuitem"
                target="_self"
              >
                Second Action
              </a>
               
              <a
                class="dropdown-item"
                href="#"
                role="menuitem"
                target="_self"
              >
                Third Action
              </a>
            </div>
          </div>
           
          <div
            class="m-0 d-inline-block dropdown"
          >
            <button
              aria-expanded="false"
              aria-haspopup="true"
              class="btn dropdown-toggle btn-sm btn-secondary"
              type="button"
            >
              Secondary
            </button>
            <!---->
            <div
              class="dropdown-menu"
            >
              <a
                class="dropdown-item"
                href="#"
                role="menuitem"
                target="_self"
              >
                First Action
              </a>
               
              <a
                class="dropdown-item"
                href="#"
                role="menuitem"
                target="_self"
              >
                Second Action
              </a>
               
              <a
                class="dropdown-item"
                href="#"
                role="menuitem"
                target="_self"
              >
                Third Action
              </a>
            </div>
          </div>
           
          <div
            class="m-0 d-inline-block dropdown"
          >
            <button
              aria-expanded="false"
              aria-haspopup="true"
              class="btn dropdown-toggle btn-sm btn-success"
              type="button"
            >
              Success
            </button>
            <!---->
            <div
              class="dropdown-menu"
            >
              <a
                class="dropdown-item"
                href="#"
                role="menuitem"
                target="_self"
              >
                First Action
              </a>
               
              <a
                class="dropdown-item"
                href="#"
                role="menuitem"
                target="_self"
              >
                Second Action
              </a>
               
              <a
                class="dropdown-item"
                href="#"
                role="menuitem"
                target="_self"
              >
                Third Action
              </a>
            </div>
          </div>
           
          <div
            class="m-0 d-inline-block dropdown"
          >
            <button
              aria-expanded="false"
              aria-haspopup="true"
              class="btn dropdown-toggle btn-sm btn-warning"
              type="button"
            >
              Warning
            </button>
            <!---->
            <div
              class="dropdown-menu"
            >
              <a
                class="dropdown-item"
                href="#"
                role="menuitem"
                target="_self"
              >
                First Action
              </a>
               
              <a
                class="dropdown-item"
                href="#"
                role="menuitem"
                target="_self"
              >
                Second Action
              </a>
               
              <a
                class="dropdown-item"
                href="#"
                role="menuitem"
                target="_self"
              >
                Third Action
              </a>
            </div>
          </div>
           
          <div
            class="m-0 d-inline-block dropdown"
          >
            <button
              aria-expanded="false"
              aria-haspopup="true"
              class="btn dropdown-toggle btn-sm btn-danger"
              type="button"
            >
              Danger
            </button>
            <!---->
            <div
              class="dropdown-menu"
            >
              <a
                class="dropdown-item"
                href="#"
                role="menuitem"
                target="_self"
              >
                First Action
              </a>
               
              <a
                class="dropdown-item"
                href="#"
                role="menuitem"
                target="_self"
              >
                Second Action
              </a>
               
              <a
                class="dropdown-item"
                href="#"
                role="menuitem"
                target="_self"
              >
                Third Action
              </a>
            </div>
          </div>
           
          <div
            class="m-0 d-inline-block dropdown"
          >
            <button
              aria-expanded="false"
              aria-haspopup="true"
              class="btn dropdown-toggle btn-sm btn-info"
              type="button"
            >
              Info
            </button>
            <!---->
            <div
              class="dropdown-menu"
            >
              <a
                class="dropdown-item"
                href="#"
                role="menuitem"
                target="_self"
              >
                First Action
              </a>
               
              <a
                class="dropdown-item"
                href="#"
                role="menuitem"
                target="_self"
              >
                Second Action
              </a>
               
              <a
                class="dropdown-item"
                href="#"
                role="menuitem"
                target="_self"
              >
                Third Action
              </a>
            </div>
          </div>
           
          <div
            class="m-0 d-inline-block dropdown"
          >
            <button
              aria-expanded="false"
              aria-haspopup="true"
              class="btn dropdown-toggle btn-sm btn-light"
              type="button"
            >
              Light
            </button>
            <!---->
            <div
              class="dropdown-menu"
            >
              <a
                class="dropdown-item"
                href="#"
                role="menuitem"
                target="_self"
              >
                First Action
              </a>
               
              <a
                class="dropdown-item"
                href="#"
                role="menuitem"
                target="_self"
              >
                Second Action
              </a>
               
              <a
                class="dropdown-item"
                href="#"
                role="menuitem"
                target="_self"
              >
                Third Action
              </a>
            </div>
          </div>
           
          <div
            class="m-0 d-inline-block dropdown"
          >
            <button
              aria-expanded="false"
              aria-haspopup="true"
              class="btn dropdown-toggle btn-sm btn-dark"
              type="button"
            >
              Dark
            </button>
            <!---->
            <div
              class="dropdown-menu"
            >
              <a
                class="dropdown-item"
                href="#"
                role="menuitem"
                target="_self"
              >
                First Action
              </a>
               
              <a
                class="dropdown-item"
                href="#"
                role="menuitem"
                target="_self"
              >
                Second Action
              </a>
               
              <a
                class="dropdown-item"
                href="#"
                role="menuitem"
                target="_self"
              >
                Third Action
              </a>
            </div>
          </div>
           
          <div
            class="m-0 d-inline-block dropdown"
          >
            <button
              aria-expanded="false"
              aria-haspopup="true"
              class="btn dropdown-toggle btn-sm btn-link"
              type="button"
            >
              Link
            </button>
            <!---->
            <div
              class="dropdown-menu"
            >
              <a
                class="dropdown-item"
                href="#"
                role="menuitem"
                target="_self"
              >
                First Action
              </a>
               
              <a
                class="dropdown-item"
                href="#"
                role="menuitem"
                target="_self"
              >
                Second Action
              </a>
               
              <a
                class="dropdown-item"
                href="#"
                role="menuitem"
                target="_self"
              >
                Third Action
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;