React

Application launcher

The application launcher is an optional utility menu item that allows a user to launch a separate web application in a new browser window. This is useful when you want to allow a user to launch multiple applications from a common location.

ExamplesPropsCSS Variables

Examples

Simple application launcher

Copied to clipboard

Application launcher with tooltip

Copied to clipboard

Props

ApplicationLauncher Props

The ApplicationLauncher component accepts the following props.

NameTypeRequiredDefaultDescription
classNamestring''Additional element css classes
directionenumApplicationLauncherDirection.downDisplay menu above or below dropdown toggle
dropdownItemsarray[]Array of DropdownItem nodes that will be rendered in the dropdown Menu list
isOpenboolfalseopen bool
onSelectfuncFunction.prototypeFunction callback called when user selects item
onTogglefuncFunction.prototypeCallback called when application launcher toggle is clicked
positionenumApplicationLauncherPosition.leftIndicates where menu will be alligned horizontally
aria-labelstring'Actions'Adds accessible text to the button. Required for plain buttons

CSS Variables

--pf-c-app-launcher__menu--BackgroundColorc_app_launcher__menu_BackgroundColor#fff
--pf-c-app-launcher__menu--BorderWidthc_app_launcher__menu_BorderWidth1px
--pf-c-app-launcher__menu--BoxShadowc_app_launcher__menu_BoxShadow0 0.0625rem 0.0625rem 0rem rgba(3,3,3,.05),0 0.25rem 0.5rem 0.25rem rgba(3,3,3,.06)
--pf-c-app-launcher__menu--PaddingBottomc_app_launcher__menu_PaddingBottom0.5rem
--pf-c-app-launcher__menu--PaddingTopc_app_launcher__menu_PaddingTop0.5rem
--pf-c-app-launcher__menu--Topc_app_launcher__menu_Topcalc(100% + 0.25rem)
--pf-c-app-launcher__menu--ZIndexc_app_launcher__menu_ZIndex100
--pf-c-app-launcher__menu-item--Colorc_app_launcher__menu_item_Color#72767b
--pf-c-app-launcher__menu-item--FontWeightc_app_launcher__menu_item_FontWeight400
--pf-c-app-launcher__menu-item--PaddingBottomc_app_launcher__menu_item_PaddingBottom0.5rem
--pf-c-app-launcher__menu-item--PaddingLeftc_app_launcher__menu_item_PaddingLeft1rem
--pf-c-app-launcher__menu-item--PaddingRightc_app_launcher__menu_item_PaddingRight1rem
--pf-c-app-launcher__menu-item--PaddingTopc_app_launcher__menu_item_PaddingTop0.5rem
--pf-c-app-launcher__menu-item--disabled--Colorc_app_launcher__menu_item_disabled_Color#72767b
--pf-c-app-launcher__menu-item--hover--BackgroundColorc_app_launcher__menu_item_hover_BackgroundColor#ededed
--pf-c-app-launcher__toggle--Colorc_app_launcher__toggle_Color#151515
--pf-c-app-launcher__toggle--PaddingBottomc_app_launcher__toggle_PaddingBottom0.375rem
--pf-c-app-launcher__toggle--PaddingLeftc_app_launcher__toggle_PaddingLeft1rem
--pf-c-app-launcher__toggle--PaddingRightc_app_launcher__toggle_PaddingRight1rem
--pf-c-app-launcher__toggle--PaddingTopc_app_launcher__toggle_PaddingTop0.375rem
--pf-c-app-launcher__toggle--active--Colorc_app_launcher__toggle_active_Color#151515
--pf-c-app-launcher__toggle--focus--Colorc_app_launcher__toggle_focus_Color#151515
--pf-c-app-launcher__toggle--hover--Colorc_app_launcher__toggle_hover_Color#151515
--pf-c-app-launcher__toggle--m-expanded--Colorc_app_launcher__toggle_m_expanded_Color#151515