PatternFly

Application launcher

Deprecated
Demo

An application launcher is an option menu that allows a user to launch a separate web application in a new browser window.

Warning alert:Deprecated feature

This implementation has been deprecated in favor of a newer implementation, and is no longer getting maintained or enhanced. To learn more about the process, visit our about page.

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

Basic with menu appended to document body

Props

ApplicationLauncher

*required
NameTypeDefaultDescription
aria-labelstring'Application launcher'Adds accessible text to the button. Required for plain buttons
classNamestring''Additional element css classes
directionDropdownDirection | 'up' | 'down'DropdownDirection.downDisplay menu above or below dropdown toggle
favoritesstring[][]ID list of favorited ApplicationLauncherItems
favoritesLabelstring'Favorites'Label for the favorites group
isDisabledbooleanfalseRender Application launcher toggle as disabled icon
isGroupedbooleanfalseFlag to indicate if application launcher has groups
isOpenbooleanfalseopen bool
itemsReact.ReactNode[][]Array of application launcher items
menuAppendToHTMLElement | (() => HTMLElement) | 'inline' | 'parent''inline'The container to append the menu to. Defaults to 'inline'. If your menu is being cut off you can append it to an element higher up the DOM tree. Some examples: menuAppendTo="parent" menuAppendTo={() => document.body} menuAppendTo={document.getElementById('target')}
onFavorite(event: React.MouseEvent<HTMLButtonElement, MouseEvent>, itemId: string, isFavorite: boolean) => voidEnables favorites. Callback called when an ApplicationLauncherItem's favorite button is clicked
onSearch(event: React.FormEvent<HTMLInputElement>, textInput: string) => voidEnables search. Callback called when text input is entered into search box
onSelect(event: any) => void(_event: any): any => undefinedFunction callback called when user selects item
onToggle( event: MouseEvent | TouchEvent | KeyboardEvent | React.KeyboardEvent<any> | React.MouseEvent<HTMLButtonElement>, isOpen: boolean ) => void(_event: any, _value: boolean): any => undefinedCallback called when application launcher toggle is clicked
positionDropdownPosition | 'right' | 'left'DropdownPosition.leftIndicates where menu will be alligned horizontally
searchNoResultsTextstring'No results found'Text for search input when no results are found
searchPlaceholderTextstring'Filter by name...'Placeholder text for search input
searchPropsanyAdditional properties for search input
toggleIconReact.ReactNode<ThIcon />Toggle Icon, optional to override the icon used for the toggle
toggleIdstringID of toggle
zIndexnumberz-index of the application launcher when menuAppendTo is not inline.

ApplicationLauncherItem

*required
NameTypeDefaultDescription
ariaIsFavoriteLabelstring'starred'Aria label text for favoritable button when favorited
ariaIsNotFavoriteLabelstring'not starred'Aria label text for favoritable button when not favorited
classNameNo type info''
componentReact.ReactNode'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"
customChildReact.ReactNodeCustom item rendering that receives the ApplicationLauncherContext
enterTriggersArrowDownbooleanfalseFlag indicating if hitting enter triggers an arrow down key press. Automatically passed to favorites list items.
iconReact.ReactNodenullIcon rendered before the text
idstringID of the item. Required for tracking favorites.
isExternalbooleanfalseIf clicking on the item should open the page in a separate window
isFavoritebooleannullFlag indicating if the item is favorited
tooltipReact.ReactNodenullTooltip to display when hovered over the item
tooltipPropsanynullAdditional tooltip props forwarded to the Tooltip component

ApplicationLauncherContent

