Patternfly Logo

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 properties
NameTypeRequiredDefaultDescription
aria-labelstringNo'Application launcher'Adds accessible text to the button. Required for plain buttons
classNamestringNo''Additional element css classes
directionDropdownDirection | 'up' | 'down'NoDropdownDirection.downDisplay menu above or below dropdown toggle
favoritesstring[]No[]ID list of favorited ApplicationLauncherItems
favoritesLabelstringNo'Favorites'Label for the favorites group
isDisabledbooleanNofalseRender Application launcher toggle as disabled icon
isGroupedbooleanNofalseFlag to indicate if application launcher has groups
isOpenbooleanNofalseopen bool
itemsReact.ReactNode[]NoArray of application launcher items
menuAppendToNo type infoNo'inline'
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
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
positionDropdownPosition | 'right' | 'left'NoDropdownPosition.leftIndicates where menu will be alligned horizontally
searchNoResultsTextstringNo'No results found'Text for search input when no results are found
searchPlaceholderTextstringNo'Filter by name...'Placeholder text for search input
searchPropsanyNoAdditional properties for search input
toggleIconReact.ReactNodeNo<ThIcon />Toggle Icon, optional to override the icon used for the toggle
toggleIdstringNoID of toggle
ApplicationLauncherItem properties
NameTypeRequiredDefaultDescription
ariaIsFavoriteLabelstringNo'starred'Aria label text for favoritable button when favorited
ariaIsNotFavoriteLabelstringNo'not starred'Aria label text for favoritable button when not favorited
classNameNo type infoNo''
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"
customChildReact.ReactNodeNo
enterTriggersArrowDownbooleanNofalseFlag indicating if hitting enter triggers an arrow down key press. Automatically passed to favorites list items.
iconReact.ReactNodeNonullIcon rendered before the text
idstringNoID of the item. Required for tracking favorites.
isExternalbooleanNofalseIf clicking on the item should open the page in a separate window
isFavoritebooleanNonullFlag indicating if the item is favorited
tooltipReact.ReactNodeNonullTooltip to display when hovered over the item
tooltipPropsanyNonullAdditional tooltip props forwarded to the Tooltip component

CSS variables

