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

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
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 properties
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
componentReact.ReactNode'a'The component that will wrap the item. If you need to render a custom component, for example a react router Link component, then pass the component here. Example: <ApplicationLauncherItem key="router1" component={ <Link to="/components/alert/"> <ApplicationLauncherContent>Router link</ApplicationLauncherContent> </Link> } />
className''null

CSS Variables

--pf-c-app-launcher__c-divider--MarginBottomc_app_launcher__c_divider_MarginBottom
0.5rem
--pf-c-app-launcher__c-divider--MarginTopc_app_launcher__c_divider_MarginTop
0.5rem
--pf-c-app-launcher__group--first-child--PaddingTopc_app_launcher__group_first_child_PaddingTop
0
--pf-c-app-launcher__group--group--PaddingTopc_app_launcher__group_group_PaddingTop
0.5rem
--pf-c-app-launcher__group--PaddingTopc_app_launcher__group_PaddingTop
0.5rem
--pf-c-app-launcher__group-title--Colorc_app_launcher__group_title_Color
#737679
--pf-c-app-launcher__group-title--FontSizec_app_launcher__group_title_FontSize
0.875rem
--pf-c-app-launcher__group-title--FontWeightc_app_launcher__group_title_FontWeight
700
--pf-c-app-launcher__group-title--PaddingBottomc_app_launcher__group_title_PaddingBottom
0.5rem
--pf-c-app-launcher__group-title--PaddingLeftc_app_launcher__group_title_PaddingLeft
1rem
--pf-c-app-launcher__group-title--PaddingRightc_app_launcher__group_title_PaddingRight
1rem
--pf-c-app-launcher__group-title--PaddingTopc_app_launcher__group_title_PaddingTop
0.5rem
--pf-c-app-launcher__menu--BackgroundColorc_app_launcher__menu_BackgroundColor
#fff
--pf-c-app-launcher__menu--BorderWidthc_app_launcher__menu_BorderWidth
1px
--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__menu-item--Colorc_app_launcher__menu_item_Color
#737679
--pf-c-app-launcher__menu-item--disabled--Colorc_app_launcher__menu_item_disabled_Color
#737679
--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_FontSize
0.875rem
--pf-c-app-launcher__menu-item-external-icon--PaddingLeftc_app_launcher__menu_item_external_icon_PaddingLeft
1.5rem
--pf-c-app-launcher__menu-item-external-icon--Transformc_app_launcher__menu_item_external_icon_Transform
translateY(-0.0625rem)
--pf-c-app-launcher__menu-item--FontWeightc_app_launcher__menu_item_FontWeight
400
--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_Height
1.5rem
--pf-c-app-launcher__menu-item-icon--MarginRightc_app_launcher__menu_item_icon_MarginRight
0.5rem
--pf-c-app-launcher__menu-item-icon--Widthc_app_launcher__menu_item_icon_Width
1.5rem
--pf-c-app-launcher__menu-item--PaddingBottomc_app_launcher__menu_item_PaddingBottom
0.5rem
--pf-c-app-launcher__menu-item--PaddingLeftc_app_launcher__menu_item_PaddingLeft
1rem
--pf-c-app-launcher__menu-item--PaddingRightc_app_launcher__menu_item_PaddingRight
1rem
--pf-c-app-launcher__menu-item--PaddingTopc_app_launcher__menu_item_PaddingTop
0.5rem
--pf-c-app-launcher__menu--PaddingBottomc_app_launcher__menu_PaddingBottom
0.5rem
--pf-c-app-launcher__menu--PaddingTopc_app_launcher__menu_PaddingTop
0.5rem
--pf-c-app-launcher__menu--Topc_app_launcher__menu_Top
0
--pf-c-app-launcher__menu--ZIndexc_app_launcher__menu_ZIndex
200
--pf-c-app-launcher__separator--BackgroundColorc_app_launcher__separator_BackgroundColor
#d2d2d2
--pf-c-app-launcher__separator--Heightc_app_launcher__separator_Height
1px
--pf-c-app-launcher__separator--MarginBottomc_app_launcher__separator_MarginBottom
0
--pf-c-app-launcher__separator--MarginTopc_app_launcher__separator_MarginTop
0.5rem
--pf-c-app-launcher__toggle--active--Colorc_app_launcher__toggle_active_Color
#151515
--pf-c-app-launcher__toggle--Colorc_app_launcher__toggle_Color
#d2d2d2
--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__toggle--PaddingBottomc_app_launcher__toggle_PaddingBottom
0.375rem
--pf-c-app-launcher__toggle--PaddingLeftc_app_launcher__toggle_PaddingLeft
1rem
--pf-c-app-launcher__toggle--PaddingRightc_app_launcher__toggle_PaddingRight
1rem
--pf-c-app-launcher__toggle--PaddingTopc_app_launcher__toggle_PaddingTop
0.375rem
--pf-c-app-launcher--m-top__menu--Topc_app_launcher_m_top__menu_Top
0
--pf-c-app-launcher--m-top__menu--Transformc_app_launcher_m_top__menu_Transform
translateY(calc(-100% - 0.25rem))