Examples
<link rel="stylesheet" type="text/css" href="https://client-version.cf.emarsys.net/ui/latest/css/navigation.css">
<link rel="stylesheet" type="text/css" href="https://client-version.cf.emarsys.net/ui/latest/css/services/contextual-help.css">
<script src="https://client-version.cf.emarsys.net/ui/latest/js/navigation.js"></script>
<e-shellbar class="e-shellbar">
<header class="e-shellbar__banner" role="banner" aria-hidden="true"><img class="e-shellbar__banner_logo" src="https://assets.emarsys.net/ui/static/images/sap-logo.svg"><a class="e-shellbar__banner_text" href="#">Emarsys</a></header>
<nav class="e-shellbar__menu" aria-label="Actions menu">
<ul class="e-shellbar__menu_list">
<li class="e-shellbar__menu_list_item">
<e-navigation-search-button class="e-navigation-search-button" splitted-quick-search></e-navigation-search-button>
</li>
<li class="e-shellbar__menu_list_item">
<!-- Contents of the Profile Menu is set from JavaScript -->
<e-navigation-profile-button class="e-navigation-profile-button" session-id="session_id"
customer-name="lifestyle_de" customer-id="456" admin-name="admin" account-id="11263204"
timezone="GMT+2" timezone-offset="3"></e-navigation-profile-button>
</li>
</ul>
</nav>
</e-shellbar>
<!-- Contents of the Navigation Menu here is set from JavaScript -->
<e-navigation class="e-navigation"></e-navigation>
<div class="e-layout">
<header class="e-layout__header">
<h1 class="e-layout__title">Page Title Goes Here</h1>
<div class="e-layout__actions">
<button type="button" class="e-layout__action e-btn">Button</button>
<button type="button" class="e-layout__action e-btn e-btn-primary">Primary Action</button>
</div>
</header>
<main class="e-layout__content">
<section class="e-layout__section e-padding-m">
Hello World!
</section>
</main>
</div><link rel="stylesheet" type="text/css" href="https://client-version.cf.emarsys.net/ui/latest/css/navigation.css">
<link rel="stylesheet" type="text/css" href="https://client-version.cf.emarsys.net/ui/latest/css/services/contextual-help.css">
<script src="https://client-version.cf.emarsys.net/ui/latest/js/navigation.js"></script>
<e-shellbar class="e-shellbar">
<header class="e-shellbar__banner" role="banner" aria-hidden="true"><img class="e-shellbar__banner_logo" src="https://assets.emarsys.net/ui/static/images/sap-logo.svg"><a class="e-shellbar__banner_text" href="#">Emarsys</a></header>
<nav class="e-shellbar__menu" aria-label="Actions menu">
<ul class="e-shellbar__menu_list">
<li class="e-shellbar__menu_list_item">
<e-navigation-search-button class="e-navigation-search-button" splitted-quick-search></e-navigation-search-button>
</li>
<li class="e-shellbar__menu_list_item">
<!-- Contents of the Profile Menu is set from JavaScript -->
<e-navigation-profile-button class="e-navigation-profile-button" session-id="session_id"
customer-name="lifestyle_de" customer-id="456" admin-name="admin" account-id="11263204"
timezone="GMT+2" timezone-offset="3"></e-navigation-profile-button>
</li>
</ul>
</nav>
</e-shellbar>
<!-- Contents of the Navigation Menu here is set from JavaScript -->
<e-navigation class="e-navigation"></e-navigation>
<div class="e-layout">
<header class="e-layout__header">
<h1 class="e-layout__title">Page Title Goes Here</h1>
<div class="e-layout__actions">
<button type="button" class="e-layout__action e-btn">Button</button>
<button type="button" class="e-layout__action e-btn e-btn-primary">Primary Action</button>
</div>
</header>
<main class="e-layout__content">
<section class="e-layout__section e-padding-m">
Hello World!
</section>
</main>
</div>const navigationMenuData = [
{
"submenu":[
{
"id":"strategic_dashboard_integration",
"group":"Industry Solutions",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Strategic Dashboard",
"active":false
},
{
"id":"industry_tactics",
"group":"Industry Solutions",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Tactics",
"active":false
},
{
"id":"loyalsys_demo_dashboard",
"group":"Loyalty Solutions",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Loyalty Dashboard",
"active":false
},
{
"id":"loyalsys_demo_actions",
"group":"Loyalty Solutions",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Actions",
"active":false
},
{
"id":"loyalsys_demo_rewards",
"group":"Loyalty Solutions",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Rewards",
"active":false
},
{
"id":"loyalsys_demo_tiers",
"group":"Loyalty Solutions",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Tiers & Benefits",
"active":false
},
{
"id":"loyalsys_demo_external_loyalty_events",
"group":"Loyalty Solutions",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"External Loyalty Events",
"active":false
},
{
"id":"loyalsys_demo_member_profiles",
"group":"Loyalty Solutions",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Member Profiles",
"active":false
},
{
"id":"loyalsys_demo_plan",
"group":"Loyalty Solutions",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Loyalty Management",
"active":false
},
{
"id":"loyalsys_upsell",
"active_matcher":"",
"url":"",
"target":null,
"type":"cross-sell",
"icon_id":null,
"text":"Loyalty",
"active":false
},
{
"id":"inapp_campaigns",
"group":"Mobile Solutions",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"In-app Messaging",
"active":false
},
{
"id":"enhance_page_upsell",
"active_matcher":"",
"url":"",
"target":null,
"type":"upsell",
"icon_id":null,
"text":"Emarsys Upgrades",
"active":false
}
],
"id":"featured_new_main",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":"nav-featured",
"text":"Featured",
"active":false
},
{
"submenu":[
{
"id":"ai_value_measurement",
"group":"Strategic Analytics",
"active_matcher":"sidebar",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Design System Example",
"active":false
},
{
"id":"main_dashboard",
"group":"Strategic Analytics",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Main Dashboard",
"active":false
},
{
"id":"strategic_dashboard_integration",
"group":"Strategic Analytics",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Strategic Dashboard",
"active":false
},
{
"id":"si_customer_lifecycle",
"group":"Strategic Analytics",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Customer Lifecycle",
"active":false
},
{
"id":"si_product_affinity",
"group":"Strategic Analytics",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Product Affinity",
"active":false
},
{
"id":"si_impact",
"group":"Strategic Analytics",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Impact",
"active":false
},
{
"id":"revenue_analytics_alternative",
"group":"Strategic Analytics",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Revenue Analytics",
"active":false
},
{
"id":"analysis_emails",
"group":"Email Analytics",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Emails",
"active":false
},
{
"id":"trends",
"group":"Email Analytics",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Trends",
"active":false
},
{
"id":"mobile_reporting",
"group":"Email Analytics",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Mobile Reporting",
"active":false
},
{
"id":"analysis_launch_time_advisor",
"group":"Email Analytics",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Launch Time Advisor",
"active":false
},
{
"id":"analysis_registrations",
"group":"Contact Analytics",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Registrations",
"active":false
},
{
"id":"trust_channels",
"group":"Predictive Analytics",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Trust - Channels",
"active":false
},
{
"id":"trust_revenue",
"group":"Predictive Analytics",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Trust - Revenue",
"active":false
},
{
"id":"audience_intelligence_channels",
"group":"Predictive Analytics",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Audience intelligence - Channels",
"active":false
},
{
"id":"audience_intelligence_revenue",
"group":"Predictive Analytics",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Audience intelligence - Revenue",
"active":false
},
{
"id":"revenue_intelligence",
"group":"Predictive Analytics",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Revenue intelligence",
"active":false
}
],
"id":"analytics_new_main",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":"nav-analytics",
"text":"Analytics",
"active":false
},
{
"id":"automation_new_main",
"submenu":[
{
"id":"industry_tactics",
"group":"Turnkey",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Tactics",
"active":false
},
{
"id":"automation",
"group":"Programs",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Automation",
"active":false
}
],
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":"nav-automation",
"text":"Automation",
"active":false
},
{
"submenu":[
{
"id":"personalization_0",
"group":"Core",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Personalization",
"active":false
},
{
"id":"personalization_test_data",
"group":"Core",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Test content",
"active":false
},
{
"id":"product_segments",
"group":"Core",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Personalization Rules",
"active":false
},
{
"id":"forms_submenu",
"group":"Core",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Forms",
"active":false
},
{
"id":"mediadb_old",
"group":"Core",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Media Database",
"active":false
},
{
"id":"voucher_management",
"group":"Core",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Voucher Management",
"active":false
},
{
"id":"templates",
"group":"Core",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Block-Based Templates",
"active":false
},
{
"id":"email_archive",
"group":"Core",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Email Archive",
"active":false
},
{
"id":"predict_dashboard",
"group":"Predict",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Dashboard",
"active":false
},
{
"id":"predict_email_recommender",
"group":"Predict",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Email Recommender",
"active":false
},
{
"id":"predict_website_recommender",
"group":"Predict",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Web Recommender",
"active":false
},
{
"id":"predict_discovery",
"group":"Predict",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Discovery",
"active":false
},
{
"id":"external-content",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"External Content",
"active":false
}
],
"id":"content_new_main",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":"nav-content",
"text":"Content",
"active":false
},
{
"submenu":[
{
"id":"email_campaigns",
"group":"Email",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Email Campaigns",
"active":false
},
{
"id":"triggered_email",
"group":"Email",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Triggered Email",
"active":false
},
{
"id":"mobile_channel",
"group":"Mobile",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Mobile Engage",
"active":false
},
{
"id":"sms_channel",
"group":"Mobile",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"SMS Campaigns",
"active":false
},
{
"id":"web_push",
"group":"Web",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Web Push",
"active":false
},
{
"id":"web_channel",
"group":"Web",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Web Channel",
"active":false
},
{
"id":"browser_notification",
"group":"Web",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Browser Notifications",
"active":false
},
{
"id":"crm_ads",
"group":"Other",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"CRM Ads",
"active":false
},
{
"id":"optilyz",
"group":"Other",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Direct Mail",
"active":false
}
],
"id":"channels_new_main",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":"nav-channels",
"text":"Channels",
"active":false
},
{
"id":"contacts_new_main",
"submenu":[
{
"id":"segments",
"group":"Audience",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Segments",
"active":false
},
{
"id":"combined_segments",
"group":"Audience",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Combined Segments",
"active":false
},
{
"id":"contact_lists",
"group":"Audience",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Contact Lists",
"active":false
},
{
"id":"contacts_data_import",
"group":"Contact Data",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Data Import",
"active":false
},
{
"id":"contacts_data_export",
"group":"Contact Data",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Data Export",
"active":false
},
{
"id":"add_contact",
"group":"Contact Data",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Add Contact",
"active":false
},
{
"id":"delete_contacts",
"group":"Contact Data",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Delete Contacts",
"active":false
},
{
"id":"duplication_handling",
"group":"Contact Data",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Duplication Handling",
"active":false
},
{
"id":"bounce_management",
"group":"Participation settings",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Bounce Management",
"active":false
},
{
"id":"reply_management",
"group":"Participation settings",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Reply Management",
"active":false
},
{
"id":"internal_blacklist",
"group":"Participation settings",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Internal Blocklist",
"active":false
},
{
"id":"frequency_cap",
"group":"Participation settings",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Frequency Cap",
"active":false
}
],
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":"nav-contacts",
"text":"Contacts",
"active":false
},
{
"submenu":[
{
"id":"field_editor",
"group":"Data management",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Field Editor",
"active":false
},
{
"id":"external_event",
"group":"Data management",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"External Event",
"active":false
},
{
"id":"forms_settings",
"group":"Data management",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Form Settings",
"active":false
},
{
"id":"si_data_quality",
"group":"Data management",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Smart Insight Data Quality",
"active":false
},
{
"id":"si_customer_registry_settings",
"group":"Data management",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Smart Insight Settings",
"active":false
},
{
"id":"link_categories",
"group":"Data management",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Link Categories",
"active":false
},
{
"id":"revenue_attributor",
"group":"Data management",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Revenue Attribution",
"active":false
},
{
"id":"data_sources",
"group":"Data management",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Predict Data Sources",
"active":false
},
{
"id":"streamshark",
"group":"Data management",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Stream Inspector",
"active":false
}
],
"id":"management_new_main",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":"nav-management",
"text":"Management",
"active":false
},
{
"submenu":[
{
"id":"enhance_page",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Emarsys Upgrades",
"active":false
},
{
"id":"campaigns_calendar",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Campaigns Calendar",
"active":false
},
{
"id":"segment_com",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Segment.com",
"active":false
},
{
"id":"open_time_content",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Open Time Content",
"active":false
},
{
"id":"aim_coupon_pools",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Omnichannel Voucher",
"active":false
},
{
"id":"rds",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Relational Data",
"active":false
},
{
"id":"loyalsys_demo_dashboard",
"group":"Loyalty",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Loyalty Dashboard",
"active":false
},
{
"id":"loyalsys_demo_actions",
"group":"Loyalty",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Actions",
"active":false
},
{
"id":"loyalsys_demo_rewards",
"group":"Loyalty",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Rewards",
"active":false
},
{
"id":"loyalsys_demo_tiers",
"group":"Loyalty",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Tiers & Benefits",
"active":false
},
{
"id":"loyalsys_demo_external_loyalty_events",
"group":"Loyalty",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"External Loyalty Events",
"active":false
},
{
"id":"loyalsys_demo_member_profiles",
"group":"Loyalty",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Member Profiles",
"active":false
},
{
"id":"loyalsys_demo_plan",
"group":"Loyalty",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Loyalty Management",
"active":false
},
{
"id":"loyalsys_upsell",
"active_matcher":"",
"url":"",
"target":null,
"type":"cross-sell",
"icon_id":null,
"text":"Loyalty",
"active":false
},
{
"id":"messengerpeople",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"MessengerPeople",
"active":false
},
{
"id":"zendesk",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Zendesk",
"active":false
},
{
"id":"push-node",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Push Node",
"active":false
},
{
"id":"ac_set_value",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Set Value Node",
"active":false
},
{
"id":"conversion_sharing",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Conversion Sharing",
"active":false
},
{
"id":"vce_content_automation",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"VCE Product Search",
"active":false
},
{
"id":"barcode_configurator",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":null,
"text":"Barcode Configurator",
"active":false
}
],
"id":"addons",
"active_matcher":"",
"url":"",
"target":null,
"type":"menu_item",
"icon_id":"nav-addons",
"text":"Add-ons",
"active":false
}
];
const profileMenuData = [
{
"id": "profile-my_profile",
"active_matcher": "",
"url": "https://example.com",
"target": null,
"type": "menu_item",
"icon_id": null,
"text": "My profile",
"active": false
},
{
"id": "billing_dashboard",
"active_matcher": "",
"url": "https://example.com",
"target": null,
"type": "menu_item",
"icon_id": null,
"text": "Billing & Resources",
"active": false
},
{
"id": "profile-share_account",
"active_matcher": "",
"url": "#",
"target": null,
"type": "menu_item",
"icon_id": null,
"text": "Share Account Access",
"active": false
},
{
"id": "profile-share_this_page",
"active_matcher": "",
"url": "https://test.com",
"target": "_blank",
"type": "menu_item",
"icon_id": null,
"text": "Share This Page",
"active": false
},
{
"id": "profile-online_help",
"active_matcher": "",
"url": "https://example.com",
"target": "_blank",
"type": "menu_item",
"icon_id": null,
"text": "Online Help",
"active": false
},
{
"id": "profile-logout",
"active_matcher": "",
"url": "https://example.com",
"target": null,
"type": "menu_item",
"icon_id": null,
"text": "Log Out",
"active": false
},
{
"id": "profile-product_pioneer_home",
"active_matcher": "",
"url": "https://example.com",
"target": null,
"type": "menu_item",
"icon_id": null,
"text": "Product Pioneer Home",
"active": false,
"group": "Product Pioneer"
}
];
const profileMenuSubaccounts = [
{
"id": "123",
"text": "customer01"
},
{
"id": "456",
"text": "customer02"
},
{
"id": "789",
"text": "customer03"
}
];
const navigationMenu = document.querySelector('e-navigation');
navigationMenu.menu = navigationMenuData;
const profileMenu = document.querySelector('e-navigation-profile-button');
profileMenu.menu = profileMenuData;
profileMenu.subaccounts = profileMenuSubaccounts;<link rel="stylesheet" type="text/css" href="https://client-version.cf.emarsys.net/ui/latest/css/navigation.css">
<script src="https://client-version.cf.emarsys.net/ui/latest/js/navigation.js"></script>
<e-shellbar class="e-shellbar">
<header class="e-shellbar__banner" role="banner" aria-hidden="true"><img class="e-shellbar__banner_logo" src="https://assets.emarsys.net/ui/static/images/sap-logo.svg"><a class="e-shellbar__banner_text" href="#">Emarsys</a></header>
<nav class="e-shellbar__menu" aria-label="Actions menu">
<ul class="e-shellbar__menu_list">
<li class="e-shellbar__menu_list_item">
<e-navigation-search-button class="e-navigation-search-button" splitted-quick-search></e-navigation-search-button>
</li>
<li class="e-shellbar__menu_list_item">
<nc-navigation-button class="e-navigation-notification-center-button"></nc-navigation-button>
</li>
<li class="e-shellbar__menu_list_item">
<e-navigation-profile-button class="e-navigation-profile-button"
subaccounts='[
{"id": "123","text": "customer01"},
{"id": "456","text": "customer02"},
{"id": "789","text": "customer03"}
]'
menu='[
{"id":"profile-my_profile","active_matcher":"","url":"https://example.com","target":null,"type":"menu_item","icon_id":null,"text":"My profile","active":false},
{"id":"billing_dashboard","active_matcher":"","url":"https://example.com","target":null,"type":"menu_item","icon_id":null,"text":"Billing & Resources","active":false},
{"id":"profile-share_account","active_matcher":"","url":"#","target":null,"type":"menu_item","icon_id":null,"text":"Share Account Access","active":false},
{"id":"profile-share_this_page","active_matcher":"","url":"https://example.com","target":"_blank","type":"menu_item","icon_id":null,"text":"Share This Page","active":false},
{"id":"profile-online_help","active_matcher":"","url":"https://example.com","target":"_blank","type":"menu_item","icon_id":null,"text":"Online Help","active":false},
{"id":"profile-logout","active_matcher":"","url":"https://example.com","target":null,"type":"menu_item","icon_id":null,"text":"Log Out","active":false},
{"id":"profile-product_pioneer_home","active_matcher":"","url":"https://example.com","target":null,"type":"menu_item","icon_id":null,"text":"Product Pioneer Home","active":false,"group":"Product Pioneer"}
]'
session-id="session_id" customer-name="lifestyle_de" customer-id="456" admin-name="admin" account-id="11263204" timezone="GMT+2" timezone-offset="3"
></e-navigation-profile-button>
</li>
</ul>
</nav>
</e-shellbar>
<e-navigation class="e-navigation"
menu='[
{"id":"content_new_main","url":"","type":"menu_item","icon_id":"nav-content","text":"Category 1","submenu":[
{"id":"id_01_01","group":"Item Group 01","url":"","type":"menu_item","icon_id":null,"text":"Menu Item 1"},
{"id":"id_01_02","group":"Item Group 01","url":"","type":"menu_item","icon_id":null,"text":"Menu Item 2"},
{"id":"id_01_03","group":"Item Group 01","url":"","type":"menu_item","icon_id":null,"text":"Menu Item 3"}
]},
{"id":"analytics_new_main","url":"","type":"menu_item","icon_id":"nav-analytics","text":"Category 2","submenu":[
{"id":"id_02_01","group":"Item Group 02","url":"","type":"menu_item","icon_id":null,"text":"Menu Item 4"},
{"id":"id_02_02","group":"Item Group 02","url":"","type":"menu_item","icon_id":null,"text":"Menu Item 5"}
]}
]'
></e-navigation>
<div class="e-layout">
<header class="e-layout__header">
<h1 class="e-layout__title">Page Title Goes Here</h1>
<div class="e-layout__actions">
<button type="button" class="e-layout__action e-btn">Button</button>
<button type="button" class="e-layout__action e-btn e-btn-primary">Primary Action</button>
</div>
</header>
<main class="e-layout__content">
<section class="e-layout__section e-padding-m">
Hello World!
</section>
</main>
</div><link rel="stylesheet" type="text/css" href="https://client-version.cf.emarsys.net/ui/latest/css/navigation.css">
<script src="https://client-version.cf.emarsys.net/ui/latest/js/navigation.js"></script>
<e-shellbar class="e-shellbar">
<header class="e-shellbar__banner" role="banner" aria-hidden="true"><img class="e-shellbar__banner_logo" src="https://assets.emarsys.net/ui/static/images/sap-logo.svg"><a class="e-shellbar__banner_text" href="#">Emarsys</a></header>
<nav class="e-shellbar__menu" aria-label="Actions menu">
<ul class="e-shellbar__menu_list">
<li class="e-shellbar__menu_list_item">
<e-navigation-search-button class="e-navigation-search-button" splitted-quick-search></e-navigation-search-button>
</li>
<li class="e-shellbar__menu_list_item">
<nc-navigation-button class="e-navigation-notification-center-button"></nc-navigation-button>
</li>
<li class="e-shellbar__menu_list_item">
<e-navigation-profile-button class="e-navigation-profile-button"
subaccounts='[
{"id": "123","text": "customer01"},
{"id": "456","text": "customer02"},
{"id": "789","text": "customer03"}
]'
menu='[
{"id":"profile-my_profile","active_matcher":"","url":"https://example.com","target":null,"type":"menu_item","icon_id":null,"text":"My profile","active":false},
{"id":"billing_dashboard","active_matcher":"","url":"https://example.com","target":null,"type":"menu_item","icon_id":null,"text":"Billing & Resources","active":false},
{"id":"profile-share_account","active_matcher":"","url":"#","target":null,"type":"menu_item","icon_id":null,"text":"Share Account Access","active":false},
{"id":"profile-share_this_page","active_matcher":"","url":"https://example.com","target":"_blank","type":"menu_item","icon_id":null,"text":"Share This Page","active":false},
{"id":"profile-online_help","active_matcher":"","url":"https://example.com","target":"_blank","type":"menu_item","icon_id":null,"text":"Online Help","active":false},
{"id":"profile-logout","active_matcher":"","url":"https://example.com","target":null,"type":"menu_item","icon_id":null,"text":"Log Out","active":false},
{"id":"profile-product_pioneer_home","active_matcher":"","url":"https://example.com","target":null,"type":"menu_item","icon_id":null,"text":"Product Pioneer Home","active":false,"group":"Product Pioneer"}
]'
session-id="session_id" customer-name="lifestyle_de" customer-id="456" admin-name="admin" account-id="11263204" timezone="GMT+2" timezone-offset="3"
></e-navigation-profile-button>
</li>
</ul>
</nav>
</e-shellbar>
<e-navigation class="e-navigation"
menu='[
{"id":"content_new_main","url":"","type":"menu_item","icon_id":"nav-content","text":"Category 1","submenu":[
{"id":"id_01_01","group":"Item Group 01","url":"","type":"menu_item","icon_id":null,"text":"Menu Item 1"},
{"id":"id_01_02","group":"Item Group 01","url":"","type":"menu_item","icon_id":null,"text":"Menu Item 2"},
{"id":"id_01_03","group":"Item Group 01","url":"","type":"menu_item","icon_id":null,"text":"Menu Item 3"}
]},
{"id":"analytics_new_main","url":"","type":"menu_item","icon_id":"nav-analytics","text":"Category 2","submenu":[
{"id":"id_02_01","group":"Item Group 02","url":"","type":"menu_item","icon_id":null,"text":"Menu Item 4"},
{"id":"id_02_02","group":"Item Group 02","url":"","type":"menu_item","icon_id":null,"text":"Menu Item 5"}
]}
]'
></e-navigation>
<div class="e-layout">
<header class="e-layout__header">
<h1 class="e-layout__title">Page Title Goes Here</h1>
<div class="e-layout__actions">
<button type="button" class="e-layout__action e-btn">Button</button>
<button type="button" class="e-layout__action e-btn e-btn-primary">Primary Action</button>
</div>
</header>
<main class="e-layout__content">
<section class="e-layout__section e-padding-m">
Hello World!
</section>
</main>
</div><link rel="stylesheet" type="text/css" href="https://client-version.cf.emarsys.net/ui/latest/css/navigation.css">
<script src="https://client-version.cf.emarsys.net/ui/latest/js/navigation.js"></script>
<!-- Contents of the Navigation Menu here is set from JavaScript -->
<e-navigation class="e-navigation e-navigation-without_shellbar"></e-navigation>
<div class="e-layout e-layout-without_shellbar">
<header class="e-layout__header">
<h1 class="e-layout__title">Page Title Goes Here</h1>
<div class="e-layout__actions">
<button type="button" class="e-layout__action e-btn">Button</button>
<button type="button" class="e-layout__action e-btn e-btn-primary">Primary Action</button>
</div>
</header>
<main class="e-layout__content">
<section class="e-layout__section e-padding-m">
Hello World!
</section>
</main>
</div><link rel="stylesheet" type="text/css" href="https://client-version.cf.emarsys.net/ui/latest/css/navigation.css">
<script src="https://client-version.cf.emarsys.net/ui/latest/js/navigation.js"></script>
<!-- Contents of the Navigation Menu here is set from JavaScript -->
<e-navigation class="e-navigation e-navigation-without_shellbar"></e-navigation>
<div class="e-layout e-layout-without_shellbar">
<header class="e-layout__header">
<h1 class="e-layout__title">Page Title Goes Here</h1>
<div class="e-layout__actions">
<button type="button" class="e-layout__action e-btn">Button</button>
<button type="button" class="e-layout__action e-btn e-btn-primary">Primary Action</button>
</div>
</header>
<main class="e-layout__content">
<section class="e-layout__section e-padding-m">
Hello World!
</section>
</main>
</div>const navigationMenuData = [
{
id: "content_new_main",
url: "",
type: "menu_item",
icon_id: "nav-content",
text: "Category 1",
submenu: [
{
id: "id_01_01",
group: "Item Group 01",
url: "",
type: "menu_item",
icon_id: null,
text: "Menu Item 1"
},
{
id: "id_01_02",
group: "Item Group 01",
url: "",
type: "menu_item",
icon_id: null,
text: "Menu Item 2"
},
{
id: "id_01_03",
group: "Item Group 01",
url: "",
type: "menu_item",
icon_id: null,
text: "Menu Item 3"
}
]
},
{
id: "analytics_new_main",
url: "",
type: "menu_item",
icon_id: "nav-analytics",
text: "Category 2",
submenu: [
{
id: "id_02_01",
group: "Item Group 02",
url: "",
type: "menu_item",
icon_id: null,
text: "Menu Item 4"
},
{
id: "id_02_02",
group: "Item Group 02",
url: "",
type: "menu_item",
icon_id: null,
text: "Menu Item 5"
}
]
}
];
const navigationMenu = document.querySelector('e-navigation');
navigationMenu.menu = navigationMenuData;<link rel="stylesheet" type="text/css" href="https://client-version.cf.emarsys.net/ui/latest/css/navigation.css">
<script src="https://client-version.cf.emarsys.net/ui/latest/js/navigation.js"></script>
<e-shellbar class="e-shellbar">
<header class="e-shellbar__banner" role="banner" aria-hidden="true"><img class="e-shellbar__banner_logo" src="https://assets.emarsys.net/ui/static/images/sap-logo.svg"><a class="e-shellbar__banner_text" href="#">Emarsys</a></header>
</e-shellbar>
<div class="e-layout e-layout-without_menu">
<header class="e-layout__header">
<h1 class="e-layout__title">Page Title Goes Here</h1>
</header>
<main class="e-layout__content">
<section class="e-layout__section e-padding-m">
Hello World!
</section>
</main>
</div><link rel="stylesheet" type="text/css" href="https://client-version.cf.emarsys.net/ui/latest/css/navigation.css">
<script src="https://client-version.cf.emarsys.net/ui/latest/js/navigation.js"></script>
<e-shellbar class="e-shellbar">
<header class="e-shellbar__banner" role="banner" aria-hidden="true"><img class="e-shellbar__banner_logo" src="https://assets.emarsys.net/ui/static/images/sap-logo.svg"><a class="e-shellbar__banner_text" href="#">Emarsys</a></header>
</e-shellbar>
<div class="e-layout e-layout-without_menu">
<header class="e-layout__header">
<h1 class="e-layout__title">Page Title Goes Here</h1>
</header>
<main class="e-layout__content">
<section class="e-layout__section e-padding-m">
Hello World!
</section>
</main>
</div>