HTML

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<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