HTML

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-iconHides the icon from assistive technologies.

Usage

ClassAppliedOutcome
.pf-c-app-launcher<nav>Defines the parent wrapper of the app launcher.
.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-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<i>Defines the external link icon that appears on hover/focus. Use with .pf-m-external.
.pf-c-app-launcher__separator<li>, <hr>Defines a separator within the menu. Can be used between items (<li>) or between groups (<hr>). There are no visual differences between the types of elements used as a separator. The different elements allowed are only to support valid markup depending on where you place the separator.
.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-hover.pf-c-app-launcher__menu-itemForces display of the hover state of the element. This state is primarily for demonstration purposes and would not normally be used in lieu of the :hover pseudo-class.
.pf-m-focus.pf-c-app-launcher__menu-itemForces display of the focus state of the element. This state is primarily for demonstration purposes and would not normally be used in lieu of the :focus pseudo-class.
.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-itemModifies item to be a favorited item.
.pf-m-wrapper.pf-c-app-launcher__menu-itemModifies item to be a wrapper with clickable elements inside.
.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.

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))