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
Copied to clipboard

App launcher disabled

Copied to clipboard

App launcher align right

Copied to clipboard

App launcher top

Copied to clipboard

App launcher with tooltip

Copied to clipboard

App launcher w/ sections and icons

Copied to clipboard

App 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
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''

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#737679
--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#737679
--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#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_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))