Nav Button

Components > Application Layout > Nav Button

Use this component to...

Present a simple navigation button in your nav bar

Overview

Use this component to display a simple nav button in your nav bar.

Development

Web component development

Component reference

rui-nav-button

Module: rui-nav - Package: @jha/rui-wc

Simple button in right side of nav bar

Name	Type	Default	Description
text	string	''	Text displayed in the button
iconType	string	''	The name of the icon to display in the button. You can find a list of all enterprise icons here. Leave the iconType blank if you want to display initials based on the button text instead of an icon. For example, if the button text is “Additional Overrides” and no icon is specified, the button would display “AO” instead of an icon.
iconInitials	string	''	If you left iconType blank so that the button displays initials for the icon, you can use this property to override the initials displayed if you need to. You would typically only do this if the calculated initials were non-unique or unsuitable for any reason.
badge	string	''	Optional text that is highlighted to the right of the button text. Often used to display a count of data items that can be accessed when the user presses the button.
route	string	''	If the button links to a view within the app, assign the route for that view to this attribute. You must prefix the route with “/#” in Angular applications.

Implementation

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

Import the module

// import into app.module
import '@jha/rui-wc/components/rui-nav/rui-nav-imports';

The example below adds a simple nav button to the nav bar that navigates to the Settings page.

Using the component

<rui-nav>

    <!-- Settings -->
    <rui-nav-button iconType="settings" text="Settings" route="/#/Settings"></rui-nav-button>

</rui-nav>

Angular component development

Component reference

jha-nav-button

Module: JhanavModule - Package: @jha/jharesponsive

Simple button in right side of nav bar

Name	Type	Default	Description
jhaText	string	''	Text displayed in the button
jhaIconType	string	''	The name of the icon to display in the button. You can find a list of all enterprise icons here. Leave the iconType blank if you want to display initials based on the button text instead of an icon. For example, if the button text is “Additional Overrides” and no icon is specified, the button would display “AO” instead of an icon.
jhaIconInitials	string	''	If you left jhaIconType blank so that the button displays initials for the icon, you can use this property to override the initials displayed if you need to. You would typically only do this if the calculated initials were non-unique or unsuitable for any reason.
jhaTooltip	string	''	Tooltip to display when the mouse hovers over the button
jhaBadge	string	''	Optional text that is highlighted to the right of the button text. Often used to display a count of data items that can be accessed when the user presses the button.
jhaRouterLink	string	''	If the button links to a view within the app, assign the route for that view to this attribute. If the button executes code, define a click event handler for it. Otherwise if the button links to a URL outside of the app, set the outside URL to the jhaExternalUrl attribute.
jhaRouterLinkActiveOptions	object	{}	If the active router link options need to be set, use this attribute. Pass in an object just like you would for the routerLinkActiveOptions directive. For example: `[jhaRouterLinkActiveOptions]="{exact: true}"`
jhaExternalUrl	string	''	If the button links to a view within the app, set its jhaRouterLink to the route for that view. If the button executes code, define a click event handler for it. Otherwise if the button links to a URL outside of the app, assign that URL to this attribute.
jhaExternalUrlInNewWindow	boolean	true	If the button links to a URL outside of the app, set this to true if that link should be opened in a new tab/window. Otherwise bind this to a false value.

Implementation

Begin by importing the JhaNavModule into your application.

Import the module

// import into app.module
import { JhaNavModule } from '@jha/jharesponsive/jha-nav';

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

export class AppModule(){}

The example below adds a simple nav button to the nav bar that navigates to the Settings page.

Using the component

<jha-nav>

    <!-- Settings -->
    <jha-nav-button jhaIconType="settings" jhaText="Settings" jhaRouterLink="/Settings"></jha-nav-button>

</jha-nav>

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
Nav button	RUI / Nav / Button Available values for the State property: Inactive Active Turn on the Collapsed property for a collapsed nav bar; leave it off for an expanded nav bar
Nav button badge	RUI / Nav / Button Badge

Dev Component

Design Component Name

Nav button

RUI / Nav / Button

Available values for the State property:

Inactive
Active

Turn on the Collapsed property for a collapsed nav bar; leave it off for an expanded nav bar

Nav button badge

RUI / Nav / Button Badge

Adobe XD design

Adobe XD design info

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

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

Dev Component	Design Component Name
Nav button - expanded, inactive	JHA / Nav / Expanded / Button / Inactive
Nav button - expanded, active	JHA / Nav / Expanded / Button / Active
Nav button - collapsed, inactive	JHA / Nav / Collapsed / Button / Inactive
Nav button - collapsed, active	JHA / Nav / Collapsed / Button / Active

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 Tue Feb 7 2023