Skip to Content
Patternfly Logo

Context selector

ExamplesDocumentationCSS Variables

Examples

Basic

Documentation

Accessibility

Added after React implementation.

ClassApplied toOutcome
.pf-c-context-selector<div>Initiates a context selector.
.pf-c-context-selector__toggle<button>Initiates a toggle.
.pf-c-context-selector__toggle-text<span>Initiates text inside the toggle.
.pf-c-context-selector__toggle-icon<span>Inititiates the toggle icon wrapper.
.pf-c-context-selector__menu<div>Initiaties a menu.
.pf-c-context-selector__menu-search<div>Initiates a container for the search input group.
.pf-c-context-selector__menu-list<ul>Initiaties an unordered list of menu items that sits under the input container.
.pf-c-context-selector__menu-list-item<li>Initiaties a menu item.
.pf-m-expanded.pf-c-context-selectorModifies for the expanded state.
.pf-m-active.pf-c-context-selector__toggleForces display of the active state of the toggle.

CSS Variables

.pf-c-context-selector__menu--pf-global--Color--100global_Color_100
#151515
.pf-c-context-selector__menu--pf-global--Color--200global_Color_200
#6a6e73
.pf-c-context-selector__menu--pf-global--BorderColor--100global_BorderColor_100
#d2d2d2
.pf-c-context-selector__menu--pf-global--primary-color--100global_primary_color_100
#06c
.pf-c-context-selector__menu--pf-global--link--Colorglobal_link_Color
#06c
.pf-c-context-selector__menu--pf-global--link--Color--hoverglobal_link_Color_hover
#004080
.pf-c-context-selector__menu--pf-global--BackgroundColor--100global_BackgroundColor_100
#fff
.pf-c-context-selector--pf-c-context-selector--Widthc_context_selector_Width
15.625rem
.pf-c-context-selector--pf-c-context-selector__toggle--PaddingTopc_context_selector__toggle_PaddingTop
0.375rem
.pf-c-context-selector--pf-c-context-selector__toggle--PaddingRightc_context_selector__toggle_PaddingRight
0.5rem
.pf-c-context-selector--pf-c-context-selector__toggle--PaddingBottomc_context_selector__toggle_PaddingBottom
0.375rem
.pf-c-context-selector--pf-c-context-selector__toggle--PaddingLeftc_context_selector__toggle_PaddingLeft
0.5rem
.pf-c-context-selector--pf-c-context-selector__toggle--BorderWidthc_context_selector__toggle_BorderWidth
1px
.pf-c-context-selector--pf-c-context-selector__toggle--BorderTopColorc_context_selector__toggle_BorderTopColor
#f0f0f0
.pf-c-context-selector--pf-c-context-selector__toggle--BorderRightColorc_context_selector__toggle_BorderRightColor
#f0f0f0
.pf-c-context-selector--pf-c-context-selector__toggle--BorderBottomColorc_context_selector__toggle_BorderBottomColor
#8a8d90
.pf-c-context-selector--pf-c-context-selector__toggle--BorderLeftColorc_context_selector__toggle_BorderLeftColor
#f0f0f0
.pf-c-context-selector--pf-c-context-selector__toggle--Colorc_context_selector__toggle_Color
#151515
.pf-c-context-selector--pf-c-context-selector__toggle--hover--BorderBottomColorc_context_selector__toggle_hover_BorderBottomColor
#06c
.pf-c-context-selector--pf-c-context-selector__toggle--active--BorderBottomWidthc_context_selector__toggle_active_BorderBottomWidth
2px
.pf-c-context-selector--pf-c-context-selector__toggle--active--BorderBottomColorc_context_selector__toggle_active_BorderBottomColor
#06c
.pf-c-context-selector--pf-c-context-selector__toggle--expanded--BorderBottomWidthc_context_selector__toggle_expanded_BorderBottomWidth
2px
.pf-c-context-selector--pf-c-context-selector__toggle--expanded--BorderBottomColorc_context_selector__toggle_expanded_BorderBottomColor
#06c
.pf-c-context-selector--pf-c-context-selector__toggle-text--FontSizec_context_selector__toggle_text_FontSize
1rem
.pf-c-context-selector--pf-c-context-selector__toggle-text--FontWeightc_context_selector__toggle_text_FontWeight
400
.pf-c-context-selector--pf-c-context-selector__toggle-text--LineHeightc_context_selector__toggle_text_LineHeight
1.5
.pf-c-context-selector--pf-c-context-selector__toggle-icon--MarginRightc_context_selector__toggle_icon_MarginRight
0.5rem
.pf-c-context-selector--pf-c-context-selector__toggle-icon--MarginLeftc_context_selector__toggle_icon_MarginLeft
1rem
.pf-c-context-selector--pf-c-context-selector__menu--Topc_context_selector__menu_Top
calc(100% + 0.25rem)
.pf-c-context-selector--pf-c-context-selector__menu--ZIndexc_context_selector__menu_ZIndex
200
.pf-c-context-selector--pf-c-context-selector__menu--PaddingTopc_context_selector__menu_PaddingTop
0.5rem
.pf-c-context-selector--pf-c-context-selector__menu--BackgroundColorc_context_selector__menu_BackgroundColor
#fff
.pf-c-context-selector--pf-c-context-selector__menu--BoxShadowc_context_selector__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-context-selector--pf-c-context-selector__menu-search--PaddingTopc_context_selector__menu_search_PaddingTop
0.5rem
.pf-c-context-selector--pf-c-context-selector__menu-search--PaddingRightc_context_selector__menu_search_PaddingRight
1rem
.pf-c-context-selector--pf-c-context-selector__menu-search--PaddingBottomc_context_selector__menu_search_PaddingBottom
1rem
.pf-c-context-selector--pf-c-context-selector__menu-search--PaddingLeftc_context_selector__menu_search_PaddingLeft
1rem
.pf-c-context-selector--pf-c-context-selector__menu-search--BorderBottomColorc_context_selector__menu_search_BorderBottomColor
#d2d2d2
.pf-c-context-selector--pf-c-context-selector__menu-search--BorderBottomWidthc_context_selector__menu_search_BorderBottomWidth
1px
.pf-c-context-selector--pf-c-context-selector__menu-list--MaxHeightc_context_selector__menu_list_MaxHeight
12.5rem
.pf-c-context-selector--pf-c-context-selector__menu-list-item--PaddingTopc_context_selector__menu_list_item_PaddingTop
0.5rem
.pf-c-context-selector--pf-c-context-selector__menu-list-item--PaddingRightc_context_selector__menu_list_item_PaddingRight
1.5rem
.pf-c-context-selector--pf-c-context-selector__menu-list-item--PaddingBottomc_context_selector__menu_list_item_PaddingBottom
0.5rem
.pf-c-context-selector--pf-c-context-selector__menu-list-item--PaddingLeftc_context_selector__menu_list_item_PaddingLeft
1.5rem
.pf-c-context-selector--pf-c-context-selector__menu-list-item--hover--BackgroundColorc_context_selector__menu_list_item_hover_BackgroundColor
#f0f0f0
.pf-c-context-selector--pf-c-context-selector__menu-list-item--disabled--Colorc_context_selector__menu_list_item_disabled_Color
#6a6e73
.pf-c-context-selector__toggle:hover::before--pf-c-context-selector__toggle--BorderBottomColorc_context_selector__toggle_BorderBottomColor
#06c
.pf-c-context-selector__toggle:active::before--pf-c-context-selector__toggle--BorderBottomColorc_context_selector__toggle_BorderBottomColor
#06c
.pf-m-expanded > .pf-c-context-selector__toggle::before--pf-c-context-selector__toggle--BorderBottomColorc_context_selector__toggle_BorderBottomColor
#06c