Skip to Content
Patternfly Logo

Application launcher

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