Skip to content
Patternfly Logo

Examples

Basic

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
<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-selector
Modifies for the expanded state.
.pf-m-active
.pf-c-context-selector__toggle
Forces 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-footer--BoxShadow
0 -0.125rem 0.25rem -0.0625rem rgba(3, 3, 3, 0.16)
.pf-c-context-selector--pf-c-context-selector__menu-footer--PaddingTop
1rem
.pf-c-context-selector--pf-c-context-selector__menu-footer--PaddingRight
1rem
.pf-c-context-selector--pf-c-context-selector__menu-footer--PaddingBottom
1rem
.pf-c-context-selector--pf-c-context-selector__menu-footer--PaddingLeft
1rem
.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