HTML

App 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

Applauncher collapsed

Copied to clipboard

Applauncher expanded

Copied to clipboard

Documentation

Accessibility

Attribute Applied Outcome
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 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

Usage

Class Applied Outcome
.pf-c-app-launcher <div> Defines the parent wrapper of the app launcher.
.pf-c-app-launcher__menu <ul> Defines the parent wrapper of the menu items
.pf-c-app-launcher__menu-item <a> Defines a menu item
.pf-m-expanded .pf-c-app-launcher Modifies for the expanded state
.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.

CSS Variables

--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_Topcalc(100% + 0.25rem)
--pf-c-app-launcher__menu--ZIndexc_app_launcher__menu_ZIndex100
--pf-c-app-launcher__menu-item--Colorc_app_launcher__menu_item_Color#72767b
--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#72767b
--pf-c-app-launcher__menu-item--hover--BackgroundColorc_app_launcher__menu_item_hover_BackgroundColor#ededed
--pf-c-app-launcher__toggle--Colorc_app_launcher__toggle_Color#151515
--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--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