.pf-c-app-launcher--pf-c-app-launcher__menu--BackgroundColor
#fff
.pf-c-app-launcher--pf-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-c-app-launcher--pf-c-app-launcher__menu--PaddingTop
0.5rem
.pf-c-app-launcher--pf-c-app-launcher__menu--PaddingBottom
0.5rem
.pf-c-app-launcher--pf-c-app-launcher__menu--Top
calc(100% + 0.25rem)
.pf-c-app-launcher--pf-c-app-launcher__menu--ZIndex
200
.pf-c-app-launcher--pf-c-app-launcher--m-top__menu--Top
0
.pf-c-app-launcher--pf-c-app-launcher--m-top__menu--TranslateY
calc(-100% - 0.25rem)
.pf-c-app-launcher--pf-c-app-launcher__toggle--PaddingTop
0.375rem
.pf-c-app-launcher--pf-c-app-launcher__toggle--PaddingRight
1rem
.pf-c-app-launcher--pf-c-app-launcher__toggle--PaddingBottom
0.375rem
.pf-c-app-launcher--pf-c-app-launcher__toggle--PaddingLeft
1rem
.pf-c-app-launcher--pf-c-app-launcher__toggle--Color
#6a6e73
.pf-c-app-launcher--pf-c-app-launcher__toggle--hover--Color
#151515
.pf-c-app-launcher--pf-c-app-launcher__toggle--active--Color
#151515
.pf-c-app-launcher--pf-c-app-launcher__toggle--focus--Color
#151515
.pf-c-app-launcher--pf-c-app-launcher__toggle--disabled--Color
#d2d2d2
.pf-c-app-launcher--pf-c-app-launcher__toggle--m-expanded--Color
#151515
.pf-c-app-launcher--pf-c-app-launcher__menu-search--PaddingTop
0.5rem
.pf-c-app-launcher--pf-c-app-launcher__menu-search--PaddingRight
1rem
.pf-c-app-launcher--pf-c-app-launcher__menu-search--PaddingBottom
1rem
.pf-c-app-launcher--pf-c-app-launcher__menu-search--PaddingLeft
1rem
.pf-c-app-launcher--pf-c-app-launcher__menu-search--BottomBorderColor
#d2d2d2
.pf-c-app-launcher--pf-c-app-launcher__menu-search--BottomBorderWidth
1px
.pf-c-app-launcher--pf-c-app-launcher__menu-search--MarginBottom
0.5rem
.pf-c-app-launcher--pf-c-app-launcher__menu-item--PaddingTop
0.5rem
.pf-c-app-launcher--pf-c-app-launcher__menu-item--PaddingRight
1rem
.pf-c-app-launcher--pf-c-app-launcher__menu-item--PaddingBottom
0.5rem
.pf-c-app-launcher--pf-c-app-launcher__menu-item--PaddingLeft
1rem
.pf-c-app-launcher--pf-c-app-launcher__menu-item--Color
#151515
.pf-c-app-launcher--pf-c-app-launcher__menu-item--FontWeight
400
.pf-c-app-launcher--pf-c-app-launcher__menu-item--Width
100%
.pf-c-app-launcher--pf-c-app-launcher__menu-item--disabled--Color
#6a6e73
.pf-c-app-launcher--pf-c-app-launcher__menu-item--hover--BackgroundColor
#f0f0f0
.pf-c-app-launcher--pf-c-app-launcher__menu-item--m-link--PaddingRight
0
.pf-c-app-launcher--pf-c-app-launcher__menu-item--m-link--hover--BackgroundColor
transparent
.pf-c-app-launcher--pf-c-app-launcher__menu-item--m-action--Color
#d2d2d2
.pf-c-app-launcher--pf-c-app-launcher__menu-item--m-action--Width
auto
.pf-c-app-launcher--pf-c-app-launcher__menu-item--m-action--FontSize
0.625rem
.pf-c-app-launcher--pf-c-app-launcher__menu-item--m-action--hover--BackgroundColor
transparent
.pf-c-app-launcher--pf-c-app-launcher__menu-item--hover__menu-item--m-action--Color
#6a6e73
.pf-c-app-launcher--pf-c-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--Color
#f0ab00
.pf-c-app-launcher--pf-c-app-launcher__menu-item-icon--MarginRight
0.5rem
.pf-c-app-launcher--pf-c-app-launcher__menu-item-icon--Width
1.5rem
.pf-c-app-launcher--pf-c-app-launcher__menu-item-icon--Height
1.5rem
.pf-c-app-launcher--pf-c-app-launcher__menu-item-external-icon--Color
#06c
.pf-c-app-launcher--pf-c-app-launcher__menu-item-external-icon--PaddingLeft
1rem
.pf-c-app-launcher--pf-c-app-launcher__menu-item-external-icon--TranslateY
-0.0625rem
.pf-c-app-launcher--pf-c-app-launcher__menu-item-external-icon--FontSize
0.625rem
.pf-c-app-launcher--pf-c-app-launcher__group--group--PaddingTop
0.5rem
.pf-c-app-launcher--pf-c-app-launcher__group-title--PaddingTop
0.5rem
.pf-c-app-launcher--pf-c-app-launcher__group-title--PaddingRight
1rem
.pf-c-app-launcher--pf-c-app-launcher__group-title--PaddingBottom
0.5rem
.pf-c-app-launcher--pf-c-app-launcher__group-title--PaddingLeft
1rem
.pf-c-app-launcher--pf-c-app-launcher__group-title--FontSize
0.875rem
.pf-c-app-launcher--pf-c-app-launcher__group-title--FontWeight
700
.pf-c-app-launcher--pf-c-app-launcher__group-title--Color
#6a6e73
.pf-c-app-launcher--pf-c-app-launcher--c-divider--MarginTop
0.5rem
.pf-c-app-launcher--pf-c-app-launcher--c-divider--MarginBottom
0.5rem
.pf-c-app-launcher .pf-c-divider:last-child--pf-c-app-launcher--c-divider--MarginBottom
0
.pf-c-app-launcher__toggle:hover--pf-c-app-launcher__toggle--Color
#151515
.pf-c-app-launcher__toggle:active--pf-c-app-launcher__toggle--Color
#151515
.pf-c-app-launcher__toggle:focus--pf-c-app-launcher__toggle--Color
#151515
.pf-c-app-launcher__toggle:disabled--pf-c-app-launcher__toggle--Color
#d2d2d2
.pf-c-app-launcher.pf-m-top .pf-c-app-launcher__menu--pf-c-app-launcher__menu--Top
0
.pf-c-app-launcher__menu-wrapper.pf-m-favorite--pf-c-app-launcher__menu-item--m-action--Color
#f0ab00
.pf-c-app-launcher__menu-item:hover--pf-c-app-launcher__menu-item--m-action--Color
#6a6e73
.pf-c-app-launcher__menu-item:disabled--pf-c-app-launcher__menu-item--Color
#6a6e73
.pf-c-app-launcher__menu-item.pf-m-link--pf-c-app-launcher__menu-item--PaddingRight
0
.pf-c-app-launcher__menu-item.pf-m-link--pf-c-app-launcher__menu-item--hover--BackgroundColor
transparent
.pf-c-app-launcher__menu-item.pf-m-action--pf-c-app-launcher__menu-item--Color
#d2d2d2
.pf-c-app-launcher__menu-item.pf-m-action--pf-c-app-launcher__menu-item--Width
auto
.pf-c-app-launcher__menu-item.pf-m-action--pf-c-app-launcher__menu-item--hover--BackgroundColor
transparent
.pf-c-app-launcher__menu-item.pf-m-action:hover--pf-c-app-launcher__menu-item--m-action--Color
#151515

View source on GitHub