Skip to Content
Patternfly Logo

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

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.

Examples

Basic

Disabled

Aligned right

Aligned top

With tooltip

With sections and icons

With custom icon

Props

ApplicationLauncher properties
NameTypeRequiredDefaultDescription
classNamestringNo''Additional element css classes
directionDropdownDirection | 'up' | 'down'NoDropdownDirection.downDisplay menu above or below dropdown toggle
Deprecated: dropdownItemsReact.ReactNode[]No[]Use the items prop instead Array of DropdownItem nodes that will be rendered in the dropdown Menu list
itemsReact.ReactNode[]No[]Array of application launcher items
isDisabledbooleanNofalseRender Application launcher toggle as disabled icon
isOpenbooleanNofalseopen bool
positionDropdownPosition | 'right' | 'left'NoDropdownPosition.leftIndicates where menu will be alligned horizontally
onSelect(event: any) => voidNo(_event: any): any => undefinedFunction callback called when user selects item
onToggle(value: boolean) => voidNo(_value: boolean): any => undefinedCallback called when application launcher toggle is clicked
aria-labelstringNo'Application launcher'Adds accessible text to the button. Required for plain buttons
isGroupedbooleanNofalseFlag to indicate if application launcher has groups
toggleIconReact.ReactNodeNo<ThIcon />Toggle Icon, optional to override the icon used for the toggle
favoritesstring[]No[]ID list of favorited ApplicationLauncherItems
onFavorite(itemId: string, isFavorite: boolean) => voidNoEnables favorites. Callback called when an ApplicationLauncherItem's favorite button is clicked
onSearch(textInput: string) => voidNoEnables search. Callback called when text input is entered into search box
searchPlaceholderTextstringNo'Filter by name...'Placeholder text for search input
searchNoResultsTextstringNo'No results found'Text for search input when no results are found
searchPropsanyNoAdditional properties for search input
favoritesLabelstringNo'Favorites'Label for the favorites group
toggleIdstringNoID of toggle
ApplicationLauncherItem properties
NameTypeRequiredDefaultDescription
iconReact.ReactNodeNonullIcon rendered before the text
isExternalbooleanNofalseIf clicking on the item should open the page in a separate window
tooltipReact.ReactNodeNonullTooltip to display when hovered over the item
tooltipPropsanyNonullAdditional tooltip props forwarded to the Tooltip component
componentReact.ReactNodeNo'a'A ReactElement to render, or a string to use as the component tag. Example: component={<Link to="/components/alert/">Alert</Link>} Example: component="button"
isFavoritebooleanNonullFlag indicating if the item is favorited
ariaIsFavoriteLabelstringNo'starred'Aria label text for favoritable button when favorited
ariaIsNotFavoriteLabelstringNo'not starred'Aria label text for favoritable button when not favorited
idstringNoID of the item. Required for tracking favorites.
customChildReact.ReactNodeNo
enterTriggersArrowDownbooleanNofalseFlag indicating if hitting enter triggers an arrow down key press. Automatically passed to favorites list items.
classNameNo''

CSS Variables

