Getting Started
Color
Icon
Text
Basic Grid
Flex Grid
Media queries
Button
Button Group
Dropdown
Switch
Toggle
Dialog
Fieldset
Field
Inplaceeditor
Input Field
Radio Button
Checkbox
Emoji
Tokeninput
Numberinput
Textarea
Upload
Select
Multiselect
Daterange
Calendar
Slider
Criteria
Datepicker
Datetimepicker
Colorpicker
Toolbox
List
Datagrid
Table
Label
Legend
Charts
Funnelchart
Ring
Compare
Alert
Notice
Notification
Progress
Spinner
Validator
Tooltip
Tab
Vertical tab
Accordion
Helper Link
Navigation Bar
Pagination
Steps
Box
Separator
Card
Heading
Overlay
Device Display
Snack Bar
Empty State
Dashboard
Message Editing
Overview Table
Scheduling
Steps-guideline
Upsell Page
Card Grid
Dashboard Page
Form
Horizontal Tab Box
Two Panel Box
Vertical Tab Box
Utilities
Numeric
Time
Iframe Loader

Navigation bar

The Navigation bar is the primary method for users to navigate throughout the app and open specific services.

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

Default

Copy Pug
Copy HTML
Show code
Hide code

<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 class="e-topnav__mobilemenu" id="e-topnav__mobilemenu" type="checkbox">
    <nav class="e-menu">
      <ul class="e-menu__list">
        <li class="e-menu__item">
          <a class="e-menu__name" href="#0">
            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 class="e-menu__name e-menu__name-child" href="#0">
                  Forms
                </a>
              </li>
              <li class="e-menu__item e-menu__item-child">
                <a class="e-menu__name e-menu__name-child" href="#0">
                  Settings
                </a>
              </li>
            </ul>
          </div>
        </li>
      </ul>
    </nav>
    <label class="e-hamburger" for="e-topnav__mobilemenu">
      <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 class="e-dropdown__item" href="#0">
                <e-icon icon="e-profile" type="table"></e-icon>
                 My Profile
              </a>
              <a class="e-dropdown__item" href="#0">
                <e-icon icon="template" type="table"></e-icon>
                 Switch to old UI
              </a>
              <a class="e-dropdown__item" href="#0">
                <e-icon icon="life-ring" type="table"></e-icon>
                 Online Help
              </a>
              <a class="e-dropdown__item" href="#0">
                <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 class="e-select" name="subject">
                    <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 class="e-input" type="text" name="needle" placeholder="Search for..." value autofocus>
                </div>
                <button class="e-btn e-btn-primary" type="submit" title="Search">
                  <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 class="active" id="notification-center-badge">
            <e-icon icon="bell"></e-icon>
          </span>
          <div class="active" id="notification-center-badge-status">
            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 class="e-topnav__mobilemenu" id="e-topnav__mobilemenu" type="checkbox"><nav class="e-menu"><ul class="e-menu__list"><li class="e-menu__item"><a class="e-menu__name" href="#0">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 class="e-menu__name e-menu__name-child" href="#0">Forms</a></li><li class="e-menu__item e-menu__item-child"><a class="e-menu__name e-menu__name-child" href="#0">Settings</a></li></ul></div></li></ul></nav><label class="e-hamburger" for="e-topnav__mobilemenu"><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 class="e-dropdown__item" href="#0"><e-icon icon="e-profile" type="table"></e-icon> My Profile</a><a class="e-dropdown__item" href="#0"><e-icon icon="template" type="table"></e-icon> Switch to old UI</a><a class="e-dropdown__item" href="#0"><e-icon icon="life-ring" type="table"></e-icon> Online Help</a><a class="e-dropdown__item" href="#0"><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 class="e-select" name="subject"><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 class="e-input" type="text" name="needle" placeholder="Search for..." value="" autofocus=""></div><button class="e-btn e-btn-primary" type="submit" title="Search"><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 class="active" id="notification-center-badge"><e-icon icon="bell"></e-icon></span><div class="active" id="notification-center-badge-status">6</div></div></div></div></div></div>

sz_kenedi_trunk_int - admin

Tuesday, November 17 12:54 (GMT+1:00)
My Profile Switch to old UI Online Help Log Out

6

Navigation bar

The Navigation bar is the primary method for users to navigate throughout the app and open specific services.

Structure

Navigation bar consists of:

  1. Logo
  2. Menu items
  3. Submenu items
  4. Account menu

  5. Functions

    Additional design attributes:

  6. Show submenu items on hovering menu items

  7. Provide clickable submenu items
  8. Menu items shouldn't be clickable, as these are groups of items
  9. The active menu item should be clearly marked

Best practices

Navigation bar should:

  • Provide access to all services throughout the app
  • Group submenu items into menu items according to the user's workflow