Component library

Header User

Last updated 2 November 2026

Displays header items.

Live demo

<ins-header>

  <ins-header-user 
    name="John Smith" 
    profile-link="/assets/pages/my-profile.html">
  </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

Examples

Default State

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

Direct Set Data

Open this demo full screen

<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

Open this demo full screen

<ins-header>

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

</ins-header>