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 users’ context. Related design guidelines: Navigation system
ExamplesDocumentationCSS VariablesExamples
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-list-item | <li> | Initiaties a menu item. |
.pf-m-expanded | .pf-c-context-selector | Modifies for the expanded state. |
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 | ||
