Skip to Content
Patternfly Logo

Context selector

A context selector can be used in addition to global navigation when the data or resources you show in the interface need to change depending on the users’ context. Related design guidelines: Navigation system

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