*required
NameTypeDefaultDescription
childrenrequiredReact.ReactNodeMain content to be rendered

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__menu--BackgroundColor
#fff
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__menu--BoxShadow
0 0.25rem 0.5rem 0rem rgba(3, 3, 3, 0.12), 0 0 0.25rem 0 rgba(3, 3, 3, 0.06)
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__menu--PaddingTop
0.5rem
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__menu--PaddingBottom
0.5rem
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__menu--Top
calc(100% + 0.25rem)
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__menu--ZIndex
200
.pf-v5-c-app-launcher--pf-v5-c-app-launcher--m-top__menu--Top
0
.pf-v5-c-app-launcher--pf-v5-c-app-launcher--m-top__menu--TranslateY
calc(-100% - 0.25rem)
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__toggle--PaddingTop
0.375rem
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__toggle--PaddingRight
1rem
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__toggle--PaddingBottom
0.375rem
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__toggle--PaddingLeft
1rem
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__toggle--Color
#6a6e73
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__toggle--hover--Color
#151515
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__toggle--active--Color
#151515
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__toggle--focus--Color
#151515
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__toggle--disabled--Color
#d2d2d2
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__toggle--m-expanded--Color
#151515
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__toggle--BackgroundColor
transparent
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__menu-search--PaddingTop
0.5rem
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__menu-search--PaddingRight
1rem
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__menu-search--PaddingBottom
1rem
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__menu-search--PaddingLeft
1rem
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__menu-search--BottomBorderColor
#d2d2d2
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__menu-search--BottomBorderWidth
1px
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__menu-search--MarginBottom
0.5rem
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__menu-item--PaddingTop
0.5rem
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__menu-item--PaddingRight
1rem
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__menu-item--PaddingBottom
0.5rem
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__menu-item--PaddingLeft
1rem
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__menu-item--Color
#151515
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__menu-item--FontWeight
400
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__menu-item--Width
100%
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__menu-item--disabled--Color
#6a6e73
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__menu-item--hover--BackgroundColor
#f0f0f0
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__menu-item--m-link--PaddingRight
0
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__menu-item--m-link--hover--BackgroundColor
transparent
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__menu-item--m-action--Color
#6a6e73
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__menu-item--m-action--Width
auto
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__menu-item--m-action--FontSize
0.75rem
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__menu-item--m-action--hover--BackgroundColor
transparent
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__menu-item--hover__menu-item--m-action--Color
#6a6e73
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__menu-item--m-action--hover--Color
#151515
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__menu-item--m-action--disabled--Color
#d2d2d2
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__menu-item--m-favorite__menu-item--m-action--Color
#f0ab00
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__menu-item--m-favorite__menu-item--m-action--hover--Color
#c58c00
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__menu-item-icon--MarginRight
0.5rem
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__menu-item-icon--Width
1.5rem
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__menu-item-icon--Height
1.5rem
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__menu-item-external-icon--Color
#06c
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__menu-item-external-icon--PaddingLeft
1rem
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__menu-item-external-icon--TranslateY
-0.0625rem
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__menu-item-external-icon--FontSize
0.75rem
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__group--group--PaddingTop
0.5rem
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__group-title--PaddingTop
0.5rem
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__group-title--PaddingRight
1rem
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__group-title--PaddingBottom
0.5rem
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__group-title--PaddingLeft
1rem
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__group-title--FontSize
0.75rem
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__group-title--FontWeight
400
.pf-v5-c-app-launcher--pf-v5-c-app-launcher__group-title--Color
#6a6e73
.pf-v5-c-app-launcher--pf-v5-c-app-launcher--c-divider--MarginTop
0.5rem
.pf-v5-c-app-launcher--pf-v5-c-app-launcher--c-divider--MarginBottom
0.5rem
.pf-v5-c-app-launcher .pf-v5-c-divider:last-child--pf-v5-c-app-launcher--c-divider--MarginBottom
0
.pf-v5-c-app-launcher__toggle:hover--pf-v5-c-app-launcher__toggle--Color
#151515
.pf-v5-c-app-launcher__toggle:active--pf-v5-c-app-launcher__toggle--Color
#151515
.pf-v5-c-app-launcher__toggle:focus--pf-v5-c-app-launcher__toggle--Color
#151515
.pf-v5-c-app-launcher__toggle:disabled--pf-v5-c-app-launcher__toggle--Color
#d2d2d2
.pf-v5-c-app-launcher.pf-m-top .pf-v5-c-app-launcher__menu--pf-v5-c-app-launcher__menu--Top
0
.pf-v5-c-app-launcher__menu.pf-m-static--pf-v5-c-app-launcher--m-top__menu--TranslateY
0
.pf-v5-c-app-launcher__menu-wrapper.pf-m-favorite--pf-v5-c-app-launcher__menu-item--m-action--Color
#f0ab00
.pf-v5-c-app-launcher__menu-wrapper.pf-m-favorite--pf-v5-c-app-launcher__menu-item--m-action--hover--Color
#c58c00
.pf-v5-c-app-launcher__menu-item:hover--pf-v5-c-app-launcher__menu-item--m-action--Color
#6a6e73
.pf-v5-c-app-launcher__menu-item:disabled--pf-v5-c-app-launcher__menu-item--Color
#6a6e73
.pf-v5-c-app-launcher__menu-item:disabled--pf-v5-c-app-launcher__menu-item--m-action--Color
#d2d2d2
.pf-v5-c-app-launcher__menu-item.pf-m-link--pf-v5-c-app-launcher__menu-item--PaddingRight
0
.pf-v5-c-app-launcher__menu-item.pf-m-link--pf-v5-c-app-launcher__menu-item--hover--BackgroundColor
transparent
.pf-v5-c-app-launcher__menu-item.pf-m-action--pf-v5-c-app-launcher__menu-item--Color
#6a6e73
.pf-v5-c-app-launcher__menu-item.pf-m-action--pf-v5-c-app-launcher__menu-item--Width
auto
.pf-v5-c-app-launcher__menu-item.pf-m-action--pf-v5-c-app-launcher__menu-item--hover--BackgroundColor
transparent
.pf-v5-c-app-launcher__menu-item.pf-m-action:hover--pf-v5-c-app-launcher__menu-item--m-action--Color
#151515

View source on GitHub