Header Title

Components > Application Layout > Header Title

Use this component to...

Display your application title in the left side of your application header

Overview

Use the header title component to display your application title in your app header.

Only add the header title to the left side of the header.

Using an SVG image for the app title

If you have an SVG with your application logo, you can display that in the left side instead of a title.

See Themed SVG Images for more information on properly styling the SVG.

Development

Web component development

Component reference

rui-header-title

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

Your application title; displays in left side of header bar

Name	Type	Default	Description
titleText	string	''	This specifies the title displayed in the header for your application. This value displays at desktop and tablet size. It also displays at mobile size unless you specify an alternate title for mobile size with the mobileTitleText property.
mobileTitleText	string	''	This optional property allows you to specify an alternate title that displays at mobile size. This can be useful when the titleText is too large to fit at mobile size. You’ll typically specify a shorter mobile title than the value you specify for titleText. If you don’t specify a value for mobileTitleText, the titleText value displays.

Name

Type

Default

Description

titleText

string

This specifies the title displayed in the header for your application. This value displays at desktop and tablet size.

It also displays at mobile size unless you specify an alternate title for mobile size with the mobileTitleText property.

mobileTitleText

string

This optional property allows you to specify an alternate title that displays at mobile size. This can be useful when the titleText is too large to fit at mobile size. You’ll typically specify a shorter mobile title than the value you specify for titleText.

If you don’t specify a value for mobileTitleText, the titleText value displays.

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';

Nest a rui-header-title tag in the left side of your header to display your application name as simple text. This tag has a titleText attribute; specify your application name here.

The example below displays the application title in the left side of the header. It provides a shorter version of the application title for display in mobile.

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()">

        <rui-header-title titleText="My Application - version 2.2" mobileTitleText="My Application"></rui-header-title>

    </rui-header-left>

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

        <!-- Right side content -->

    </rui-header-right>

</rui-header>

Angular wrapper development

Wrapper reference

jha-header-title

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

Your application title; displays in left side of header bar

Name	Type	Default	Description
jhaTitle	string	''	This specifies the title displayed in the header for your application. This value displays at desktop and tablet size. It also displays at mobile size unless you specify an alternate title for mobile size with the jhaPhoneTitle property.
jhaPhoneTitle	string	''	This optional property allows you to specify an alternate title that displays at mobile size. This can be useful when the jhaTitle is too large to fit at mobile size. You’ll typically specify a shorter mobile title than the value you specify for jhaTitle. If you don’t specify a value for jhaPhoneTitle, the jhaTitle value displays.

Name

Type

Default

Description

jhaTitle

string

This specifies the title displayed in the header for your application. This value displays at desktop and tablet size.

It also displays at mobile size unless you specify an alternate title for mobile size with the jhaPhoneTitle property.

jhaPhoneTitle

string

This optional property allows you to specify an alternate title that displays at mobile size. This can be useful when the jhaTitle is too large to fit at mobile size. You’ll typically specify a shorter mobile title than the value you specify for jhaTitle.

If you don’t specify a value for jhaPhoneTitle, the jhaTitle value displays.

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(){}

Nest a jha-header-title tag in the left side of your header to display your application name as simple text. This tag has a jhaTitle attribute; specify your application name here.

The example below displays the application title in the left side of the header. It provides a shorter version of the application title for display in mobile.

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()">

        <jha-header-title jhaTitle="MyBranch"></jha-header-title>

    </jha-header-left>

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

        <!-- Right side content -->

    </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 bar	RUI / Header / Header Bar The app title is a sub-element in the header bar, so change it within that component.

Dev Component

Design Component Name

Header bar

RUI / Header / Header Bar

The app title is a sub-element in the header bar, so change it within that component.

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 bar	JHA / Header / Header Bar The app title is a sub-element in the header bar, so change it within that component.

Dev Component

Design Component Name

Header bar

JHA / Header / Header Bar

The app title is a sub-element in the header bar, so change it within that component.

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 Wed Sep 25 2024