Patternfly Logo

Context selector

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-footer<div>Initiaties a menu footer.
.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--100
#151515
.pf-c-context-selector__menu--pf-global--Color--200
#6a6e73
.pf-c-context-selector__menu--pf-global--BorderColor--100
#d2d2d2
.pf-c-context-selector__menu--pf-global--primary-color--100
#06c
.pf-c-context-selector__menu--pf-global--link--Color
#06c
.pf-c-context-selector__menu--pf-global--link--Color--hover
#004080
.pf-c-context-selector__menu--pf-global--BackgroundColor--100
#fff
.pf-c-context-selector--pf-c-context-selector--Width
15.625rem
.pf-c-context-selector--pf-c-context-selector__toggle--PaddingTop
0.375rem
.pf-c-context-selector--pf-c-context-selector__toggle--PaddingRight
0.5rem
.pf-c-context-selector--pf-c-context-selector__toggle--PaddingBottom
0.375rem
.pf-c-context-selector--pf-c-context-selector__toggle--PaddingLeft
0.5rem
.pf-c-context-selector--pf-c-context-selector__toggle--BorderWidth
1px
.pf-c-context-selector--pf-c-context-selector__toggle--BorderTopColor
#f0f0f0
.pf-c-context-selector--pf-c-context-selector__toggle--BorderRightColor
#f0f0f0
.pf-c-context-selector--pf-c-context-selector__toggle--BorderBottomColor
#8a8d90
.pf-c-context-selector--pf-c-context-selector__toggle--BorderLeftColor
#f0f0f0
.pf-c-context-selector--pf-c-context-selector__toggle--Color
#151515
.pf-c-context-selector--pf-c-context-selector__toggle--hover--BorderBottomColor
#06c
.pf-c-context-selector--pf-c-context-selector__toggle--active--BorderBottomWidth
2px
.pf-c-context-selector--pf-c-context-selector__toggle--active--BorderBottomColor
#06c
.pf-c-context-selector--pf-c-context-selector__toggle--expanded--BorderBottomWidth
2px
.pf-c-context-selector--pf-c-context-selector__toggle--expanded--BorderBottomColor
#06c
.pf-c-context-selector--pf-c-context-selector__toggle-text--FontSize
1rem
.pf-c-context-selector--pf-c-context-selector__toggle-text--FontWeight
400
.pf-c-context-selector--pf-c-context-selector__toggle-text--LineHeight
1.5
.pf-c-context-selector--pf-c-context-selector__toggle-icon--MarginRight
0.5rem
.pf-c-context-selector--pf-c-context-selector__toggle-icon--MarginLeft
1rem
.pf-c-context-selector--pf-c-context-selector__menu--Top
calc(100% + 0.25rem)
.pf-c-context-selector--pf-c-context-selector__menu--ZIndex
200
.pf-c-context-selector--pf-c-context-selector__menu--PaddingTop
0.5rem
.pf-c-context-selector--pf-c-context-selector__menu--BackgroundColor
#fff
.pf-c-context-selector--pf-c-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--PaddingTop
0.5rem
.pf-c-context-selector--pf-c-context-selector__menu-search--PaddingRight
1rem
.pf-c-context-selector--pf-c-context-selector__menu-search--PaddingBottom
1rem
.pf-c-context-selector--pf-c-context-selector__menu-search--PaddingLeft
1rem
.pf-c-context-selector--pf-c-context-selector__menu-search--BorderBottomColor
#d2d2d2
.pf-c-context-selector--pf-c-context-selector__menu-search--BorderBottomWidth
1px
.pf-c-context-selector--pf-c-context-selector__menu-list--MaxHeight
12.5rem
.pf-c-context-selector--pf-c-context-selector__menu-list-item--PaddingTop
0.5rem
.pf-c-context-selector--pf-c-context-selector__menu-list-item--PaddingRight
1.5rem
.pf-c-context-selector--pf-c-context-selector__menu-list-item--PaddingBottom
0.5rem
.pf-c-context-selector--pf-c-context-selector__menu-list-item--PaddingLeft
1.5rem
.pf-c-context-selector--pf-c-context-selector__menu-list-item--hover--BackgroundColor
#f0f0f0
.pf-c-context-selector--pf-c-context-selector__menu-list-item--disabled--Color
#6a6e73
.pf-c-context-selector__toggle:hover::before--pf-c-context-selector__toggle--BorderBottomColor
#06c
.pf-c-context-selector__toggle:active::before--pf-c-context-selector__toggle--BorderBottomColor
#06c
.pf-m-expanded > .pf-c-context-selector__toggle::before--pf-c-context-selector__toggle--BorderBottomColor
#06c

View source on Github