Patternfly Logo

Examples

Collapsed

Disabled

Expanded

Aligned right

Aligned top

With sections and dividers between sections

With sections and dividers between items

Documentation

Accessibility

AttributeAppliedOutcome
aria-label="Application launcher".pf-c-app-launcherGives the app launcher element an accessible name. Required
aria-expanded="false".pf-c-buttonIndicates that the menu is hidden.
aria-expanded="true".pf-c-buttonIndicates that the menu is visible.
aria-label="Actions".pf-c-buttonProvides an accessible name for the app launcher when an icon is used. Required
hidden.pf-c-app-launcher__menuIndicates 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__toggleDisables the app launcher toggle and removes it from keyboard focus.
disabledbutton.pf-c-app-launcher__menu-itemWhen 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-itemWhen the menu item uses a link element, indicates that it is unavailable.
tabindex="-1"a.pf-c-app-launcher__menu-itemWhen 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

ClassAppliedOutcome
.pf-c-app-launcher<nav>Defines the parent wrapper of the app launcher.
.pf-c-app-launcher__toggle<button>Defines the app launcher toggle.
.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-wrapper<li>Defines a menu wrapper for use with multiple actionable items in a single item row.
.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-launcherModifies for the expanded state.
.pf-m-top.pf-c-app-launcherModifies to display the menu above the toggle.
.pf-m-align-right.pf-c-app-launcher__menuModifies to display the menu aligned to the right edge of the toggle.
.pf-m-disableda.pf-c-app-launcher__menu-itemModifies to display the menu item as disabled.
.pf-m-external.pf-c-app-launcher__menu-itemModifies to display the menu item as having an external link icon on hover/focus.
.pf-m-favorite.pf-c-app-launcher__menu-wrapperModifies wrapper to indicate that the item row has been favorited.
.pf-m-link.pf-c-app-launcher__menu-item.pf-m-wrapper > .pf-c-app-launcher__menu-itemModifies item for link styles.
.pf-m-action.pf-c-app-launcher__menu-item.pf-m-wrapper > .pf-c-app-launcher__menu-itemModifies item to for action styles.
.pf-m-active.pf-c-app-launcher__toggleForces display of the active state of the toggle.

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
#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--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-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--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-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--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--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