Dropdown Button

Components > User Interaction > Dropdown Button

Use this component to...

Allow the user to select an item from a dropdown menu that displays when the button is pressed

See this component in action...

Test out this component in a hosted version of the sample app

Overview

Dropdown buttons display a dropdown menu when pressed.

No other action is triggered when the user presses the button, but your app will perform an action when the user selects any item in the dropdown menu.

Dropdown button displaying its menu after the button is pressed

Text and icons

Dropdown buttons can display a text label, an icon, or both.

Styling

Dropdown buttons support the following styling:

Use secondary styling for most dropdown buttons. The styling for secondary buttons is visually lighter to prevent the button from distracting the user’s eye from the data.
Use primary styling for a dropdown button that performs the primary action in the view. The styling for primary buttons is visually heavy in order to draw attention to the button’s importance. There should be no more than one primary button in each view (or at most in each display block).

Usage

Dropdown buttons can be used anywhere in a function view.

Development

Web component development

Component reference

rui-dropdown-button

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

Displays a dropdown menu when pressed

Name	Type	Default	Description
text	string	''	Text displayed in the button. The button text should typically be non-blank, but the button can work without text. You should only omit the text if the button is being used in a location that provides enough context about what the button is for, such as in a data grid row or in a templated list.
buttonStyle	string	'secondary'	Specifies the styling displayed for the button: One of “primary”, “secondary”, or “destructive” Use a value of “secondary” for most buttons. Use a value of “primary” for a button that performs the primary action in the view. There should be no more than one primary button in each view (or at most in each display block). Use a value of “destructive” if pressing the button triggers a significant, destructive action like deletion. This button style should be used sparingly.
buttonSize	string	'medium'	Specifies the relative size of the button: One of “medium” or “small” Use the default value of “medium” for most buttons. You can optionally use the “small” size for buttons in a toolbar if you’re looking for more compactness.
iconType	string	''	The name of the icon to display in an icon button. You can find a list of all enterprise icons here. The use of custom icons is also supported.
alignment	string	'left'	One of “left” or “right”. Describes which button edge the menu aligns to. Use a value of “right” if the button is towards the far right edge of the app and the dropdown menu is getting clipped on the right.
isDisabled	boolean	false	Specifies whether the button is disabled.

rui-button-menu-option

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

Option in dropdown menu.

Name	Type	Default	Description
text	string	''	Text displayed in the dropdown option
isDisabled	boolean	false	Specifies whether the dropdown option is disabled.
route	string	''	If the dropdown option 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.
rui-menu-option-click	event		If the dropdown option executes code, define a rui-menu-option-click event handler for it.

rui-button-menu-submenu

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

Tiered submenu in dropdown menu

Name	Type	Default	Description
text	string	''	Text displayed in the dropdown submenu option
isDisabled	boolean	false	Specifies whether the dropdown submenu option is disabled.

rui-button-menu-template

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

Templated option in dropdown menu

Name	Type	Default	Description
isDisabled	boolean	false	Specifies whether the dropdown option is disabled.
route	string	''	If the dropdown option 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.
rui-menu-option-click	event		If the dropdown option executes code, define a rui-menu-option-click event handler for it.

Name

Type

Default

Description

isDisabled

boolean

false

Specifies whether the dropdown option is disabled.

route

string

If the dropdown option 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.

rui-menu-option-click

event

If the dropdown option executes code, define a rui-menu-option-click event handler for it.

rui-button-menu-separator

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

Separator between groups of options in a dropdown menu

No properties or events

Implementation

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

Import the module

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

Use the rui-dropdown-button component to implement a dropdown button. Specify the button’s text with the text property. Nest an instance of rui-button-menu-option for each of the button’s dropdown menu options.

Dropdown button example

<rui-dropdown-button text="Export">
    <rui-button-menu-option text="Export to PDF" (rui-click)="exportToPdf()"></rui-button-menu-option>
    <rui-button-menu-option text="Export to CSV" (rui-click)="exportToCsv()"></rui-button-menu-option>
</rui-dropdown-button>

Bind isDisabled to a value of true to disable the button.

Dropdown buttons in Responsive UI almost always display text as their content, but you can also display icon dropdown buttons in limited cases. To display an icon as the button content, set the iconType property to one of the enterprise icon names. Use icon buttons sparingly, and only with standard icons that are very well understood by the user, such as print, edit, add-new, etc. You can find a list of all enterprise icons here.

Custom icons are also possible using the custom-icon slot. You can find more information on implementing custom icons on the icon component doc.

Icon-only dropdown button example

<rui-dropdown-button iconType="export">
    <rui-button-menu-option text="Export to PDF" (rui-click)="exportToPdf()"></rui-button-menu-option>
    <rui-button-menu-option text="Export to CSV" (rui-click)="exportToCsv()"></rui-button-menu-option>
