Header Text

Components > Application Layout > Header Text

Use this component to...

Display a text string in the right side of your application header

Overview

Use this component to display static text information in your app header.

This could include:

The app version
The user’s name
The current environment
etc

Only add header text to the right side of the header.

Development

Web component development

Component reference

rui-header-text

Module: rui-header - Package: @jkhy/responsive-ui-wc

A block of text that displays in the right side of the header. This is not a button or dropdown, just text.

Name	Type	Default	Description
text	string	''	Text to display

Implementation

Begin by importing the rui-header module into your application.

Import the module

// import into app.module
import '@jkhy/responsive-ui-wc/components/rui-header/rui-header-imports';

Use rui-header-text to display text in the header. This tag has a text attribute for specifying the text.

Keep the text short since there isn’t much room in the header, especially at smaller screen widths. You may even want to hide this text at mobile size.

The example below displays the user’s name as text in the right side of the header.

Using the component

<!-- Header: Defines application name and admin options that display in header -->
<rui-header [displaySearch]="true" searchWidth="50%" searchWatermarkText="SEARCH" (rui-header-search)="search($event)">

    <!-- Left side -->
    <rui-header-left [displayBackButton]="displayBackButton" (rui-back-button-click)="backButtonClicked()">

        <!-- Left side content -->

    </rui-header-left>

    <!-- Right side -->
    <rui-header-right>

        <!-- Logged in username -->
        <rui-header-text class="rui-hidden-mobile" [text]="userName"></rui-header-text>

    </rui-header-right>

</rui-header>

Angular wrapper development

Wrapper reference

jha-header-text

Module: JhaHeaderModule - Package: @jkhy/responsive-ui-angular

A block of text that displays in the right side of the header. This is not a button or dropdown, just text.

Name	Type	Default	Description
jhaText	string	''	Text to display

Implementation

Begin by importing the JhaHeaderModule into your application.

Import the module

// import into app.module
import { JhaHeaderModule } from '@jkhy/responsive-ui-angular/jha-header';

@NgModule({
    imports: [JhaHeaderModule,...]
})

export class AppModule(){}

Use jha-header-text to display text in the header. This tag has a jhaText attribute for specifying the text.

Keep the text short since there isn’t much room in the header, especially at smaller screen widths. You may even want to hide this text at mobile size.

The example below displays the user’s name as text in the right side of the header.

Using the component

<!-- Header: Defines application name and admin options that display in header -->
<jha-header [jhaIsHidden]="hideHeader" jhaDisplaySearch="true" jhaSearchWidth="50%"
 jhaSearchWatermarkText="SEARCH" (jhaSearch)="search($event)">

    <!-- Left side -->
    <jha-header-left [jhaDisplayBackButton]="displayBackButton" (jhaBackButtonClicked)="backButtonClicked()">

        <!-- Left side content -->

    </jha-header-left>

    <!-- Right side -->
    <jha-header-right>

        <!-- Logged in username -->
        <jha-header-text class="rui-hidden-mobile" [jhaText]="userName"></jha-header-text>

    </jha-header-right>

</jha-header>

Component playground

Design

Figma design

Figma design info

You can find this component in the Components - Application Layout page in the Figma UI Kit.

Dev Component	Design Component Name
Header text	Add text, then apply rui/header-element as the Text Style and rui-pacific/main-header-fg as the Color Style.

Adobe XD design

Adobe XD design info

You can find this component in these artboards in the Adobe XD design samples:

Layout - Header, Expanded Nav, Function View
Layout - Header, Collapsed Nav, Function View
Layout - Nav Elements - Expanded Nav Bar
Layout - Nav Elements - Collapsed Nav Bar
Layout - Nav Mega Menu
Layout - Header Elements – Basics
Layout - Header Menu Buttons
Layout - Header Mega Menu
Layout - Mobile Application
Layout - Tablet Application – Portrait
Layout - Tablet Application - Landscape

Dev Component	Design Component Name
Header text	JHA / Text / Header Bar

Support options

Have questions on this topic?

Join the Responsive UI team in Microsoft Teams to connect with the community.

See something in this page that needs to change?

Send us feedback on this page.

Last updated Mon May 1 2023