Skip to content
Patternfly Logo

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 user's context.

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

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.

Red Hat logo
Copyright © 2022 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines