Note: Application launcher is built on Dropdown, for extended API go to Dropdown documentation.
To add a tooltip, use the tooltip prop and optionally add more tooltip props by using tooltipProps. For more tooltip information go to Tooltip.
Examples
Props
ApplicationLauncher
| Name | Type | Default | Description |
|---|---|---|---|
| aria-label | string | 'Application launcher' | Adds accessible text to the button. Required for plain buttons |
| className | string | '' | Additional element css classes |
| direction | DropdownDirection | 'up' | 'down' | DropdownDirection.down | Display menu above or below dropdown toggle |
| favorites | string[] | [] | ID list of favorited ApplicationLauncherItems |
| favoritesLabel | string | 'Favorites' | Label for the favorites group |
| isDisabled | boolean | false | Render Application launcher toggle as disabled icon |
| isGrouped | boolean | false | Flag to indicate if application launcher has groups |
| isOpen | boolean | false | open bool |
| items | React.ReactNode[] | Array of application launcher items | |
| menuAppendTo | HTMLElement | (() => HTMLElement) | 'inline' | 'parent' | 'inline' | The container to append the menu to. Defaults to 'inline'. If your menu is being cut off you can append it to an element higher up the DOM tree. Some examples: menuAppendTo="parent" menuAppendTo={() => document.body} menuAppendTo={document.getElementById('target')} |
| onFavorite | (itemId: string, isFavorite: boolean) => void | Enables favorites. Callback called when an ApplicationLauncherItem's favorite button is clicked | |
| onSearch | (textInput: string) => void | Enables search. Callback called when text input is entered into search box | |
| onSelect | (event: any) => void | (_event: any): any => undefined | Function callback called when user selects item |
| onToggle | (value: boolean) => void | (_value: boolean): any => undefined | Callback called when application launcher toggle is clicked |
| position | DropdownPosition | 'right' | 'left' | DropdownPosition.left | Indicates where menu will be alligned horizontally |
| searchNoResultsText | string | 'No results found' | Text for search input when no results are found |
| searchPlaceholderText | string | 'Filter by name...' | Placeholder text for search input |
| searchProps | any | Additional properties for search input | |
| toggleIcon | React.ReactNode | <ThIcon /> | Toggle Icon, optional to override the icon used for the toggle |
| toggleId | string | ID of toggle |
ApplicationLauncherItem
| Name | Type | Default | Description |
|---|---|---|---|
| ariaIsFavoriteLabel | string | 'starred' | Aria label text for favoritable button when favorited |
| ariaIsNotFavoriteLabel | string | 'not starred' | Aria label text for favoritable button when not favorited |
| className | No type info | '' | |
| component | React.ReactNode | 'a' | A ReactElement to render, or a string to use as the component tag. Example: component={<Link to="/components/alert/">Alert</Link>} Example: component="button" |
| customChild | React.ReactNode | ||
| enterTriggersArrowDown | boolean | false | Flag indicating if hitting enter triggers an arrow down key press. Automatically passed to favorites list items. |
| icon | React.ReactNode | null | Icon rendered before the text |
| id | string | ID of the item. Required for tracking favorites. | |
| isExternal | boolean | false | If clicking on the item should open the page in a separate window |
| isFavorite | boolean | null | Flag indicating if the item is favorited |
| tooltip | React.ReactNode | null | Tooltip to display when hovered over the item |
| tooltipProps | any | null | Additional tooltip props forwarded to the Tooltip component |
ApplicationLauncherContent
| Name | Type | Default | Description |
|---|---|---|---|
| childrenrequired | React.ReactNode | Main content to be rendered |
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--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--Color | #6a6e73 | |
| .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--m-action--hover--BackgroundColor | transparent | |
| .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-action--disabled--Color | #d2d2d2 | |
| .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--m-favorite__menu-item--m-action--hover--Color | #c58c00 | |
| .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--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--group--PaddingTop | 0.5rem | |
| .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 | 700 | |
| .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-wrapper.pf-m-favorite | --pf-c-app-launcher__menu-item--m-action--hover--Color | #c58c00 | |
| .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:disabled | --pf-c-app-launcher__menu-item--m-action--Color | #d2d2d2 | |
| .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--Color | #6a6e73 | |
| .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 | --pf-c-app-launcher__menu-item--hover--BackgroundColor | transparent | |
| .pf-c-app-launcher__menu-item.pf-m-action:hover | --pf-c-app-launcher__menu-item--m-action--Color | #151515 | |
View source on GitHub