</rui-dropdown-button>

If you’re looking for more compactness for dropdown buttons in a toolbar, you can set the buttonSize property to a value of “small”. This button size must only be used for buttons in a toolbar.

Small dropdown button example

<rui-dropdown-button text="Export" buttonSize="small">

The options in the button dropdown menu typically display a simple text value. Nest instances of rui-button-menu-option within rui-dropdown-button for this case. Specify the option text using the text property. You can (sparingly) use rui-button-menu-separator to separate groups of dropdown options.

Dropdown button with simple options

<rui-dropdown-button text="Dropdown Button with Simple Options">
    <rui-button-menu-option text="Show Popup Notification" (rui-click)="showPopupNotification = true"></rui-button-menu-option>
    <rui-button-menu-separator></rui-button-menu-separator>
    <rui-button-menu-option text="About Page" route="/#/About"></rui-button-menu-option>
</rui-dropdown-button>

Sometimes it’s necessary to nest menu items within a dropdown button’s menu. The rui-button-menu-submenu component helps you do this. Nest additional rui-button-menu-option elements within the submenu to create tiered flyout menus. Submenus can be disabled by binding isDisabled to true.

The flyout direction of the submenu follows the alignment of the rui-dropdown-button.

By default the alignment is ’left’ and the submenus will fly out to the right.
If the alignment is set to ‘right’, the submenus will fly out to the left.
If the alignment property is not set, the component will attempt to determine the best alignment based on the proximity from the button to the right and left browser edges.

Dropdown button with a submenu

<rui-dropdown-button text="Dropdown Button with Submenu">
    <rui-button-menu-option text="Responsive UI" route="/#/ResponsiveUI"></rui-button-menu-option>
    <rui-button-menu-submenu text="Resources">
        <rui-button-menu-option text="Patterns" route="/#/Patterns"></rui-button-menu-option>
        <rui-button-menu-option text="Icons" route="/#/Icons"></rui-button-menu-option>
    </rui-button-menu-submenu>
    <rui-button-menu-separator></rui-button-menu-separator>
    <rui-button-menu-option text="About Page" route="/#/About"></rui-button-menu-option>
    <rui-button-menu-option text="Show Popup Notification" (rui-click)="showPopupNotification = true"></rui-button-menu-option>
</rui-dropdown-button>

In some cases you may need to display a template with multiple data in each dropdown option. Nest instances of rui-button-menu-template within rui-dropdown-button for this case. Embed the template for each option within the rui-button-menu-template element. Flexbox CSS can be a handy way to provide layout for these templates. You can also use text formatting CSS classes to highlight certain segments of the template.

Don’t mix simple menu options with templated menu options in the same dropdown menu. Use either rui-button-menu-option or rui-button-menu-template, but not both in the same menu.

Dropdown button with templated options: HTML

<rui-dropdown-button text="Dropdown Button with Templated Options">

    <rui-button-menu-template *ngFor="let account of accounts" (rui-click)="accountClick(account)">
        <div class="template-options">
            <div class="button-template-name">{{account.name}}</div>
            <div class="button-template-account-number rui-bright-text-label">{{account.number}}</div>
            <div class="button-template-account-desc">{{account.description}}</div>
        </div>
    </rui-button-menu-template>

</rui-dropdown-button>

Dropdown button with templated options: CSS

.template-options {
    display: flex;
    flex-flow: row nowrap;
    width: 450px;
}

.button-template-name {
    width: 35%;
}

.button-template-account-number {
    width: 20%;
}

.button-template-account-desc {
    width: 45%;
}

Angular wrapper development

Wrapper reference

jha-dropdown-button

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

Displays a dropdown menu when pressed

Name	Type	Default	Description
jhaText	string	''	Text displayed in the button. The button text should typically be non-blank, but the button can work without text. You should only omit the text if the button is being used in a location that provides enough context about what the button is for, such as in a data grid row or in a templated list.
jhaButtonStyle	string	'Secondary'	Specifies the styling displayed for the button: One of “Primary”, “Secondary”, or “Destructive” Use a value of “Secondary” for most buttons. Use a value of “Primary” for a button that performs the primary action in the view. There should be no more than one primary button in each view (or at most in each display block). Use a value of “Destructive” if pressing the button triggers a significant, destructive action like deletion. This button style should be used sparingly.
jhaButtonSize	string	'Medium'	Specifies the relative size of the button: One of “Medium” or “Small” Use the default value of “Medium” for most buttons. You can optionally use the “Small” size for buttons in a toolbar if you’re looking for more compactness.
jhaIconType	string	''	The name of the icon to display in an icon button. You can find a list of all enterprise icons here. The use of custom icons is also supported.
jhaTooltip	string	''	Tooltip displayed when the mouse hovers over the button
jhaAlignment	string	'Left'	One of “Left” or “Right”. Describes which button edge the menu aligns to. Use a value of “Right” if the button is towards the far right edge of the app and the dropdown menu is getting clipped on the right.
jhaIsDisabled	boolean	false	Specifies whether the button is disabled.
jhaWidth	string	'auto'	Specifies the width of the button. Leave at the default value of ‘auto’ unless you need to specify a specific pixel or percentage width. Use CSS notation appropriate for the CSS “width” attribute.

