Skip to content
Patternfly Logo

Application launcher

Examples

Collapsed

Disabled

Expanded

Aligned right

Aligned top

With sections and dividers between sections

With sections and dividers between items

Favorites

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__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-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-wrapper
Modifies 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-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.
.pf-m-active
.pf-c-app-launcher__toggle
Forces 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
#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

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.

Red Hat logo
Copyright © 2021 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines