HTML

App launcher

ExamplesDocumentationCSS variables

Examples

App launcher collapsed

Copied to clipboard

App launcher disabled

Copied to clipboard

App launcher expanded

Copied to clipboard

App launcher align right

Copied to clipboard

App launcher top

Copied to clipboard

App launcher w/ sections and icons

Copied to clipboard

Documentation

Accessibility

Attribute Applied Outcome
aria-label="Application launcher" .pf-c-app-launcher Gives the app launcher element an accessible name. Required
aria-expanded="false" .pf-c-button Indicates that the menu is hidden.
aria-expanded="true" .pf-c-button Indicates that the menu is visible.
aria-label="Actions" .pf-c-button Provides an accessible name for the app launcher when an icon is used. Required
hidden .pf-c-app-launcher__menu Indicates 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__toggle Disables the app launcher toggle and removes it from keyboard focus.
disabled button.pf-c-app-launcher__menu-item When 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-item When the menu item uses a link element, indicates that it is unavailable.
tabindex="-1" a.pf-c-app-launcher__menu-item When 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

Class Applied Outcome
.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__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-text <span> Defines the wrapper for the menu item text.
.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>).
.pf-m-expanded .pf-c-app-launcher Modifies for the expanded state.
.pf-m-top .pf-c-app-launcher Modifies to display the menu above the toggle.
.pf-m-align-right .pf-c-app-launcher__menu Modifies to display the menu aligned to the right edge of the toggle.
.pf-m-hover .pf-c-app-launcher__menu-item Forces 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-item Forces 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-disabled a.pf-c-app-launcher__menu-item Modifies to display the menu item as disabled.
.pf-m-external .pf-c-app-launcher__menu-item Modifies to display the menu item as having an external link icon on hover/focus.

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