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.

ExamplesDocumentationCSS Variables

Examples

Collapsed

Disabled

Expanded

Aligned right

Aligned top

With sections and dividers between sections

With sections and dividers between items

Documentation

Accessibility

AttributeAppliedOutcome
aria-label="Application launcher".pf-c-app-launcherGives the app launcher element an accessible name. Required
aria-expanded="false".pf-c-buttonIndicates that the menu is hidden.
aria-expanded="true".pf-c-buttonIndicates that the menu is visible.
aria-label="Actions".pf-c-buttonProvides an accessible name for the app launcher when an icon is used. Required
hidden.pf-c-app-launcher__menuIndicates that the menu is hidden so that it isn't visible in the UI and isn't accessed by assistive technologies.
disabled.pf-c-app-launcher__toggleDisables the app launcher toggle and removes it from keyboard focus.
disabledbutton.pf-c-app-launcher__menu-itemWhen the menu item uses a button element, indicates that it is unavailable and removes it from keyboard focus.
aria-disabled="true"a.pf-c-app-launcher__menu-itemWhen the menu item uses a link element, indicates that it is unavailable.
tabindex="-1"a.pf-c-app-launcher__menu-itemWhen the menu item uses a link element, removes it from keyboard focus.
aria-hidden="true".pf-c-app-launcher__menu-item-external-icon > *Hides the icon from assistive technologies.

Usage

ClassAppliedOutcome
.pf-c-app-launcher<nav>Defines the parent wrapper of the app launcher.
.pf-c-app-launcher__toggle<button>Defines the app launcher toggle.
.pf-c-app-launcher__menu<ul>, <div>Defines the parent wrapper of the menu items. Use a <div> if your app launcher has groups.
.pf-c-app-launcher__menu-search<div>Defines the wrapper for the search input.
.pf-c-app-launcher__group<section>Defines a group of items. Required when there is more than one group.
.pf-c-app-launcher__group-title<h1>Defines a title for a group of items.
.pf-c-app-launcher__menu-wrapper<li>Defines a menu wrapper for use with multiple actionable items in a single item row.
.pf-c-app-launcher__menu-item<a>, <button>Defines a menu item.
.pf-c-app-launcher__menu-item-icon<span>Defines the wrapper for the menu item icon.
.pf-c-app-launcher__menu-item-external-icon<span>Defines the wrapper for the external link icon that appears on hover/focus. Use with .pf-m-external.
.pf-m-expanded.pf-c-app-launcherModifies for the expanded state.
.pf-m-top.pf-c-app-launcherModifies to display the menu above the toggle.
.pf-m-align-right.pf-c-app-launcher__menuModifies to display the menu aligned to the right edge of the toggle.
.pf-m-disableda.pf-c-app-launcher__menu-itemModifies to display the menu item as disabled.
.pf-m-external.pf-c-app-launcher__menu-itemModifies to display the menu item as having an external link icon on hover/focus.
.pf-m-favorite.pf-c-app-launcher__menu-wrapperModifies wrapper to indicate that the item row has been favorited.
.pf-m-link.pf-c-app-launcher__menu-item.pf-m-wrapper > .pf-c-app-launcher__menu-itemModifies item for link styles.
.pf-m-action.pf-c-app-launcher__menu-item.pf-m-wrapper > .pf-c-app-launcher__menu-itemModifies item to for action styles.
.pf-m-active.pf-c-app-launcher__toggleForces display of the active state of the toggle.

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--BoxShadowc_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--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--TranslateYc_app_launcher_m_top__menu_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
#6a6e73
.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
#6a6e73
.pf-c-app-launcher--pf-c-app-launcher__menu-item--hover--BackgroundColorc_app_launcher__menu_item_hover_BackgroundColor
#f0f0f0
.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
#6a6e73
.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--TranslateYc_app_launcher__menu_item_external_icon_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__group--group--PaddingTopc_app_launcher__group_group_PaddingTop
0.5rem
.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
700
.pf-c-app-launcher--pf-c-app-launcher__group-title--Colorc_app_launcher__group_title_Color
#6a6e73
.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-divider:last-child--pf-c-app-launcher--c-divider--MarginBottomc_app_launcher_c_divider_MarginBottom
0
.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
#6a6e73
.pf-c-app-launcher__menu-item:disabled--pf-c-app-launcher__menu-item--Colorc_app_launcher__menu_item_Color
#6a6e73
.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