Skip to content
PatternFly logo

Context selector

Examples

Basic

  • Link
  • Disabled link

Plain with text

  • Link
  • Disabled link

Documentation

Accessibility

Class
Applied to
Outcome
aria-expanded="false"
.pf-c-context-selector__toggle
Indicates that the menu is hidden.
aria-expanded="true"
.pf-c-context-selector__toggle
Indicates that the menu is visible.
aria-hidden="true"
.pf-c-context-selector__toggle-icon > *
Hides the icon from assistive technologies.
disabled
button.pf-c-context-selector__menu-item
When the menu item uses a button element, indicates that it is unavailable and removes it from keyboard focus.
aria-disabled="true"
a.pf-c-context-selector__menu-item
When the menu item uses a link element, indicates that it is unavailable.
tabindex="-1"
a.pf-c-context-selector__menu-item
When the menu item uses a link element, removes it from keyboard focus.

Usage

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.
.pf-m-plain.pf-m-text
.pf-c-context-selector__toggle
Modifies the context selector toggle for plain text styles.
.pf-m-disabled
a.pf-c-context-selector__menu-list-item
Modifies an item for the disabled state.
.pf-m-full-height
.pf-c-context-selector
Modifies a context selector to full height of parent. See masthead for use.
.pf-m-large
.pf-c-context-selector
Modifies toggle height to be large.
.pf-m-page-insets
.pf-c-context-selector
Modifies toggle and menu insets to match the responsive page chrome insets.

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--BorderBottomWidth
1px
.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--m-plain--Color
#6a6e73
.pf-c-context-selector--pf-c-context-selector__toggle--m-plain--hover--Color
#151515
.pf-c-context-selector--pf-c-context-selector__toggle--m-plain--disabled--Color
#d2d2d2
.pf-c-context-selector--pf-c-context-selector__toggle--m-plain--PaddingRight
1rem
.pf-c-context-selector--pf-c-context-selector__toggle--m-plain--PaddingLeft
1rem
.pf-c-context-selector--pf-c-context-selector__toggle--m-plain--m-text--PaddingRight
0.5rem
.pf-c-context-selector--pf-c-context-selector__toggle--m-plain--m-text--PaddingLeft
0.5rem
.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--m-plain__toggle-icon--Color
#6a6e73
.pf-c-context-selector--pf-c-context-selector--m-plain--hover__toggle-icon--Color
#151515
.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
1rem
.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--PaddingTop
0.5rem
.pf-c-context-selector--pf-c-context-selector__menu-list--PaddingBottom
0.5rem
.pf-c-context-selector--pf-c-context-selector__menu-list-item--Color
#151515
.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--pf-c-context-selector__menu-item-icon--Color
#06c
.pf-c-context-selector--pf-c-context-selector__menu-item-icon--FontSize
0.625rem
.pf-c-context-selector--pf-c-context-selector__menu-item-icon--PaddingLeft
1.5rem
.pf-c-context-selector--pf-c-context-selector--m-full-height__toggle--PaddingRight
1.5rem
.pf-c-context-selector--pf-c-context-selector--m-full-height__toggle--PaddingLeft
1.5rem
.pf-c-context-selector--pf-c-context-selector--m-full-height__toggle--before--BorderTopWidth
0
.pf-c-context-selector--pf-c-context-selector--m-full-height__toggle--hover--BorderBottomWidth
4px
.pf-c-context-selector--pf-c-context-selector--m-full-height__toggle--active--BorderBottomWidth
4px
.pf-c-context-selector--pf-c-context-selector--m-full-height__toggle--expanded--BorderBottomWidth
4px
.pf-c-context-selector--pf-c-context-selector--m-large__toggle--PaddingTop
1rem
.pf-c-context-selector--pf-c-context-selector--m-large__toggle--PaddingBottom
1rem
.pf-c-context-selector--pf-c-context-selector--m-large__toggle--hover--BorderBottomWidth
4px
.pf-c-context-selector--pf-c-context-selector--m-large__toggle--active--BorderBottomWidth
4px
.pf-c-context-selector--pf-c-context-selector--m-large__toggle--expanded--BorderBottomWidth
4px
.pf-c-context-selector--pf-c-context-selector--m-page-insets__toggle--PaddingRight
1rem
.pf-c-context-selector--pf-c-context-selector--m-page-insets__toggle--PaddingLeft
1rem
.pf-c-context-selector--pf-c-context-selector--m-page-insets__toggle--xl--PaddingRight
1.5rem
.pf-c-context-selector--pf-c-context-selector--m-page-insets__toggle--xl--PaddingLeft
1.5rem
.pf-c-context-selector--pf-c-context-selector--m-page-insets__menu-list-item--PaddingRight
1rem
.pf-c-context-selector--pf-c-context-selector--m-page-insets__menu-list-item--PaddingLeft
1rem
.pf-c-context-selector--pf-c-context-selector--m-page-insets__menu-list-item--xl--PaddingRight
1.5rem
.pf-c-context-selector--pf-c-context-selector--m-page-insets__menu-list-item--xl--PaddingLeft
1.5rem
.pf-c-context-selector--pf-c-context-selector--m-page-insets__menu-search--PaddingRight
1rem
.pf-c-context-selector--pf-c-context-selector--m-page-insets__menu-search--PaddingLeft
1rem
.pf-c-context-selector--pf-c-context-selector--m-page-insets__menu-search--xl--PaddingRight
1.5rem
.pf-c-context-selector--pf-c-context-selector--m-page-insets__menu-search--xl--PaddingLeft
1.5rem
.pf-c-context-selector--pf-c-context-selector--m-page-insets__menu-footer--PaddingRight
1rem
.pf-c-context-selector--pf-c-context-selector--m-page-insets__menu-footer--PaddingLeft
1rem
.pf-c-context-selector--pf-c-context-selector--m-page-insets__menu-footer--xl--PaddingRight
1.5rem
.pf-c-context-selector--pf-c-context-selector--m-page-insets__menu-footer--xl--PaddingLeft
1.5rem
.pf-c-context-selector--pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingRight
1rem
.pf-c-context-selector--pf-c-context-selector--m-page-insets__toggle--m-plain--PaddingLeft
1rem
.pf-c-context-selector--pf-c-context-selector--m-page-insets__toggle--m-plain--xl--PaddingRight
1.5rem
.pf-c-context-selector--pf-c-context-selector--m-page-insets__toggle--m-plain--xl--PaddingLeft
1.5rem
.pf-c-context-selector--pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingRight
1rem
.pf-c-context-selector--pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--PaddingLeft
1rem
.pf-c-context-selector--pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--xl--PaddingRight
1.5rem
.pf-c-context-selector--pf-c-context-selector--m-page-insets__toggle--m-plain--m-text--xl--PaddingLeft
1.5rem
.pf-c-context-selector.pf-m-full-height--pf-c-context-selector__toggle--active--BorderBottomWidth
4px
.pf-c-context-selector.pf-m-full-height--pf-c-context-selector__toggle--expanded--BorderBottomWidth
4px
.pf-c-context-selector.pf-m-full-height--pf-c-context-selector__toggle--PaddingRight
1.5rem
.pf-c-context-selector.pf-m-full-height--pf-c-context-selector__toggle--PaddingLeft
1.5rem
.pf-c-context-selector.pf-m-large--pf-c-context-selector__toggle--PaddingTop
1rem
.pf-c-context-selector.pf-m-large--pf-c-context-selector__toggle--PaddingBottom
1rem
.pf-c-context-selector.pf-m-large--pf-c-context-selector__toggle--hover--BorderBottomWidth
4px
.pf-c-context-selector.pf-m-large--pf-c-context-selector__toggle--active--BorderBottomWidth
4px
.pf-c-context-selector.pf-m-large--pf-c-context-selector__toggle--expanded--BorderBottomWidth
4px
.pf-c-context-selector.pf-m-page-insets--pf-c-context-selector__toggle--PaddingRight
1rem
.pf-c-context-selector.pf-m-page-insets--pf-c-context-selector__toggle--PaddingLeft
1rem
.pf-c-context-selector.pf-m-page-insets--pf-c-context-selector__menu-list-item--PaddingRight
1rem
.pf-c-context-selector.pf-m-page-insets--pf-c-context-selector__menu-list-item--PaddingLeft
1rem
.pf-c-context-selector.pf-m-page-insets--pf-c-context-selector__menu-search--PaddingRight
1rem
.pf-c-context-selector.pf-m-page-insets--pf-c-context-selector__menu-search--PaddingLeft
1rem
.pf-c-context-selector.pf-m-page-insets--pf-c-context-selector__menu-footer--PaddingRight
1rem
.pf-c-context-selector.pf-m-page-insets--pf-c-context-selector__menu-footer--PaddingLeft
1rem
.pf-c-context-selector.pf-m-page-insets--pf-c-context-selector__toggle--m-plain--PaddingRight
1rem
.pf-c-context-selector.pf-m-page-insets--pf-c-context-selector__toggle--m-plain--PaddingLeft
1rem
.pf-c-context-selector.pf-m-page-insets--pf-c-context-selector__toggle--m-plain--m-text--PaddingRight
1rem
.pf-c-context-selector.pf-m-page-insets--pf-c-context-selector__toggle--m-plain--m-text--PaddingLeft
1rem
.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
.pf-c-context-selector__toggle.pf-m-plain--pf-c-context-selector__toggle--PaddingRight
1rem
.pf-c-context-selector__toggle.pf-m-plain--pf-c-context-selector__toggle--PaddingLeft
1rem
.pf-c-context-selector__toggle.pf-m-plain--pf-c-context-selector__toggle-icon--Color
#6a6e73
.pf-c-context-selector__toggle.pf-m-plain.pf-m-text--pf-c-context-selector__toggle--PaddingRight
0.5rem
.pf-c-context-selector__toggle.pf-m-plain.pf-m-text--pf-c-context-selector__toggle--PaddingLeft
0.5rem
.pf-c-context-selector__toggle.pf-m-plain.pf-m-disabled--pf-c-context-selector__toggle--m-plain--Color
#d2d2d2
.pf-c-context-selector__toggle.pf-m-plain:hover--pf-c-context-selector__toggle--m-plain--Color
#151515
.pf-c-context-selector__toggle.pf-m-plain:hover--pf-c-context-selector--m-plain__toggle-icon--Color
#151515
.pf-c-context-selector__menu-list-item.pf-m-disabled--pf-c-context-selector__menu-list-item--Color
#6a6e73

View source on GitHub