Header Dropdown Button

Components > Application Layout > Header Dropdown Button

Use this component to...

Present a button in the right side of your application header that toggles a small dropdown menu when pressed

Overview

Use this component to display a dropdown button in your app header. This dropdown button toggles the display of a dropdown menu when pressed.

This can help you save space in your header, since you can combine several options with one button.

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

Development

Web component development

Component reference

rui-header-dropdown

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

Dropdown button in right side of header bar; allows you to group several options under one button

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.
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.
alignment	string	'left'	By default, the dropdown menu aligns to the left side of its button. If the button is at the far right of the header, the dropdown’s content can be clipped. If this happens, set this attribute to a value of ‘right’ and the dropdown menu will be aligned to the right edge of the button, preventing clipping
menuWidth	number	-1	If you need to override the default dropdown menu width, assign a number for this property that specifies the pixel width needed.
allowMixedCase	boolean	false	Our standard is for header buttons to uppercase their text. In certain rare cases, this uppercasing can be inappropriate. For example, the button text may refer to a product name that must include a lower case character for trademark purposes. In these rare cases, set this property to true to preserve mixed case for the button.

rui-header-dropdown-option

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

Option in header dropdown menu

Name	Type	Default	Description
text	string	''	Text displayed in the option
badge	string	''	Optional text that is highlighted to the right of the option text. Often used to display a count of data items that can be accessed when the user presses the option.
route	string	''	If the dropdown option links to a view within the app, this specifies the route for that view.
rui-header-dropdown-option-click	event		Fired when the user clicks the dropdown option.

rui-header-dropdown-separator

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

Separator between groups of options in header dropdown menu

No properties or events

Implementation

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

Import the module

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

Use rui-header-dropdown for a button that toggles a small dropdown menu of options when pressed.

Use rui-header-dropdown if the number of menu options to display is relatively small, otherwise use rui-header-mega-menu.

Nest one or more rui-header-dropdown-option elements within the rui-header-dropdown for the dropdown elements.

rui-header-dropdown has an alignment attribute with values of “left” or “right”, that specifies whether the dropdown menu should align to the left or right edge of the dropdown button. Leave this attribute at its default value of “left” unless the dropdown is at the far right of the header and the dropdown menu options are getting clipped off the right.

You can optionally separate dropdown options with the rui-header-dropdown-separator component.

The example below adds a dropdown button to the right side of the header with options for changing the theme.

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>

        <!-- Header dropdown -->
        <rui-header-dropdown class="rui-hidden-mobile" iconType="palette" text="Theme">

            <rui-header-dropdown-option *ngFor="let themeColor of themeColors; let i=index"
                text="{{themeColor.name}}" (rui-header-dropdown-option-click)="changeThemeColor(i)">
            </rui-header-dropdown-option>

        </rui-header-dropdown>

    </rui-header-right>

</rui-header>

Angular component development

Component reference

jha-header-dropdown

Module: JhaHeaderModule - Package: @jha/jharesponsive

Dropdown button in right side of header bar; allows you to group several options under one button

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.
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.
jhaAlignment	string	'Left'	By default, the dropdown menu aligns to the left side of its button. If the button is at the far right of the header, the dropdown’s content can be clipped. If this happens, set this attribute to a value of ‘Right’ and the dropdown menu will be aligned to the right edge of the button, preventing clipping
jhaMenuWidth	number	-1	If you need to override the default dropdown menu width, assign a number for this property that specifies the pixel width needed.
jhaAllowMixedCase	boolean	false	Our standard is for header buttons to uppercase their text. In certain rare cases, this uppercasing can be inappropriate. For example, the button text may refer to a product name that must include a lower case character for trademark purposes. In these rare cases, set this property to true to preserve mixed case for the button.

jha-header-dropdown-option

Module: JhaHeaderModule - Package: @jha/jharesponsive

Option in header dropdown menu

Name	Type	Default	Description
jhaText	string	''	Text displayed in the option
jhaTooltip	string	''	Tooltip to display when the mouse hovers over the option
jhaBadge	string	''	Optional text that is highlighted to the right of the option text. Often used to display a count of data items that can be accessed when the user presses the option.
jhaRouterLink	string	''	If the dropdown option links to a view within the app, this specifies the route for that view.
jhaExternalUrl	string	''	If the dropdown option links to a URL outside of the app, this specifies the URL.
jhaExternalUrlInNewWindow	boolean	true	If the dropdown option links to a URL outside of the app, leave this at its default value of true if that link should open in a new tab/window. Otherwise set this to false.
click	event		If the dropdown option executes code, define a click event handler for it.

jha-header-dropdown-separator

Module: JhaHeaderModule - Package: @jha/jharesponsive

Separator between groups of options in header dropdown menu

No properties or events

Implementation

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

Import the module

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

Use jha-header-dropdown for a button that toggles a small dropdown menu of options when pressed.

Use jha-header-dropdown if the number of menu options to display is relatively small, otherwise use jha-header-mega-menu.

Nest one or more jha-header-dropdown-option elements within the jha-header-dropdown for the dropdown elements.

jha-header-dropdown has an jhaAlignment attribute with values of “Left” or “Right”, that specifies whether the dropdown menu should align to the left or right edge of the dropdown button. Leave this attribute at its default value of “Left” unless the dropdown is at the far right of the header and the dropdown menu options are getting clipped off the right.

You can optionally separate dropdown options with the jha-header-dropdown-separator component.

The example below adds a dropdown button to the right side of the header with options for changing the theme.

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>

        <!-- Header dropdown -->
        <jha-header-dropdown class="jha-hidden-phone" jhaIconType="Information" jhaText="Dropdown"
            jhaTooltip="Example of header dropdown">

            <jha-header-dropdown-option *ngFor="let themeColor of themeColors; let i=index"
                jhaText="{{themeColor.name}}" (click)="changeThemeColor(i)">
            </jha-header-dropdown-option>

        </jha-header-dropdown>
    </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 dropdown button	RUI / Header / Dropdown Button Available values for the State property: Inactive Active Menu Displayed
Header button badge	RUI / Header / Button Badge
Header dropdown menu	RUI / Header / Dropdown Menu
Header dropdown menu item	Add text, then apply rui/regular as the Text Style and rui-pacific/btn-primary-fg as the Color Style
Header dropdown menu separator	RUI / Header / Dropdown Menu Separator

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 dropdown button - inactive	JHA / Header / Dropdown Button / Inactive
Header dropdown button - active	JHA / Header / Dropdown Button / Active
Header dropdown menu	JHA / Header / Dropdown Menu
Header dropdown menu item	JHA / Text / Header Dropdown Menu Item
Header dropdown menu separator	JHA / Header / Dropdown Menu Separator

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