.pf-c-app-launcher--pf-c-app-launcher__menu--BackgroundColorc_app_launcher__menu_BackgroundColor
#fff
.pf-c-app-launcher--pf-c-app-launcher__menu--BorderWidthc_app_launcher__menu_BorderWidth
1px
.pf-c-app-launcher--pf-c-app-launcher__menu--BoxShadowc_app_launcher__menu_BoxShadow
0 0.0625rem 0.0625rem 0rem rgba(3, 3, 3, 0.05), 0 0.25rem 0.5rem 0.25rem rgba(3, 3, 3, 0.06)
.pf-c-app-launcher--pf-c-app-launcher__menu--PaddingTopc_app_launcher__menu_PaddingTop
0.5rem
.pf-c-app-launcher--pf-c-app-launcher__menu--PaddingBottomc_app_launcher__menu_PaddingBottom
0.5rem
.pf-c-app-launcher--pf-c-app-launcher__menu--Topc_app_launcher__menu_Top
calc(100% + 0.25rem)
.pf-c-app-launcher--pf-c-app-launcher__menu--ZIndexc_app_launcher__menu_ZIndex
200
.pf-c-app-launcher--pf-c-app-launcher--m-top__menu--Topc_app_launcher_m_top__menu_Top
0
.pf-c-app-launcher--pf-c-app-launcher--m-top__menu--Transformc_app_launcher_m_top__menu_Transform
translateY(calc(-100% - 0.25rem))
.pf-c-app-launcher--pf-c-app-launcher__toggle--PaddingTopc_app_launcher__toggle_PaddingTop
0.375rem
.pf-c-app-launcher--pf-c-app-launcher__toggle--PaddingRightc_app_launcher__toggle_PaddingRight
1rem
.pf-c-app-launcher--pf-c-app-launcher__toggle--PaddingBottomc_app_launcher__toggle_PaddingBottom
0.375rem
.pf-c-app-launcher--pf-c-app-launcher__toggle--PaddingLeftc_app_launcher__toggle_PaddingLeft
1rem
.pf-c-app-launcher--pf-c-app-launcher__toggle--Colorc_app_launcher__toggle_Color
#737679
.pf-c-app-launcher--pf-c-app-launcher__toggle--hover--Colorc_app_launcher__toggle_hover_Color
#151515
.pf-c-app-launcher--pf-c-app-launcher__toggle--active--Colorc_app_launcher__toggle_active_Color
#151515
.pf-c-app-launcher--pf-c-app-launcher__toggle--focus--Colorc_app_launcher__toggle_focus_Color
#151515
.pf-c-app-launcher--pf-c-app-launcher__toggle--disabled--Colorc_app_launcher__toggle_disabled_Color
#d2d2d2
.pf-c-app-launcher--pf-c-app-launcher__toggle--m-expanded--Colorc_app_launcher__toggle_m_expanded_Color
#151515
.pf-c-app-launcher--pf-c-app-launcher__menu-search--PaddingTopc_app_launcher__menu_search_PaddingTop
0.5rem
.pf-c-app-launcher--pf-c-app-launcher__menu-search--PaddingRightc_app_launcher__menu_search_PaddingRight
1rem
.pf-c-app-launcher--pf-c-app-launcher__menu-search--PaddingBottomc_app_launcher__menu_search_PaddingBottom
1rem
.pf-c-app-launcher--pf-c-app-launcher__menu-search--PaddingLeftc_app_launcher__menu_search_PaddingLeft
1rem
.pf-c-app-launcher--pf-c-app-launcher__menu-search--BottomBorderColorc_app_launcher__menu_search_BottomBorderColor
#d2d2d2
.pf-c-app-launcher--pf-c-app-launcher__menu-search--BottomBorderWidthc_app_launcher__menu_search_BottomBorderWidth
1px
.pf-c-app-launcher--pf-c-app-launcher__menu-search--MarginBottomc_app_launcher__menu_search_MarginBottom
0.5rem
.pf-c-app-launcher--pf-c-app-launcher__menu-item--PaddingTopc_app_launcher__menu_item_PaddingTop
0.5rem
.pf-c-app-launcher--pf-c-app-launcher__menu-item--PaddingRightc_app_launcher__menu_item_PaddingRight
1rem
.pf-c-app-launcher--pf-c-app-launcher__menu-item--PaddingBottomc_app_launcher__menu_item_PaddingBottom
0.5rem
.pf-c-app-launcher--pf-c-app-launcher__menu-item--PaddingLeftc_app_launcher__menu_item_PaddingLeft
1rem
.pf-c-app-launcher--pf-c-app-launcher__menu-item--Colorc_app_launcher__menu_item_Color
#151515
.pf-c-app-launcher--pf-c-app-launcher__menu-item--FontWeightc_app_launcher__menu_item_FontWeight
400
.pf-c-app-launcher--pf-c-app-launcher__menu-item--Widthc_app_launcher__menu_item_Width
100%
.pf-c-app-launcher--pf-c-app-launcher__menu-item--disabled--Colorc_app_launcher__menu_item_disabled_Color
#737679
.pf-c-app-launcher--pf-c-app-launcher__menu-item--hover--BackgroundColorc_app_launcher__menu_item_hover_BackgroundColor
#ededed
.pf-c-app-launcher--pf-c-app-launcher__menu-item--m-link--PaddingRightc_app_launcher__menu_item_m_link_PaddingRight
0
.pf-c-app-launcher--pf-c-app-launcher__menu-item--m-link--hover--BackgroundColorc_app_launcher__menu_item_m_link_hover_BackgroundColor
transparent
.pf-c-app-launcher--pf-c-app-launcher__menu-item--m-action--hover--BackgroundColorc_app_launcher__menu_item_m_action_hover_BackgroundColor
transparent
.pf-c-app-launcher--pf-c-app-launcher__menu-item--m-action--Colorc_app_launcher__menu_item_m_action_Color
#d2d2d2
.pf-c-app-launcher--pf-c-app-launcher__menu-item--m-action--Widthc_app_launcher__menu_item_m_action_Width
auto
.pf-c-app-launcher--pf-c-app-launcher__menu-item--m-action--FontSizec_app_launcher__menu_item_m_action_FontSize
0.625rem
.pf-c-app-launcher--pf-c-app-launcher__menu-item--hover__menu-item--m-action--Colorc_app_launcher__menu_item_hover__menu_item_m_action_Color
#737679
.pf-c-app-launcher--pf-c-app-launcher__menu-item--m-action--hover--Colorc_app_launcher__menu_item_m_action_hover_Color
#151515
.pf-c-app-launcher--pf-c-app-launcher__menu-item--m-favorite__menu-item--m-action--Colorc_app_launcher__menu_item_m_favorite__menu_item_m_action_Color
#f0ab00
.pf-c-app-launcher--pf-c-app-launcher__menu-item-icon--MarginRightc_app_launcher__menu_item_icon_MarginRight
0.5rem
.pf-c-app-launcher--pf-c-app-launcher__menu-item-icon--Widthc_app_launcher__menu_item_icon_Width
1.5rem
.pf-c-app-launcher--pf-c-app-launcher__menu-item-icon--Heightc_app_launcher__menu_item_icon_Height
1.5rem
.pf-c-app-launcher--pf-c-app-launcher__menu-item-external-icon--Colorc_app_launcher__menu_item_external_icon_Color
#06c
.pf-c-app-launcher--pf-c-app-launcher__menu-item-external-icon--PaddingLeftc_app_launcher__menu_item_external_icon_PaddingLeft
1rem
.pf-c-app-launcher--pf-c-app-launcher__menu-item-external-icon--Transformc_app_launcher__menu_item_external_icon_Transform
translateY(-0.0625rem)
.pf-c-app-launcher--pf-c-app-launcher__menu-item-external-icon--FontSizec_app_launcher__menu_item_external_icon_FontSize
0.625rem
.pf-c-app-launcher--pf-c-app-launcher__c-divider--MarginTopc_app_launcher__c_divider_MarginTop
0.5rem
.pf-c-app-launcher--pf-c-app-launcher__c-divider--MarginBottomc_app_launcher__c_divider_MarginBottom
0.5rem
.pf-c-app-launcher--pf-c-app-launcher__separator--Heightc_app_launcher__separator_Height
1px
.pf-c-app-launcher--pf-c-app-launcher__separator--BackgroundColorc_app_launcher__separator_BackgroundColor
#d2d2d2
.pf-c-app-launcher--pf-c-app-launcher__separator--MarginTopc_app_launcher__separator_MarginTop
0.5rem
.pf-c-app-launcher--pf-c-app-launcher__separator--MarginBottomc_app_launcher__separator_MarginBottom
0.5rem
.pf-c-app-launcher--pf-c-app-launcher__group--PaddingTopc_app_launcher__group_PaddingTop
0
.pf-c-app-launcher--pf-c-app-launcher__group--group--PaddingTopc_app_launcher__group_group_PaddingTop
0.5rem
.pf-c-app-launcher--pf-c-app-launcher__group--first-child--PaddingTopc_app_launcher__group_first_child_PaddingTop
0
.pf-c-app-launcher--pf-c-app-launcher__group-title--PaddingTopc_app_launcher__group_title_PaddingTop
0.5rem
.pf-c-app-launcher--pf-c-app-launcher__group-title--PaddingRightc_app_launcher__group_title_PaddingRight
1rem
.pf-c-app-launcher--pf-c-app-launcher__group-title--PaddingBottomc_app_launcher__group_title_PaddingBottom
0.5rem
.pf-c-app-launcher--pf-c-app-launcher__group-title--PaddingLeftc_app_launcher__group_title_PaddingLeft
1rem
.pf-c-app-launcher--pf-c-app-launcher__group-title--FontSizec_app_launcher__group_title_FontSize
0.875rem
.pf-c-app-launcher--pf-c-app-launcher__group-title--FontWeightc_app_launcher__group_title_FontWeight
500
.pf-c-app-launcher--pf-c-app-launcher__group-title--Colorc_app_launcher__group_title_Color
#737679
.pf-c-app-launcher__toggle:hover--pf-c-app-launcher__toggle--Colorc_app_launcher__toggle_Color
#151515
.pf-c-app-launcher__toggle:active--pf-c-app-launcher__toggle--Colorc_app_launcher__toggle_Color
#151515
.pf-c-app-launcher__toggle:focus--pf-c-app-launcher__toggle--Colorc_app_launcher__toggle_Color
#151515
.pf-c-app-launcher__toggle:disabled--pf-c-app-launcher__toggle--Colorc_app_launcher__toggle_Color
#d2d2d2
.pf-c-app-launcher.pf-m-top .pf-c-app-launcher__menu--pf-c-app-launcher__menu--Topc_app_launcher__menu_Top
0
.pf-c-app-launcher__menu-wrapper.pf-m-favorite--pf-c-app-launcher__menu-item--m-action--Colorc_app_launcher__menu_item_m_action_Color
#f0ab00
.pf-c-app-launcher__menu-item:hover--pf-c-app-launcher__menu-item--m-action--Colorc_app_launcher__menu_item_m_action_Color
#737679
.pf-c-app-launcher__menu-item:disabled--pf-c-app-launcher__menu-item--Colorc_app_launcher__menu_item_Color
#737679
.pf-c-app-launcher__menu-item.pf-m-link--pf-c-app-launcher__menu-item--PaddingRightc_app_launcher__menu_item_PaddingRight
0
.pf-c-app-launcher__menu-item.pf-m-link--pf-c-app-launcher__menu-item--hover--BackgroundColorc_app_launcher__menu_item_hover_BackgroundColor
transparent
.pf-c-app-launcher__menu-item.pf-m-action--pf-c-app-launcher__menu-item--hover--BackgroundColorc_app_launcher__menu_item_hover_BackgroundColor
transparent
.pf-c-app-launcher__menu-item.pf-m-action--pf-c-app-launcher__menu-item--Colorc_app_launcher__menu_item_Color
#d2d2d2
.pf-c-app-launcher__menu-item.pf-m-action--pf-c-app-launcher__menu-item--Widthc_app_launcher__menu_item_Width
auto
.pf-c-app-launcher__menu-item.pf-m-action:hover--pf-c-app-launcher__menu-item--m-action--Colorc_app_launcher__menu_item_m_action_Color
#151515
.pf-c-app-launcher__separator:last-child--pf-c-app-launcher__separator--MarginBottomc_app_launcher__separator_MarginBottom
0
.pf-c-app-launcher__group:first-child--pf-c-app-launcher__group--PaddingTopc_app_launcher__group_PaddingTop
0
.pf-c-app-launcher__group + .pf-c-app-launcher__group--pf-c-app-launcher__group--PaddingTopc_app_launcher__group_PaddingTop
0.5rem