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 VariablesExamples
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__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 | <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-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-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. |
.pf-m-favorite | .pf-c-app-launcher__menu-item | Modifies item to be a favorited item. |
.pf-m-wrapper | .pf-c-app-launcher__menu-item | Modifies 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-item | Modifies item for link styles. |
.pf-m-action | .pf-c-app-launcher__menu-item.pf-m-wrapper > .pf-c-app-launcher__menu-item | Modifies item to for action styles. |
CSS Variables
| .pf-c-app-launcher | --pf-c-app-launcher__menu--BackgroundColor | #fff | ||
| .pf-c-app-launcher | --pf-c-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--PaddingTop | 0.5rem | ||
| .pf-c-app-launcher | --pf-c-app-launcher__menu--PaddingBottom | 0.5rem | ||
| .pf-c-app-launcher | --pf-c-app-launcher__menu--Top | calc(100% + 0.25rem) | ||
| .pf-c-app-launcher | --pf-c-app-launcher__menu--ZIndex | 200 | ||
| .pf-c-app-launcher | --pf-c-app-launcher--m-top__menu--Top | 0 | ||
| .pf-c-app-launcher | --pf-c-app-launcher--m-top__menu--Transform | translateY(calc(-100% - 0.25rem)) | ||
| .pf-c-app-launcher | --pf-c-app-launcher__toggle--PaddingTop | 0.375rem | ||
| .pf-c-app-launcher | --pf-c-app-launcher__toggle--PaddingRight | 1rem | ||
| .pf-c-app-launcher | --pf-c-app-launcher__toggle--PaddingBottom | 0.375rem | ||
| .pf-c-app-launcher | --pf-c-app-launcher__toggle--PaddingLeft | 1rem | ||
| .pf-c-app-launcher | --pf-c-app-launcher__toggle--Color | #6a6e73 | ||
| .pf-c-app-launcher | --pf-c-app-launcher__toggle--hover--Color | #151515 | ||
| .pf-c-app-launcher | --pf-c-app-launcher__toggle--active--Color | #151515 | ||
| .pf-c-app-launcher | --pf-c-app-launcher__toggle--focus--Color | #151515 | ||
| .pf-c-app-launcher | --pf-c-app-launcher__toggle--disabled--Color | #d2d2d2 | ||
| .pf-c-app-launcher | --pf-c-app-launcher__toggle--m-expanded--Color | #151515 | ||
| .pf-c-app-launcher | --pf-c-app-launcher__menu-search--PaddingTop | 0.5rem | ||
| .pf-c-app-launcher | --pf-c-app-launcher__menu-search--PaddingRight | 1rem | ||
| .pf-c-app-launcher | --pf-c-app-launcher__menu-search--PaddingBottom | 1rem | ||
| .pf-c-app-launcher | --pf-c-app-launcher__menu-search--PaddingLeft | 1rem | ||
| .pf-c-app-launcher | --pf-c-app-launcher__menu-search--BottomBorderColor | #d2d2d2 | ||
| .pf-c-app-launcher | --pf-c-app-launcher__menu-search--BottomBorderWidth | 1px | ||
| .pf-c-app-launcher | --pf-c-app-launcher__menu-search--MarginBottom | 0.5rem | ||
| .pf-c-app-launcher | --pf-c-app-launcher__menu-item--PaddingTop | 0.5rem | ||
| .pf-c-app-launcher | --pf-c-app-launcher__menu-item--PaddingRight | 1rem | ||
| .pf-c-app-launcher | --pf-c-app-launcher__menu-item--PaddingBottom | 0.5rem | ||
| .pf-c-app-launcher | --pf-c-app-launcher__menu-item--PaddingLeft | 1rem | ||
| .pf-c-app-launcher | --pf-c-app-launcher__menu-item--Color | #151515 | ||
| .pf-c-app-launcher | --pf-c-app-launcher__menu-item--FontWeight | 400 | ||
| .pf-c-app-launcher | --pf-c-app-launcher__menu-item--Width | 100% | ||
| .pf-c-app-launcher | --pf-c-app-launcher__menu-item--disabled--Color | #6a6e73 | ||
| .pf-c-app-launcher | --pf-c-app-launcher__menu-item--hover--BackgroundColor | #f0f0f0 | ||
| .pf-c-app-launcher | --pf-c-app-launcher__menu-item--m-link--PaddingRight | 0 | ||
| .pf-c-app-launcher | --pf-c-app-launcher__menu-item--m-link--hover--BackgroundColor | transparent | ||
| .pf-c-app-launcher | --pf-c-app-launcher__menu-item--m-action--hover--BackgroundColor | transparent | ||
| .pf-c-app-launcher | --pf-c-app-launcher__menu-item--m-action--Color | #d2d2d2 | ||
| .pf-c-app-launcher | --pf-c-app-launcher__menu-item--m-action--Width | auto | ||
| .pf-c-app-launcher | --pf-c-app-launcher__menu-item--m-action--FontSize | 0.625rem | ||
| .pf-c-app-launcher | --pf-c-app-launcher__menu-item--hover__menu-item--m-action--Color | #6a6e73 | ||
| .pf-c-app-launcher | --pf-c-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--Color | #f0ab00 | ||
| .pf-c-app-launcher | --pf-c-app-launcher__menu-item-icon--MarginRight | 0.5rem | ||
| .pf-c-app-launcher | --pf-c-app-launcher__menu-item-icon--Width | 1.5rem | ||
| .pf-c-app-launcher | --pf-c-app-launcher__menu-item-icon--Height | 1.5rem | ||
| .pf-c-app-launcher | --pf-c-app-launcher__menu-item-external-icon--Color | #06c | ||
| .pf-c-app-launcher | --pf-c-app-launcher__menu-item-external-icon--PaddingLeft | 1rem | ||
| .pf-c-app-launcher | --pf-c-app-launcher__menu-item-external-icon--Transform | translateY(-0.0625rem) | ||
| .pf-c-app-launcher | --pf-c-app-launcher__menu-item-external-icon--FontSize | 0.625rem | ||
| .pf-c-app-launcher | --pf-c-app-launcher__group--PaddingTop | 0 | ||
| .pf-c-app-launcher | --pf-c-app-launcher__group--group--PaddingTop | 0.5rem | ||
| .pf-c-app-launcher | --pf-c-app-launcher__group--first-child--PaddingTop | 0 | ||
| .pf-c-app-launcher | --pf-c-app-launcher__group-title--PaddingTop | 0.5rem | ||
| .pf-c-app-launcher | --pf-c-app-launcher__group-title--PaddingRight | 1rem | ||
| .pf-c-app-launcher | --pf-c-app-launcher__group-title--PaddingBottom | 0.5rem | ||
| .pf-c-app-launcher | --pf-c-app-launcher__group-title--PaddingLeft | 1rem | ||
| .pf-c-app-launcher | --pf-c-app-launcher__group-title--FontSize | 0.875rem | ||
| .pf-c-app-launcher | --pf-c-app-launcher__group-title--FontWeight | 500 | ||
| .pf-c-app-launcher | --pf-c-app-launcher__group-title--Color | #6a6e73 | ||
| .pf-c-app-launcher | --pf-c-app-launcher--c-divider--MarginTop | 0.5rem | ||
| .pf-c-app-launcher | --pf-c-app-launcher--c-divider--MarginBottom | 0.5rem | ||
| .pf-c-app-launcher .pf-c-divider:last-child | --pf-c-app-launcher--c-divider--MarginBottom | 0 | ||
| .pf-c-app-launcher__toggle:hover | --pf-c-app-launcher__toggle--Color | #151515 | ||
| .pf-c-app-launcher__toggle:active | --pf-c-app-launcher__toggle--Color | #151515 | ||
| .pf-c-app-launcher__toggle:focus | --pf-c-app-launcher__toggle--Color | #151515 | ||
| .pf-c-app-launcher__toggle:disabled | --pf-c-app-launcher__toggle--Color | #d2d2d2 | ||
| .pf-c-app-launcher.pf-m-top .pf-c-app-launcher__menu | --pf-c-app-launcher__menu--Top | 0 | ||
| .pf-c-app-launcher__menu-wrapper.pf-m-favorite | --pf-c-app-launcher__menu-item--m-action--Color | #f0ab00 | ||
| .pf-c-app-launcher__menu-item:hover | --pf-c-app-launcher__menu-item--m-action--Color | #6a6e73 | ||
| .pf-c-app-launcher__menu-item:disabled | --pf-c-app-launcher__menu-item--Color | #6a6e73 | ||
| .pf-c-app-launcher__menu-item.pf-m-link | --pf-c-app-launcher__menu-item--PaddingRight | 0 | ||
| .pf-c-app-launcher__menu-item.pf-m-link | --pf-c-app-launcher__menu-item--hover--BackgroundColor | transparent | ||
| .pf-c-app-launcher__menu-item.pf-m-action | --pf-c-app-launcher__menu-item--hover--BackgroundColor | transparent | ||
| .pf-c-app-launcher__menu-item.pf-m-action | --pf-c-app-launcher__menu-item--Color | #d2d2d2 | ||
| .pf-c-app-launcher__menu-item.pf-m-action | --pf-c-app-launcher__menu-item--Width | auto | ||
| .pf-c-app-launcher__menu-item.pf-m-action:hover | --pf-c-app-launcher__menu-item--m-action--Color | #151515 | ||
| .pf-c-app-launcher__group:first-child | --pf-c-app-launcher__group--PaddingTop | 0 | ||
| .pf-c-app-launcher__group + .pf-c-app-launcher__group | --pf-c-app-launcher__group--PaddingTop | 0.5rem | ||