jha-button-menu-option

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

Option in dropdown menu

Name	Type	Default	Description
jhaText	string	''	Text displayed in the dropdown option
jhaTooltip	string	''	Tooltip displayed when the mouse hovers over the dropdown option
jhaIsDisabled	boolean	false	Specifies whether the dropdown option is disabled.
jhaClick	event		If the dropdown option executes code, define a jhaClick event handler for it.
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 bind this to false.

jha-button-menu-submenu

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

Tiered submenu in dropdown menu

Name	Type	Default	Description
jhaText	string	''	Text displayed in the dropdown submenu option
jhaTooltip	string	''	Tooltip displayed when the mouse hovers over the dropdown submenu option
jhaIsDisabled	boolean	false	Specifies whether the dropdown submenu option is disabled.

jha-button-menu-template

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

Templated option in dropdown menu

Name	Type	Default	Description
jhaTooltip	string	''	Tooltip displayed when the mouse hovers over the dropdown option
jhaIsDisabled	boolean	false	Specifies whether the dropdown option is disabled.
jhaClick	event		If the dropdown option executes code, define a jhaClick event handler for it.
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 bind this to false.

jha-button-menu-separator

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

Separator between groups of options in a dropdown menu

No properties or events

Implementation

Begin by importing the JhaButtonsModule module into your application.

Import the module

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

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

export class AppModule(){}

Use the jha-dropdown-button component to implement a dropdown button. Specify the button’s text with the jhaText property. Nest an instance of jha-button-menu-option for each of the button’s dropdown menu options.

Dropdown button example

<jha-dropdown-button jhaText="Export">
    <jha-button-menu-option jhaText="Export to PDF" (jhaClick)="exportToPdf()"></jha-button-menu-option>
    <jha-button-menu-option jhaText="Export to CSV" (jhaClick)="exportToCsv()"></jha-button-menu-option>
</jha-dropdown-button>

Bind jhaIsDisabled to a value of true to disable the button.

Dropdown buttons in Responsive UI almost always display text as their content, but you can also display icon dropdown buttons in limited cases. To display an icon as the button content, set the jhaIconType property to one of the enterprise icon names. Use icon buttons sparingly, and only with standard icons that are very well understood by the user, such as Print, Edit, AddNew, etc. You can find a list of all enterprise icons here.

Custom icons are also possible using the custom-icon slot. You can find more information on implementing custom icons on the icon component doc.

Icon-only dropdown button example

<jha-dropdown-button jhaIconType="Export">
    <jha-button-menu-option jhaText="Export to PDF" (jhaClick)="exportToPdf()"></jha-button-menu-option>
    <jha-button-menu-option jhaText="Export to CSV" (jhaClick)="exportToCsv()"></jha-button-menu-option>
</jha-dropdown-button>

Dropdown buttons typically auto-size to fit their content, but in certain cases you may want to define a specific width for the button. You can use the jhaWidth property to specify a specific pixel or percentage width. If you do this, use CSS notation appropriate for the CSS “width” attribute.

Full-width dropdown button example

<jha-dropdown-button jhaText="Export" jhaWidth="100%">

If you’re looking for more compactness for dropdown buttons in a toolbar, you can set the jhaButtonSize property to a value of “Small”. This button size must only be used for buttons in a toolbar.

Small dropdown button example

<jha-dropdown-button jhaText="Export" jhaButtonSize="Small">

The options in the button dropdown menu typically display a simple text value. Nest instances of jha-button-menu-option within jha-dropdown-button for this case. Specify the option text using the jhaText property. You can (sparingly) use jha-button-menu-separator to separate groups of dropdown options.

Dropdown button with simple options

<jha-dropdown-button jhaText="Dropdown Button with Simple Options">
    <jha-button-menu-option jhaText="Responsive UI" jhaExternalUrl="https://jharesponsiveui.z19.web.core.windows.net"></jha-button-menu-option>
    <jha-button-menu-separator></jha-button-menu-separator>
    <jha-button-menu-option jhaText="About Page" jhaRouterLink="/About"></jha-button-menu-option>
    <jha-button-menu-option jhaText="Show Popup Notification" (jhaClick)="showPopupNotification = true"></jha-button-menu-option>
</jha-dropdown-button>

Sometimes it’s necessary to nest menu items within a dropdown button’s menu. The jha-button-menu-submenu component helps you do this. Nest additional jha-button-menu-option elements within the submenu to create tiered flyout menus. Submenus can be disabled by binding jhaIsDisabled to true.

