Context Selector

Context Selector

Overview

The Context Selector is used when the data/resources shown in the UI are dependent on context. It is useful when the UI cannot show data for multiple contexts simultaneously, or when it makes sense not to. Different contexts within a product should share the same navigation, but will differ in the data shown. Examples of contexts could include concepts such as region, project, or organization, but the specific notion of context is defined by the individual product.

Context Selector Left Side

The context selector should appear as a dropdown in the Masthead, next to the application branding.

This pattern should NOT be used:

  • When there is a need to select more than one context within a single layer of context (multiselect).
  • As a shortcut for other navigation items.
  • To navigate to a different “product area” with different navigation options/features. For that use case, consider the Launcher.

Context Selector

Context Selector Search

  1. If there is a search bar, it should be at the very top of the menu.
  2. If there are many items (i.e. more than 12), the dropdown should scroll and a search field should be added to filter the list as the user types.

Responsive Behavior

Context Selector Mobile

  • Because the context identifies what is in the UI, the Context Selector should remain visible at smaller viewports.
  • Product branding should be dropped in favor of keeping the context visible.
  • If the product branding served as navigation, that navigation item should be added to the hamburger menu.

Truncation

Context names may need to be truncated if the names are very long, or if horizontal space is tight. Names should be truncated in a way that makes sense for the product or application. See PatternFly’s guidelines on truncation.

  • View Angular PatternFly Example
  • View PatternFly NG Example
  • View PatternFly React Example

PatternFly Core Example


Example

View full page example

Reference Markup

<div class="nav contextselector-pf">
  <select class="selectpicker" data-live-search="true">
    <option>Really long server name server name</option>
    <option>A Different Context</option>
    <option>A Second Context</option>
    <option>Current</option>
    <option>Superlongstringwithoutanyspacesthatkeepsgoingandgoingandgoing</option>
    <option>Dolor Sit Amet</option>
    <option>Dolor Sit Amet</option>
    <option>Dolor Sit Amet</option>
    <option>Dolor Sit Amet</option>
    <option>Dolor Sit Amet</option>
    <option>Dolor Sit Amet</option>
    <option>Dolor Sit Amet</option>
    <option>Dolor Sit Amet</option>
    <option>Dolor Sit Amet</option>
  </select>
</div>