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

Note: Application launcher is built on Dropdown, for extended API go to Dropdown documentation. To add a tooltip, use the tooltip prop and optionally add more tooltip props by using tooltipProps. For more tooltip information go to Tooltip.

Simple application launcher

Copied to clipboard

Application launcher with tooltip

Copied to clipboard

App launcher w/ sections and icons

Copied to clipboard

Application launcher w/ custom icon

Copied to clipboard

Props

ApplicationLauncher Props

The ApplicationLauncher component accepts the following props.

NameTypeRequiredDefaultDescription
classNamestring''Additional element css classes
directionDropdownDirectionDropdownDirection.downDisplay menu above or below dropdown toggle
dropdownItemsReact.ReactNode[][] as React.ReactNode[]@deprecated Use the items prop instead Array of DropdownItem nodes that will be rendered in the dropdown Menu list
itemsReact.ReactNode[][] as React.ReactNode[]Array of application launcher items
isDisabledbooleanfalseRender Application launcher toggle as disabled icon
isOpenbooleanfalseopen bool
positionDropdownPositionDropdownPosition.leftIndicates where menu will be alligned horizontally
onSelect(event: any) => void(_event: any): any => undefinedFunction callback called when user selects item
onToggle(value: boolean) => void(_value: boolean): any => undefinedCallback called when application launcher toggle is clicked
aria-labelstring'Application launcher'Adds accessible text to the button. Required for plain buttons
isGroupedbooleanfalseFlag to indicate if application launcher has groups
toggleIconReact.ReactNode<ThIcon />Toggle Icon, optional to override the icon used for the toggle

ApplicationLauncherItem Props

The ApplicationLauncherItem component accepts the following props.

NameTypeRequiredDefaultDescription
iconReact.ReactNodenullIcon rendered before the text
isExternalbooleanfalseIf clicking on the item should open the page in a separate window
tooltipReact.ReactNodenullTooltip to display when hovered over the item
tooltipPropsanynullAdditional tooltip props forwarded to the Tooltip component
className''

CSS Variables

--pf-c-app-launcher__c-divider--MarginBottomc_app_launcher__c_divider_MarginBottom0.5rem
--pf-c-app-launcher__c-divider--MarginTopc_app_launcher__c_divider_MarginTop0.5rem
--pf-c-app-launcher__group--PaddingTopc_app_launcher__group_PaddingTop0.5rem
--pf-c-app-launcher__group--first-child--PaddingTopc_app_launcher__group_first_child_PaddingTop0.5rem
--pf-c-app-launcher__group-title--Colorc_app_launcher__group_title_Color#72767b
--pf-c-app-launcher__group-title--FontSizec_app_launcher__group_title_FontSize0.875rem
--pf-c-app-launcher__group-title--FontWeightc_app_launcher__group_title_FontWeight700
--pf-c-app-launcher__group-title--PaddingBottomc_app_launcher__group_title_PaddingBottom0.5rem
--pf-c-app-launcher__group-title--PaddingLeftc_app_launcher__group_title_PaddingLeft1rem
--pf-c-app-launcher__group-title--PaddingRightc_app_launcher__group_title_PaddingRight1rem
--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_Top0
--pf-c-app-launcher__menu--ZIndexc_app_launcher__menu_ZIndex200
--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-external-icon--Colorc_app_launcher__menu_item_external_icon_Color#004080
--pf-c-app-launcher__menu-item-external-icon--FontSizec_app_launcher__menu_item_external_icon_FontSize0.875rem
--pf-c-app-launcher__menu-item-external-icon--PaddingLeftc_app_launcher__menu_item_external_icon_PaddingLeft1.5rem
--pf-c-app-launcher__menu-item-external-icon--Transformc_app_launcher__menu_item_external_icon_TransformtranslateY(-0.0625rem)
--pf-c-app-launcher__menu-item--hover--BackgroundColorc_app_launcher__menu_item_hover_BackgroundColor#ededed
--pf-c-app-launcher__menu-item-icon--Heightc_app_launcher__menu_item_icon_Height1.5rem
--pf-c-app-launcher__menu-item-icon--MarginRightc_app_launcher__menu_item_icon_MarginRight0.5rem
--pf-c-app-launcher__menu-item-icon--Widthc_app_launcher__menu_item_icon_Width1.5rem
--pf-c-app-launcher__separator--BackgroundColorc_app_launcher__separator_BackgroundColor#d2d2d2
--pf-c-app-launcher__separator--Heightc_app_launcher__separator_Height1px
--pf-c-app-launcher__separator--MarginBottomc_app_launcher__separator_MarginBottom0.5rem
--pf-c-app-launcher__separator--MarginTopc_app_launcher__separator_MarginTop0.5rem
--pf-c-app-launcher__toggle--Colorc_app_launcher__toggle_Color#d2d2d2
--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--disabled--Colorc_app_launcher__toggle_disabled_Color#d2d2d2
--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
--pf-c-app-launcher--m-top__menu--Topc_app_launcher_m_top__menu_Top0
--pf-c-app-launcher--m-top__menu--Transformc_app_launcher_m_top__menu_TransformtranslateY(calc(-100% - 0.25rem))