Navigation bar

Default

6
<div class="e-topnav">
  <div class="e-topnav__container">
    <div class="e-topnav__logo e-topnav__logo-b2c">
      <svg>
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#e-logo"></use>
      </svg>
    </div>
    <input id="e-topnav__mobilemenu" type="checkbox" class="e-topnav__mobilemenu">
    <nav class="e-menu">
      <ul class="e-menu__list">
        <li class="e-menu__item">
          <a href="#0" class="e-menu__name">
            Dashboard
          </a>
        </li>
        <li class="e-menu__item e-menu__item-active">
          <span class="e-menu__name">
            Forms
          </span>
          <div class="e-menu__drop">
            <ul class="e-menu__list e-menu__list-child">
              <li class="e-menu__item e-menu__item-child">
                <a href="#0" class="e-menu__name e-menu__name-child">
                  Forms
                </a>
              </li>
              <li class="e-menu__item e-menu__item-child">
                <a href="#0" class="e-menu__name e-menu__name-child">
                  Settings
                </a>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </nav>
    <label for="e-topnav__mobilemenu" class="e-hamburger">
      <span class="e-hamburger__line"></span>
    </label>
    <div class="e-iconmenu">
      <div class="e-iconmenu__item">
        <e-dropdown data-markup-class="e-btn e-btn-customerinfo e-btn-dropdown" data-markup-content="sz_kenedi_trunk_int">
          <div class="e-dropdown__content">
            <div class="e-iconmenu__profile">
              <div class="e-iconmenu__profile__header">
                <h3>
                  <a href="#0">
                    sz_kenedi_trunk_int - admin
                  </a>
                </h3>
                <div class="e-iconmenu__profile__time">
                  <span>
                    Tuesday, November 17 12:54 (GMT+1:00)
                  </span>
                </div>
              </div>
              <a href="#0" class="e-dropdown__item">
                <e-icon icon="e-profile" type="table"></e-icon>
                 My Profile
              </a>
              <a href="#0" class="e-dropdown__item">
                <e-icon icon="template" type="table"></e-icon>
                 Switch to old UI
              </a>
              <a href="#0" class="e-dropdown__item">
                <e-icon icon="life-ring" type="table"></e-icon>
                 Online Help
              </a>
              <a href="#0" class="e-dropdown__item">
                <e-icon icon="e-signout" type="table"></e-icon>
                 Log Out
              </a>
            </div>
          </div>
        </e-dropdown>
      </div>
      <div class="e-iconmenu__item">
        <e-dropdown data-markup-class="e-iconmenu__name" data-markup-content="&lt;svg class='e-icon e-icon-search'&gt;&lt;use xlink:href='#search'&gt;&lt;/use&gt;&lt;/svg&gt;">
          <div class="e-dropdown__content">
            <div class="e-search">
              <h3>
                <label for="js-function-search-query">
                  Search
                </label>
              </h3>
              <form method="get" name="workformsearch">
                <div class="e-field">
                  <select name="subject" class="e-select">
                    <option value="1//1">
                      in contacts by first name
                    </option>
                    <option value="1//2">
                      in contacts by last name
                    </option>
                    <option value="1//3">
                      in contacts by email
                    </option>
                    <option value="2">
                      in email campaigns
                    </option>
                    <option value="3">
                      in registration forms
                    </option>
                    <option value="4">
                      in segments
                    </option>
                    <option value="5">
                      in lists
                    </option>
                    <option value="6">
                      in bounces
                    </option>
                    <option value="7">
                      in email analysis
                    </option>
                  </select>
                </div>
                <div class="e-field">
                  <input type="text" name="needle" placeholder="Search for..." value autofocus class="e-input">
                </div>
                <button type="submit" title="Search" class="e-btn e-btn-primary">
                  <e-icon icon="search" color="white"></e-icon>
                  Search
                </button>
              </form>
            </div>
          </div>
        </e-dropdown>
      </div>
      <div class="e-iconmenu__item">
        <div class="e-iconmenu__name">
          <span id="notification-center-badge" class="active">
            <e-icon icon="bell"></e-icon>
          </span>
          <div id="notification-center-badge-status" class="active">
            6
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

                        <div class="e-topnav">
                          <div class="e-topnav__container">
                            <div class="e-topnav__logo e-topnav__logo-b2c">
                              <svg>
                                <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#e-logo"></use>
                              </svg>
                            </div>
                            <input id="e-topnav__mobilemenu" type="checkbox" class="e-topnav__mobilemenu">
                            <nav class="e-menu">
                              <ul class="e-menu__list">
                                <li class="e-menu__item"><a href="#0" class="e-menu__name">Dashboard</a></li>
                                <li class="e-menu__item e-menu__item-active"><span class="e-menu__name">Forms</span>
                                  <div class="e-menu__drop">
                                    <ul class="e-menu__list e-menu__list-child">
                                      <li class="e-menu__item e-menu__item-child"><a href="#0" class="e-menu__name e-menu__name-child">Forms</a></li>
                                      <li class="e-menu__item e-menu__item-child"><a href="#0" class="e-menu__name e-menu__name-child">Settings</a></li>
                                    </ul>
                                  </div>
                                </li>
                              </ul>
                            </nav>
                            <label for="e-topnav__mobilemenu" class="e-hamburger"><span class="e-hamburger__line"></span></label>
                            <div class="e-iconmenu">
                              <div class="e-iconmenu__item">
                                <e-dropdown data-markup-class="e-btn e-btn-customerinfo e-btn-dropdown" data-markup-content="sz_kenedi_trunk_int">
                                  <div class="e-dropdown__content">
                                    <div class="e-iconmenu__profile">
                                      <div class="e-iconmenu__profile__header">
                                        <h3><a href="#0">sz_kenedi_trunk_int - admin</a></h3>
                                        <div class="e-iconmenu__profile__time"><span>Tuesday, November 17 12:54 (GMT+1:00)</span></div>
                                      </div><a href="#0" class="e-dropdown__item">
                                        <e-icon icon="e-profile" type="table"></e-icon> My Profile</a><a href="#0" class="e-dropdown__item">
                                        <e-icon icon="template" type="table"></e-icon> Switch to old UI</a><a href="#0" class="e-dropdown__item">
                                        <e-icon icon="life-ring" type="table"></e-icon> Online Help</a><a href="#0" class="e-dropdown__item">
                                        <e-icon icon="e-signout" type="table"></e-icon> Log Out</a>
                                    </div>
                                  </div>
                                </e-dropdown>
                              </div>
                              <div class="e-iconmenu__item">
                                <e-dropdown data-markup-class="e-iconmenu__name" data-markup-content="&lt;svg class='e-icon e-icon-search'&gt;&lt;use xlink:href='#search'&gt;&lt;/use&gt;&lt;/svg&gt;">
                                  <div class="e-dropdown__content">
                                    <div class="e-search">
                                      <h3>
                                        <label for="js-function-search-query">Search</label>
                                      </h3>
                                      <form method="get" name="workformsearch">
                                        <div class="e-field">
                                          <select name="subject" class="e-select">
                                            <option value="1//1">in contacts by first name</option>
                                            <option value="1//2">in contacts by last name</option>
                                            <option value="1//3">in contacts by email</option>
                                            <option value="2">in email campaigns</option>
                                            <option value="3">in registration forms</option>
                                            <option value="4">in segments</option>
                                            <option value="5">in lists</option>
                                            <option value="6">in bounces</option>
                                            <option value="7">in email analysis</option>
                                          </select>
                                        </div>
                                        <div class="e-field">
                                          <input type="text" name="needle" placeholder="Search for..." value="" autofocus="" class="e-input">
                                        </div>
                                        <button type="submit" title="Search" class="e-btn e-btn-primary">
                                          <e-icon icon="search" color="white"></e-icon>Search
                                        </button>
                                      </form>
                                    </div>
                                  </div>
                                </e-dropdown>
                              </div>
                              <div class="e-iconmenu__item">
                                <div class="e-iconmenu__name"><span id="notification-center-badge" class="active">
                                    <e-icon icon="bell"></e-icon></span>
                                  <div id="notification-center-badge-status" class="active">6</div>
                                </div>
                              </div>
                            </div>
                          </div>
                        </div>

e-topnav-fixed puts the navigation to fixed position.

Last update

Message refactor(icon): use new component
Date:
()
Committer: David Gyenes
Component history