HTML
Application launcher
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 | <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-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. |
.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__c-divider--MarginBottom | c_app_launcher__c_divider_MarginBottom | 0.5rem |
| --pf-c-app-launcher__c-divider--MarginTop | c_app_launcher__c_divider_MarginTop | 0.5rem |
| --pf-c-app-launcher__group--first-child--PaddingTop | c_app_launcher__group_first_child_PaddingTop | 0 |
| --pf-c-app-launcher__group--group--PaddingTop | c_app_launcher__group_group_PaddingTop | 0.5rem |
| --pf-c-app-launcher__group--PaddingTop | c_app_launcher__group_PaddingTop | 0.5rem |
| --pf-c-app-launcher__group-title--Color | c_app_launcher__group_title_Color | #737679 |
| --pf-c-app-launcher__group-title--FontSize | c_app_launcher__group_title_FontSize | 0.875rem |
| --pf-c-app-launcher__group-title--FontWeight | c_app_launcher__group_title_FontWeight | 700 |
| --pf-c-app-launcher__group-title--PaddingBottom | c_app_launcher__group_title_PaddingBottom | 0.5rem |
| --pf-c-app-launcher__group-title--PaddingLeft | c_app_launcher__group_title_PaddingLeft | 1rem |
| --pf-c-app-launcher__group-title--PaddingRight | c_app_launcher__group_title_PaddingRight | 1rem |
| --pf-c-app-launcher__group-title--PaddingTop | c_app_launcher__group_title_PaddingTop | 0.5rem |
| --pf-c-app-launcher__menu--BackgroundColor | c_app_launcher__menu_BackgroundColor | #fff |
| --pf-c-app-launcher__menu--BorderWidth | c_app_launcher__menu_BorderWidth | 1px |
| --pf-c-app-launcher__menu--BoxShadow | c_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--Color | c_app_launcher__menu_item_Color | #737679 |
| --pf-c-app-launcher__menu-item--disabled--Color | c_app_launcher__menu_item_disabled_Color | #737679 |
| --pf-c-app-launcher__menu-item-external-icon--Color | c_app_launcher__menu_item_external_icon_Color | #004080 |
| --pf-c-app-launcher__menu-item-external-icon--FontSize | c_app_launcher__menu_item_external_icon_FontSize | 0.875rem |
| --pf-c-app-launcher__menu-item-external-icon--PaddingLeft | c_app_launcher__menu_item_external_icon_PaddingLeft | 1.5rem |
| --pf-c-app-launcher__menu-item-external-icon--Transform | c_app_launcher__menu_item_external_icon_Transform | translateY(-0.0625rem) |
| --pf-c-app-launcher__menu-item--FontWeight | c_app_launcher__menu_item_FontWeight | 400 |
| --pf-c-app-launcher__menu-item--hover--BackgroundColor | c_app_launcher__menu_item_hover_BackgroundColor | #ededed |
| --pf-c-app-launcher__menu-item-icon--Height | c_app_launcher__menu_item_icon_Height | 1.5rem |
| --pf-c-app-launcher__menu-item-icon--MarginRight | c_app_launcher__menu_item_icon_MarginRight | 0.5rem |
| --pf-c-app-launcher__menu-item-icon--Width | c_app_launcher__menu_item_icon_Width | 1.5rem |
| --pf-c-app-launcher__menu-item--PaddingBottom | c_app_launcher__menu_item_PaddingBottom | 0.5rem |
| --pf-c-app-launcher__menu-item--PaddingLeft | c_app_launcher__menu_item_PaddingLeft | 1rem |
| --pf-c-app-launcher__menu-item--PaddingRight | c_app_launcher__menu_item_PaddingRight | 1rem |
| --pf-c-app-launcher__menu-item--PaddingTop | c_app_launcher__menu_item_PaddingTop | 0.5rem |
| --pf-c-app-launcher__menu--PaddingBottom | c_app_launcher__menu_PaddingBottom | 0.5rem |
| --pf-c-app-launcher__menu--PaddingTop | c_app_launcher__menu_PaddingTop | 0.5rem |
| --pf-c-app-launcher__menu--Top | c_app_launcher__menu_Top | 0 |
| --pf-c-app-launcher__menu--ZIndex | c_app_launcher__menu_ZIndex | 200 |
| --pf-c-app-launcher__separator--BackgroundColor | c_app_launcher__separator_BackgroundColor | #d2d2d2 |
| --pf-c-app-launcher__separator--Height | c_app_launcher__separator_Height | 1px |
| --pf-c-app-launcher__separator--MarginBottom | c_app_launcher__separator_MarginBottom | 0 |
| --pf-c-app-launcher__separator--MarginTop | c_app_launcher__separator_MarginTop | 0.5rem |
| --pf-c-app-launcher__toggle--active--Color | c_app_launcher__toggle_active_Color | #151515 |
| --pf-c-app-launcher__toggle--Color | c_app_launcher__toggle_Color | #d2d2d2 |
| --pf-c-app-launcher__toggle--disabled--Color | c_app_launcher__toggle_disabled_Color | #d2d2d2 |
| --pf-c-app-launcher__toggle--focus--Color | c_app_launcher__toggle_focus_Color | #151515 |
| --pf-c-app-launcher__toggle--hover--Color | c_app_launcher__toggle_hover_Color | #151515 |
| --pf-c-app-launcher__toggle--m-expanded--Color | c_app_launcher__toggle_m_expanded_Color | #151515 |
| --pf-c-app-launcher__toggle--PaddingBottom | c_app_launcher__toggle_PaddingBottom | 0.375rem |
| --pf-c-app-launcher__toggle--PaddingLeft | c_app_launcher__toggle_PaddingLeft | 1rem |
| --pf-c-app-launcher__toggle--PaddingRight | c_app_launcher__toggle_PaddingRight | 1rem |
| --pf-c-app-launcher__toggle--PaddingTop | c_app_launcher__toggle_PaddingTop | 0.375rem |
| --pf-c-app-launcher--m-top__menu--Top | c_app_launcher_m_top__menu_Top | 0 |
| --pf-c-app-launcher--m-top__menu--Transform | c_app_launcher_m_top__menu_Transform | translateY(calc(-100% - 0.25rem)) |
