Nav

Overview

The nav bar component displays at the left side of your application, presenting the primary navigation options to your users.

The nav bar can include:

• Navigation buttons that let the user navigate to a single function
• Navigation mega menus that let the user choose from a large menu of functions to navigate to
• Optional separators that can be used to visually group related navigation items

Development

Web component development

Component reference

rui-nav

Implementation

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

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

Define your app’s primary navigation options within the main-nav component. Use a rui-nav tag as the outermost element in that view.

If the navigation bar is collapsed, it will temporarily expand when the user hovers the mouse over it. If the text for any nav bar elements is being truncated with ellipses, you can override the width of the expand-on-hover navigation bar by changing the value of the expandOnHoverWidth numeric attribute in rui-nav. The default value is 230, but you can increase this to fit your items with long names.

rui-nav also has a displayState attribute that allows you to override the default initial expand/collapse state (initially expanded at desktop size and initially collapsed at tablet size). Specify a value of “collapsed” if the nav bar should be initially collapsed regardless of screen width. Specify a value of “expanded” if the nav bar should be initially expanded regardless of screen width. Omit this attribute if you want the default initial expanded/collapsed state described above.

<rui-nav>

    <!-- Primary navigation options go here -->

</rui-nav>

Angular wrapper development

Wrapper reference

jha-nav

Implementation

Begin by importing the JhaNavModule into your application.

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

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

export class AppModule(){}

Define the navigation within your main-nav component. Use a jha-nav tag as the outermost element in that view. It has a jhaIsHidden attribute that you can bind to a Boolean value in your controller to specify when the navigation should be hidden. You should hide the navigation when your application is hosted within Xperience.

If the navigation bar is collapsed but temporarily expanded on hover, then any items with text too long to fit in the nav bar are truncated with ellipses. If you see this happening, you can override the width of the expand-on-hover navigation bar by changing the value of the jhaExpandOnHoverWidth numeric attribute in jha-nav. The default value is 230, but you can increase this to fit your items with long names.

jha-nav also has a jhaInitialState attribute that allows you to override the default initial expand/collapse state (initially expanded at desktop size and initially collapsed at tablet size). Specify a value of “collapsed” if the nav bar should be initially collapsed regardless of screen width. Specify a value of “expanded” if the nav bar should be initially expanded regardless of screen width. Omit this attribute if you want the default initial expanded/collapsed state described above.

<jha-nav [jhaIsHidden]="hideHeader">

    <!-- Primary navigation options go here -->

</jha-nav>

Design

Figma design

Adobe XD design