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<i>Inititiates icon inside the toggle.
.pf-c-context-selector__menu<div>Initiaties a menu
.pf-c-context-selector__menu-input<div>Initiates a container for the 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.

CSS Variables

--pf-c-context-selector__menu--BackgroundColorc_context_selector__menu_BackgroundColor
#fff
--pf-c-context-selector__menu--BorderWidthc_context_selector__menu_BorderWidth
1px
--pf-c-context-selector__menu--BoxShadowc_context_selector__menu_BoxShadow
0 0.0625rem 0.0625rem 0rem rgba(3,3,3,0.05),0 0.25rem 0.5rem 0.25rem rgba(3,3,3,0.06)
--pf-c-context-selector__menu-input--BottomBorderColorc_context_selector__menu_input_BottomBorderColor
#d2d2d2
--pf-c-context-selector__menu-input--BottomBorderWidthc_context_selector__menu_input_BottomBorderWidth
1px
--pf-c-context-selector__menu-input--PaddingBottomc_context_selector__menu_input_PaddingBottom
1rem
--pf-c-context-selector__menu-input--PaddingLeftc_context_selector__menu_input_PaddingLeft
1rem
--pf-c-context-selector__menu-input--PaddingRightc_context_selector__menu_input_PaddingRight
1rem
--pf-c-context-selector__menu-input--PaddingTopc_context_selector__menu_input_PaddingTop
0.5rem
--pf-c-context-selector__menu-list-item--disabled--Colorc_context_selector__menu_list_item_disabled_Color
#737679
--pf-c-context-selector__menu-list-item--hover--BackgroundColorc_context_selector__menu_list_item_hover_BackgroundColor
#ededed
--pf-c-context-selector__menu-list-item--PaddingBottomc_context_selector__menu_list_item_PaddingBottom
0.5rem
--pf-c-context-selector__menu-list-item--PaddingLeftc_context_selector__menu_list_item_PaddingLeft
1.5rem
--pf-c-context-selector__menu-list-item--PaddingRightc_context_selector__menu_list_item_PaddingRight
1.5rem
--pf-c-context-selector__menu-list-item--PaddingTopc_context_selector__menu_list_item_PaddingTop
0.5rem
--pf-c-context-selector__menu-list--MaxHeightc_context_selector__menu_list_MaxHeight
12.5rem
--pf-c-context-selector__menu--PaddingTopc_context_selector__menu_PaddingTop
0.5rem
--pf-c-context-selector__menu--Topc_context_selector__menu_Top
calc(100% + 0.25rem)
--pf-c-context-selector__menu--ZIndexc_context_selector__menu_ZIndex
200
--pf-c-context-selector__toggle--active--BorderBottomColorc_context_selector__toggle_active_BorderBottomColor
#06c
--pf-c-context-selector__toggle--active--BorderBottomWidthc_context_selector__toggle_active_BorderBottomWidth
2px
--pf-c-context-selector__toggle--BorderBottomColorc_context_selector__toggle_BorderBottomColor
#06c
--pf-c-context-selector__toggle--BorderLeftColorc_context_selector__toggle_BorderLeftColor
#ededed
--pf-c-context-selector__toggle--BorderRightColorc_context_selector__toggle_BorderRightColor
#ededed
--pf-c-context-selector__toggle--BorderTopColorc_context_selector__toggle_BorderTopColor
#ededed
--pf-c-context-selector__toggle--BorderWidthc_context_selector__toggle_BorderWidth
1px
--pf-c-context-selector__toggle--Colorc_context_selector__toggle_Color
#151515
--pf-c-context-selector__toggle--expanded--BorderBottomColorc_context_selector__toggle_expanded_BorderBottomColor
#06c
--pf-c-context-selector__toggle--expanded--BorderBottomWidthc_context_selector__toggle_expanded_BorderBottomWidth
2px
--pf-c-context-selector__toggle--hover--BorderBottomColorc_context_selector__toggle_hover_BorderBottomColor
#06c
--pf-c-context-selector__toggle-icon--MarginLeftc_context_selector__toggle_icon_MarginLeft
1rem
--pf-c-context-selector__toggle-icon--MarginRightc_context_selector__toggle_icon_MarginRight
0.5rem
--pf-c-context-selector__toggle--PaddingBottomc_context_selector__toggle_PaddingBottom
0.375rem
--pf-c-context-selector__toggle--PaddingLeftc_context_selector__toggle_PaddingLeft
0.5rem
--pf-c-context-selector__toggle--PaddingRightc_context_selector__toggle_PaddingRight
0.5rem
--pf-c-context-selector__toggle--PaddingTopc_context_selector__toggle_PaddingTop
0.375rem
--pf-c-context-selector__toggle-text--FontSizec_context_selector__toggle_text_FontSize
1rem
--pf-c-context-selector__toggle-text--FontWeightc_context_selector__toggle_text_FontWeight
400
--pf-c-context-selector__toggle-text--LineHeightc_context_selector__toggle_text_LineHeight
1.5
--pf-c-context-selector--Widthc_context_selector_Width
15.625rem