The flyout direction of the submenu follows the jhaAlignment of the jha-dropdown-button.

By default the jhaAlignment is ‘Left’ and the submenus will fly out to the right.
If the alignment is set to ‘Right’, the submenus will fly out to the left.
If the alignment property is not set, the component will attempt to determine the best alignment based on the proximity from the button to the right and left browser edges.

Dropdown button with a submenu

<jha-dropdown-button jhaText="Dropdown Button with Submenu">
    <jha-button-menu-option jhaText="Responsive UI" jhaExternalUrl="https://jharesponsiveui.z19.web.core.windows.net"></jha-button-menu-option>
    <jha-button-menu-submenu jhaText="Resources">
        <jha-button-menu-option jhaText="Patterns" jhaRouterLink="/Patterns"></jha-button-menu-option>
        <jha-button-menu-option jhaText="Icons" jhaRouterLink="/Icons"></jha-button-menu-option>
    </jha-button-menu-submenu>
    <jha-button-menu-separator></jha-button-menu-separator>
    <jha-button-menu-option jhaText="About Page" jhaRouterLink="/About"></jha-button-menu-option>
    <jha-button-menu-option jhaText="Show Popup Notification" (jhaClick)="showPopupNotification = true"></jha-button-menu-option>
</jha-dropdown-button>

In some cases you may need to display a template with multiple data in each dropdown option. Nest instances of jha-button-menu-template within jha-dropdown-button for this case. Embed the template for each option within the jha-button-menu-template element. Flexbox CSS can be a handy way to provide layout for these templates. You can also use text formatting CSS classes to highlight certain segments of the template.

Don’t mix simple menu options with templated menu options in the same dropdown menu. Use either jha-button-menu-option or jha-button-menu-template, but not both in the same menu.

Dropdown button with templated options: HTML

<jha-dropdown-button jhaText="Dropdown Button with Templated Options">

    <jha-button-menu-template *ngFor="let account of accounts" (jhaClick)="accountClick(account)">
        <div class="template-options">
            <div class="button-template-name">{{account.name}}</div>
            <div class="button-template-account-number jha-bright-text-label">{{account.number}}</div>
            <div class="button-template-account-desc">{{account.description}}</div>
        </div>
    </jha-button-menu-template>

</jha-dropdown-button>

Dropdown button with templated options: CSS

.template-options {
    display: flex;
    flex-flow: row nowrap;
    width: 450px;
}

.button-template-name {
    width: 35%;
}

.button-template-account-number {
    width: 20%;
}

.button-template-account-desc {
    width: 45%;
}

Component playground

Design

Figma design

Figma design info

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

Dev Component	Design Component Name
Dropdown button	RUI / Buttons / Dropdown Button Available values for the Style property: Primary Secondary Disabled Switch on the IconOnly property if the dropdown button only displays an icon.

Dev Component

Design Component Name

Dropdown button

RUI / Buttons / Dropdown Button

Available values for the Style property:

Primary
Secondary
Disabled

Switch on the IconOnly property if the dropdown button only displays an icon.

Change the button text to an appropriate value. Resize the button to fit the text, but be careful that you’re resizing the outer component and not an inner layer within the component.

Note that hover effects on buttons are currently not included. We could technically include these for prototypes, but it would require you to set the text twice for every button: once for the normal state and again for the hover state. So for now, we’ve left out hover effects. You can still wire up click interactions on buttons though.

Adobe XD design

Adobe XD design info

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

Sample App - Buttons

Dev Component	Design Component Name
Dropdown button - primary	JHA / Buttons / Dropdown Button / Primary
Dropdown button - secondary	JHA / Buttons / Dropdown Button / Secondary
Dropdown button - disabled	JHA / Buttons / Dropdown Button / Disabled

Change the button text to an appropriate value. Resize the button to fit the text, but be careful that you’re resizing the outer component and not an inner layer within the component.

The disabled state for all buttons and the on/off states for toggling buttons are internal states within the development components, but we have provided separate design components for these states for each type of button.

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

Dropdown Button

Overview

Text and icons

Styling

Usage

Development

Web component development

Component reference

rui-dropdown-button

rui-button-menu-option

rui-button-menu-submenu

rui-button-menu-template

rui-button-menu-separator

Implementation

Displaying simple options in the dropdown menu

Displaying a tiered submenu in the dropdown menu

Displaying templated options in the dropdown menu

Angular wrapper development

Wrapper reference

jha-dropdown-button

jha-button-menu-option

jha-button-menu-submenu

jha-button-menu-template

jha-button-menu-separator

Implementation

Displaying simple options in the dropdown menu

Displaying a tiered submenu in the dropdown menu

Displaying templated options in the dropdown menu

Component playground

Design

Figma design

Adobe XD design