Header User

Published on February 15, 2021, updated on July 18, 2022

Element: <ins-header-user>

Displays header items.

Complete Example

Code Snippet

<ins-header>

  <ins-header-user 
    name="John Smith" 
    profile-link="/assets/pages/my-profile.html">
  </ins-header-user>

</ins-header>

Default State

Code Snippet

<ins-header>
  <ins-header-user></ins-header-user>
</ins-header>

Direct Set Data

Code Snippet

<ins-header>

  <ins-header-user 
    id="directSetDataHeaderUser">
  </ins-header-user>

</ins-header>

<script>
  var directSetDataHeaderUser = document.getElementById('directSetDataHeaderUser');
  directSetDataHeaderUser.addEventListener('didLoad', function(e){
    directSetDataHeaderUser.name = 'Jane Doe';
    directSetDataHeaderUser.logoutLink = '/sign-out';
    directSetDataHeaderUser.profileLink = '/my-account';
  });
</script>

Static Data Source

Code Snippet

<ins-header>

  <ins-header-user 
    name="John Smith" 
    logout-link="/logout" 
    profile-link="/my-profile">
  </ins-header-user>

</ins-header>

Attributes

FIELD ATTRIBUTE	TYPE	DEFAULT	OPTIONS	DESCRIPTION
name	string	"User"	any	Defines name of dropdown feature in header
profile-label	string	"My Profile"	any	Customizes the label of "MyProfile" selection
profile-link	string	"#/my-profile"	any	Defines link of "MyProfile" selection
logout-label	string	"Logout"	any	Customizes the label of "logout" selection
logout-link	string	""	any	Defines link of "logout" selection
app	boolean	false	true, false	Renders iframe
formatted-route	string		any	N/A

Have a suggestion for this page?

Didn't quite find what you are looking for or have feedback on how we can make the content better then we would love to hear from you. Please provide us feedback and we will get back to you shortly.