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.
ExamplesPropsCSS VariablesNote: 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
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| className | string | No | '' | Additional element css classes |
| direction | DropdownDirection | 'up' | 'down' | No | DropdownDirection.down | Display menu above or below dropdown toggle |
| items | React.ReactNode[] | No | Array of application launcher items | |
| isDisabled | boolean | No | false | Render Application launcher toggle as disabled icon |
| isOpen | boolean | No | false | open bool |
| position | DropdownPosition | 'right' | 'left' | No | DropdownPosition.left | Indicates where menu will be alligned horizontally |
| onSelect | (event: any) => void | No | (_event: any): any => undefined | Function callback called when user selects item |
| onToggle | (value: boolean) => void | No | (_value: boolean): any => undefined | Callback called when application launcher toggle is clicked |
| aria-label | string | No | 'Application launcher' | Adds accessible text to the button. Required for plain buttons |
| isGrouped | boolean | No | false | Flag to indicate if application launcher has groups |
| toggleIcon | React.ReactNode | No | <ThIcon /> | Toggle Icon, optional to override the icon used for the toggle |
| favorites | string[] | No | [] | ID list of favorited ApplicationLauncherItems |
| onFavorite | (itemId: string, isFavorite: boolean) => void | No | Enables favorites. Callback called when an ApplicationLauncherItem's favorite button is clicked | |
| onSearch | (textInput: string) => void | No | Enables search. Callback called when text input is entered into search box | |
| searchPlaceholderText | string | No | 'Filter by name...' | Placeholder text for search input |
| searchNoResultsText | string | No | 'No results found' | Text for search input when no results are found |
| searchProps | any | No | Additional properties for search input | |
| favoritesLabel | string | No | 'Favorites' | Label for the favorites group |
| toggleId | string | No | ID of toggle |
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| icon | React.ReactNode | No | null | Icon rendered before the text |
| isExternal | boolean | No | false | If clicking on the item should open the page in a separate window |
| tooltip | React.ReactNode | No | null | Tooltip to display when hovered over the item |
| tooltipProps | any | No | null | Additional tooltip props forwarded to the Tooltip component |
| component | React.ReactNode | No | '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" |
| isFavorite | boolean | No | null | Flag indicating if the item is favorited |
| ariaIsFavoriteLabel | string | No | 'starred' | Aria label text for favoritable button when favorited |
| ariaIsNotFavoriteLabel | string | No | 'not starred' | Aria label text for favoritable button when not favorited |
| id | string | No | ID of the item. Required for tracking favorites. | |
| customChild | React.ReactNode | No | ||
| enterTriggersArrowDown | boolean | No | false | Flag indicating if hitting enter triggers an arrow down key press. Automatically passed to favorites list items. |
| className | No | '' |
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 | ||
