HTML

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

Context selector example

Copied to clipboard

Documentation

Accessibility

Added after react implementation

Class Applied To Outcome
.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-selector Modifies for the expanded state.

CSS Variables

--pf-c-context-selector--Widthc_context_selector_Width15.625rem
--pf-c-context-selector__menu--BackgroundColorc_context_selector__menu_BackgroundColor#fff
--pf-c-context-selector__menu--BorderWidthc_context_selector__menu_BorderWidth1px
--pf-c-context-selector__menu--BoxShadowc_context_selector__menu_BoxShadow0 0.0625rem 0.0625rem 0rem rgba(3,3,3,.05),0 0.25rem 0.5rem 0.25rem rgba(3,3,3,.06)
--pf-c-context-selector__menu--PaddingTopc_context_selector__menu_PaddingTop0.5rem
--pf-c-context-selector__menu--Topc_context_selector__menu_Topcalc(100% + 0.25rem)
--pf-c-context-selector__menu--ZIndexc_context_selector__menu_ZIndex100
--pf-c-context-selector__menu-input--BottomBorderColorc_context_selector__menu_input_BottomBorderColor#d2d2d2
--pf-c-context-selector__menu-input--BottomBorderWidthc_context_selector__menu_input_BottomBorderWidth1px
--pf-c-context-selector__menu-input--PaddingBottomc_context_selector__menu_input_PaddingBottom1rem
--pf-c-context-selector__menu-input--PaddingLeftc_context_selector__menu_input_PaddingLeft1rem
--pf-c-context-selector__menu-input--PaddingRightc_context_selector__menu_input_PaddingRight1rem
--pf-c-context-selector__menu-input--PaddingTopc_context_selector__menu_input_PaddingTop0.5rem
--pf-c-context-selector__menu-list--MaxHeightc_context_selector__menu_list_MaxHeight12.5rem
--pf-c-context-selector__menu-list-item--PaddingBottomc_context_selector__menu_list_item_PaddingBottom0.5rem
--pf-c-context-selector__menu-list-item--PaddingLeftc_context_selector__menu_list_item_PaddingLeft1.5rem
--pf-c-context-selector__menu-list-item--PaddingRightc_context_selector__menu_list_item_PaddingRight1.5rem
--pf-c-context-selector__menu-list-item--PaddingTopc_context_selector__menu_list_item_PaddingTop0.5rem
--pf-c-context-selector__menu-list-item--disabled--Colorc_context_selector__menu_list_item_disabled_Color#72767b
--pf-c-context-selector__menu-list-item--hover--BackgroundColorc_context_selector__menu_list_item_hover_BackgroundColor#ededed
--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_BorderWidth1px
--pf-c-context-selector__toggle--Colorc_context_selector__toggle_Color#151515
--pf-c-context-selector__toggle--PaddingBottomc_context_selector__toggle_PaddingBottom0.375rem
--pf-c-context-selector__toggle--PaddingLeftc_context_selector__toggle_PaddingLeft0.5rem
--pf-c-context-selector__toggle--PaddingRightc_context_selector__toggle_PaddingRight0.5rem
--pf-c-context-selector__toggle--PaddingTopc_context_selector__toggle_PaddingTop0.375rem
--pf-c-context-selector__toggle--active--BorderBottomColorc_context_selector__toggle_active_BorderBottomColor#06c
--pf-c-context-selector__toggle--active--BorderBottomWidthc_context_selector__toggle_active_BorderBottomWidth2px
--pf-c-context-selector__toggle--expanded--BorderBottomColorc_context_selector__toggle_expanded_BorderBottomColor#06c
--pf-c-context-selector__toggle--expanded--BorderBottomWidthc_context_selector__toggle_expanded_BorderBottomWidth2px
--pf-c-context-selector__toggle--hover--BorderBottomColorc_context_selector__toggle_hover_BorderBottomColor#06c
--pf-c-context-selector__toggle-icon--MarginLeftc_context_selector__toggle_icon_MarginLeft1rem
--pf-c-context-selector__toggle-icon--MarginRightc_context_selector__toggle_icon_MarginRight0.5rem
--pf-c-context-selector__toggle-text--FontSizec_context_selector__toggle_text_FontSize1rem
--pf-c-context-selector__toggle-text--FontWeightc_context_selector__toggle_text_FontWeight400
--pf-c-context-selector__toggle-text--LineHeightc_context_selector__toggle_text_LineHeight1.5