@patternfly/patternfly 4.178.0 → 4.179.0

package/docs/demos/ContextSelector/examples/ContextSelector.md

@@ -5,207 +5,3035 @@ section: components
 
 ### Context selector in masthead
 
-```hbs isFullscreen
-{{#> masthead-demo--page masthead-demo--page--id="context-selector-in-masthead"}}
-  {{#> masthead masthead--id=(concat masthead-demo--page--id '-masthead')}}  {{> masthead-toggle}}
-    {{#> masthead-main}}
-      {{#> masthead-brand}}
-        {{> brand
-          brand--attribute='style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"'
-          brand--IsPicture="true"
-          brand--img-url--base='/assets/images/logo__pf--reverse--base.png'
-          brand--img-url='/assets/images/logo__pf--reverse--base.svg'
-          brand--img-url-on-md='/assets/images/logo__pf--reverse-on-md.svg'}}
-      {{/masthead-brand}}
-    {{/masthead-main}}
-    {{#> masthead-content}}
-      {{#> toolbar toolbar--modifier="pf-m-full-height pf-m-static" toolbar--id=(concat masthead--id '-toolbar')}}
-        {{#> toolbar-content}}
-          {{#> toolbar-content-section}}
-            {{#> toolbar-item}}
-              {{> masthead-demo--context-selector}}
-            {{/toolbar-item}}
-          {{/toolbar-content-section}}
-        {{/toolbar-content}}
-      {{/toolbar}}
-    {{/masthead-content}}
-  {{/masthead}}
-{{/masthead-demo--page}}
+```html isFullscreen
+<div class="pf-c-page" id="context-selector-in-masthead">
+  <a
+    class="pf-c-skip-to-content pf-c-button pf-m-primary"
+    href="#main-content-context-selector-in-masthead"
+  >Skip to content</a>
+
+  <header class="pf-c-masthead" id="context-selector-in-masthead-masthead">
+    <span class="pf-c-masthead__toggle">
+      <button
+        class="pf-c-button pf-m-plain"
+        type="button"
+        aria-label="Global navigation"
+      >
+        <i class="fas fa-bars" aria-hidden="true"></i>
+      </button>
+    </span>
+    <div class="pf-c-masthead__main">
+      <a class="pf-c-masthead__brand" href="#">
+        <picture
+          class="pf-c-brand pf-m-picture"
+          style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
+        >
+          <source
+            media="(min-width: 768px)"
+            srcset="/assets/images/logo__pf--reverse-on-md.svg"
+          />
+          <source srcset="/assets/images/logo__pf--reverse--base.svg" />
+          <img
+            src="/assets/images/logo__pf--reverse--base.png"
+            alt="Fallback patternFly default logo"
+          />
+        </picture>
+      </a>
+    </div>
+    <div class="pf-c-masthead__content">
+      <div
+        class="pf-c-toolbar pf-m-full-height pf-m-static"
+        id="context-selector-in-masthead-masthead-toolbar"
+      >
+        <div class="pf-c-toolbar__content">
+          <div class="pf-c-toolbar__content-section">
+            <div class="pf-c-toolbar__item">
+              <div class="pf-c-context-selector pf-m-full-height">
+                <span
+                  id="context-selector-in-masthead-masthead-context-selector-label"
+                  hidden
+                >Selected project:</span>
+                <button
+                  class="pf-c-context-selector__toggle"
+                  aria-expanded="false"
+                  id="context-selector-in-masthead-masthead-context-selector-toggle"
+                  aria-labelledby="context-selector-in-masthead-masthead-context-selector-label context-selector-in-masthead-masthead-context-selector-toggle"
+                >
+                  <span
+                    class="pf-c-context-selector__toggle-text"
+                  >Context selector</span>
+                  <span class="pf-c-context-selector__toggle-icon">
+                    <i class="fas fa-caret-down" aria-hidden="true"></i>
+                  </span>
+                </button>
+                <div class="pf-c-context-selector__menu" hidden>
+                  <div class="pf-c-context-selector__menu-search">
+                    <div class="pf-c-input-group">
+                      <input
+                        class="pf-c-form-control"
+                        type="search"
+                        placeholder="Search"
+                        id="context-selector-in-masthead-masthead-context-selectortextInput1"
+                        name="context-selector-in-masthead-masthead-context-selectortextInput1"
+                        aria-labelledby="context-selector-in-masthead-masthead-context-selector-search-button"
+                      />
+                      <button
+                        class="pf-c-button pf-m-control"
+                        type="button"
+                        id="context-selector-in-masthead-masthead-context-selector-search-button"
+                        aria-label="Search menu items"
+                      >
+                        <i class="fas fa-search" aria-hidden="true"></i>
+                      </button>
+                    </div>
+                  </div>
+                  <ul class="pf-c-context-selector__menu-list">
+                    <li>
+                      <a
+                        class="pf-c-context-selector__menu-list-item"
+                        href="#"
+                      >Link</a>
+                    </li>
+                    <li>
+                      <button
+                        class="pf-c-context-selector__menu-list-item"
+                        type="button"
+                      >Action</button>
+                    </li>
+                    <li>
+                      <a
+                        class="pf-c-context-selector__menu-list-item pf-m-disabled"
+                        href="#"
+                        aria-disabled="true"
+                        tabindex="-1"
+                      >Disabled link</a>
+                    </li>
+                    <li>
+                      <button
+                        class="pf-c-context-selector__menu-list-item"
+                        type="button"
+                        disabled
+                      >Disabled action</button>
+                    </li>
+                    <li>
+                      <button
+                        class="pf-c-context-selector__menu-list-item"
+                        type="button"
+                      >My project</button>
+                    </li>
+                    <li>
+                      <button
+                        class="pf-c-context-selector__menu-list-item"
+                        type="button"
+                      >OpenShift cluster</button>
+                    </li>
+                    <li>
+                      <button
+                        class="pf-c-context-selector__menu-list-item"
+                        type="button"
+                      >Production Ansible</button>
+                    </li>
+                    <li>
+                      <button
+                        class="pf-c-context-selector__menu-list-item"
+                        type="button"
+                      >AWS</button>
+                    </li>
+                    <li>
+                      <button
+                        class="pf-c-context-selector__menu-list-item"
+                        type="button"
+                      >Azure</button>
+                    </li>
+                    <li>
+                      <button
+                        class="pf-c-context-selector__menu-list-item"
+                        type="button"
+                      >My project</button>
+                    </li>
+                    <li>
+                      <button
+                        class="pf-c-context-selector__menu-list-item"
+                        type="button"
+                      >OpenShift cluster</button>
+                    </li>
+                    <li>
+                      <button
+                        class="pf-c-context-selector__menu-list-item"
+                        type="button"
+                      >Production Ansible</button>
+                    </li>
+                    <li>
+                      <button
+                        class="pf-c-context-selector__menu-list-item"
+                        type="button"
+                      >AWS</button>
+                    </li>
+                    <li>
+                      <button
+                        class="pf-c-context-selector__menu-list-item"
+                        type="button"
+                      >Azure</button>
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </header>
+  <div class="pf-c-page__sidebar">
+    <div class="pf-c-page__sidebar-body">
+      <nav
+        class="pf-c-nav"
+        id="context-selector-in-masthead-primary-nav"
+        aria-label="Global"
+      >
+        <ul class="pf-c-nav__list">
+          <li class="pf-c-nav__item">
+            <a href="#" class="pf-c-nav__link">System panel</a>
+          </li>
+          <li class="pf-c-nav__item">
+            <a
+              href="#"
+              class="pf-c-nav__link pf-m-current"
+              aria-current="page"
+            >Policy</a>
+          </li>
+          <li class="pf-c-nav__item">
+            <a href="#" class="pf-c-nav__link">Authentication</a>
+          </li>
+          <li class="pf-c-nav__item">
+            <a href="#" class="pf-c-nav__link">Network services</a>
+          </li>
+          <li class="pf-c-nav__item">
+            <a href="#" class="pf-c-nav__link">Server</a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  </div>
+  <main
+    class="pf-c-page__main"
+    tabindex="-1"
+    id="main-content-context-selector-in-masthead"
+  >
+    <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
+      <div class="pf-c-page__main-body">
+        <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
+          <ol class="pf-c-breadcrumb__list">
+            <li class="pf-c-breadcrumb__item">
+              <a href="#" class="pf-c-breadcrumb__link">Section home</a>
+            </li>
+            <li class="pf-c-breadcrumb__item">
+              <span class="pf-c-breadcrumb__item-divider">
+                <i class="fas fa-angle-right" aria-hidden="true"></i>
+              </span>
+
+              <a href="#" class="pf-c-breadcrumb__link">Section title</a>
+            </li>
+            <li class="pf-c-breadcrumb__item">
+              <span class="pf-c-breadcrumb__item-divider">
+                <i class="fas fa-angle-right" aria-hidden="true"></i>
+              </span>
+
+              <a href="#" class="pf-c-breadcrumb__link">Section title</a>
+            </li>
+            <li class="pf-c-breadcrumb__item">
+              <span class="pf-c-breadcrumb__item-divider">
+                <i class="fas fa-angle-right" aria-hidden="true"></i>
+              </span>
+
+              <a
+                href="#"
+                class="pf-c-breadcrumb__link pf-m-current"
+                aria-current="page"
+              >Section landing</a>
+            </li>
+          </ol>
+        </nav>
+      </div>
+    </section>
+    <section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
+      <div class="pf-c-page__main-body">
+        <div class="pf-c-content">
+          <h1>Main title</h1>
+          <p>This is a full page demo.</p>
+        </div>
+      </div>
+    </section>
+    <section class="pf-c-page__main-section pf-m-limit-width">
+      <div class="pf-c-page__main-body">
+        <div class="pf-l-gallery pf-m-gutter">
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  </main>
+</div>
+
 ```
 
 ### Context selector in sidebar
 
-```hbs isFullscreen
-{{> page-demo-masthead-component page-demo-default--id="context-selector-in-sidebar" page-demo-masthead-component--HasMenu="true"}}
-```
+```html isFullscreen
+<div class="pf-c-page" id="context-selector-in-sidebar">
+  <header class="pf-c-page__header">
+    <a
+      class="pf-c-skip-to-content pf-c-button pf-m-primary"
+      href="#main-content-context-selector-in-sidebar"
+    >Skip to content</a>
+
+    <header class="pf-c-masthead">
+      <span class="pf-c-masthead__toggle">
+        <button
+          class="pf-c-button pf-m-plain"
+          type="button"
+          aria-label="Global navigation"
+        >
+          <i class="fas fa-bars" aria-hidden="true"></i>
+        </button>
+      </span>
+      <div class="pf-c-masthead__main">
+        <a class="pf-c-masthead__brand" href="#">
+          <picture
+            class="pf-c-brand pf-m-picture"
+            style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
+          >
+            <source
+              media="(min-width: 768px)"
+              srcset="/assets/images/logo__pf--reverse-on-md.svg"
+            />
+            <source srcset="/assets/images/logo__pf--reverse--base.svg" />
+            <img
+              src="/assets/images/logo__pf--reverse--base.png"
+              alt="Fallback patternFly default logo"
+            />
+          </picture>
+        </a>
+      </div>
+      <div class="pf-c-masthead__content">
+        <div class="pf-c-toolbar pf-m-full-height pf-m-static" id="-toolbar">
+          <div class="pf-c-toolbar__content">
+            <div class="pf-c-toolbar__content-section">
+              <div
+                class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
+              >
+                <div class="pf-c-toolbar__item">
+                  <button
+                    class="pf-c-button pf-m-plain"
+                    type="button"
+                    aria-label="Notifications"
+                  >
+                    <span class="pf-c-notification-badge">
+                      <i class="pf-icon-attention-bell" aria-hidden="true"></i>
+                    </span>
+                  </button>
+                </div>
+                <div
+                  class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
+                >
+                  <div class="pf-c-toolbar__item">
+                    <nav
+                      class="pf-c-app-launcher"
+                      aria-label="Application launcher"
+                      id="-icon-group--app-launcher"
+                    >
+                      <button
+                        class="pf-c-app-launcher__toggle"
+                        type="button"
+                        id="-button"
+                        aria-expanded="false"
+                        aria-label="Application launcher"
+                      >
+                        <i class="fas fa-th" aria-hidden="true"></i>
+                      </button>
+                      <div
+                        class="pf-c-app-launcher__menu pf-m-align-right"
+                        hidden
+                      >
+                        <div class="pf-c-app-launcher__menu-search">
+                          <input
+                            class="pf-c-form-control"
+                            type="search"
+                            aria-label="Type to filter"
+                            placeholder="Filter by name..."
+                            id="-application-launcher-text-input"
+                            name="textInput1"
+                          />
+                        </div>
+                        <section class="pf-c-app-launcher__group">
+                          <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
+                          <ul>
+                            <li
+                              class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
+                            >
+                              <a class="pf-c-app-launcher__menu-item">
+                                Link 1
+                                <span
+                                  class="pf-c-app-launcher__menu-item-external-icon"
+                                >
+                                  <i
+                                    class="fas fa-external-link-alt"
+                                    aria-hidden="true"
+                                  ></i>
+                                </span>
+                                <span
+                                  class="pf-screen-reader"
+                                >(opens new window)</span>
+                              </a>
+                              <button
+                                class="pf-c-app-launcher__menu-item pf-m-action"
+                                type="button"
+                                aria-label="Favorite"
+                              >
+                                <i class="fas fa-star" aria-hidden="true"></i>
+                              </button>
+                            </li>
+                            <li
+                              class="pf-c-app-launcher__menu-wrapper pf-m-external"
+                            >
+                              <a class="pf-c-app-launcher__menu-item">
+                                Link 2
+                                <span
+                                  class="pf-c-app-launcher__menu-item-external-icon"
+                                >
+                                  <i
+                                    class="fas fa-external-link-alt"
+                                    aria-hidden="true"
+                                  ></i>
+                                </span>
+                                <span
+                                  class="pf-screen-reader"
+                                >(opens new window)</span>
+                              </a>
+                              <button
+                                class="pf-c-app-launcher__menu-item pf-m-action"
+                                type="button"
+                                aria-label="Favorite"
+                              >
+                                <i class="fas fa-star" aria-hidden="true"></i>
+                              </button>
+                            </li>
+                          </ul>
+                        </section>
+                        <hr class="pf-c-divider" />
+                        <section class="pf-c-app-launcher__group">
+                          <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
+                          <ul>
+                            <li
+                              class="pf-c-app-launcher__menu-wrapper pf-m-external"
+                            >
+                              <a class="pf-c-app-launcher__menu-item">
+                                Link 1
+                                <span
+                                  class="pf-c-app-launcher__menu-item-external-icon"
+                                >
+                                  <i
+                                    class="fas fa-external-link-alt"
+                                    aria-hidden="true"
+                                  ></i>
+                                </span>
+                                <span
+                                  class="pf-screen-reader"
+                                >(opens new window)</span>
+                              </a>
+                              <button
+                                class="pf-c-app-launcher__menu-item pf-m-action"
+                                type="button"
+                                aria-label="Favorite"
+                              >
+                                <i class="fas fa-star" aria-hidden="true"></i>
+                              </button>
+                            </li>
+                            <li
+                              class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
+                            >
+                              <a class="pf-c-app-launcher__menu-item">
+                                Link 2
+                                <span
+                                  class="pf-c-app-launcher__menu-item-external-icon"
+                                >
+                                  <i
+                                    class="fas fa-external-link-alt"
+                                    aria-hidden="true"
+                                  ></i>
+                                </span>
+                                <span
+                                  class="pf-screen-reader"
+                                >(opens new window)</span>
+                              </a>
+                              <button
+                                class="pf-c-app-launcher__menu-item pf-m-action"
+                                type="button"
+                                aria-label="Favorite"
+                              >
+                                <i class="fas fa-star" aria-hidden="true"></i>
+                              </button>
+                            </li>
+                          </ul>
+                        </section>
+                      </div>
+                    </nav>
+                  </div>
+                  <div class="pf-c-toolbar__item">
+                    <div class="pf-c-dropdown">
+                      <button
+                        class="pf-c-dropdown__toggle pf-m-plain"
+                        id="-settings-button"
+                        aria-expanded="false"
+                        type="button"
+                        aria-label="Settings"
+                      >
+                        <i class="fas fa-cog" aria-hidden="true"></i>
+                      </button>
+                      <ul
+                        class="pf-c-dropdown__menu pf-m-align-right"
+                        aria-labelledby="-settings-button"
+                        hidden
+                      >
+                        <li>
+                          <button
+                            class="pf-c-dropdown__menu-item"
+                            type="button"
+                          >Settings</button>
+                        </li>
+                        <li>
+                          <button
+                            class="pf-c-dropdown__menu-item"
+                            type="button"
+                          >Use the beta release</button>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                  <div class="pf-c-toolbar__item">
+                    <div class="pf-c-dropdown">
+                      <button
+                        class="pf-c-dropdown__toggle pf-m-plain"
+                        id="-help-button"
+                        aria-expanded="false"
+                        type="button"
+                        aria-label="Help"
+                      >
+                        <i class="fas fa-question-circle" aria-hidden="true"></i>
+                      </button>
+                      <ul
+                        class="pf-c-dropdown__menu pf-m-align-right"
+                        aria-labelledby="-help-button"
+                        hidden
+                      >
+                        <li>
+                          <button
+                            class="pf-c-dropdown__menu-item"
+                            type="button"
+                          >Support options</button>
+                        </li>
+                        <li>
+                          <button
+                            class="pf-c-dropdown__menu-item"
+                            type="button"
+                          >Open support case</button>
+                        </li>
+                        <li>
+                          <button
+                            class="pf-c-dropdown__menu-item"
+                            type="button"
+                          >API documentation</button>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+                <div class="pf-c-toolbar__item pf-m-hidden-on-lg">
+                  <div class="pf-c-dropdown">
+                    <button
+                      class="pf-c-menu-toggle pf-m-plain"
+                      type="button"
+                      aria-expanded="false"
+                      aria-label="Actions"
+                    >
+                      <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+                    </button>
+                    <div
+                      class="pf-c-menu pf-m-drilldown pf-m-align-right"
+                      hidden
+                    >
+                      <div class="pf-c-menu__content">
+                        <section class="pf-c-menu__group pf-m-hidden-on-sm">
+                          <ul class="pf-c-menu__list">
+                            <li class="pf-c-menu__list-item pf-m-disabled">
+                              <button
+                                class="pf-c-menu__item"
+                                type="button"
+                                disabled
+                              >
+                                <span class="pf-c-menu__item-description">
+                                  <div class="pf-u-font-size-sm">Username:</div>
+                                  <div
+                                    class="pf-u-font-size-md"
+                                  >mshaksho@redhat.com</div>
+                                </span>
+                              </button>
+                            </li>
+                            <li class="pf-c-menu__list-item pf-m-disabled">
+                              <button
+                                class="pf-c-menu__item"
+                                type="button"
+                                disabled
+                              >
+                                <span class="pf-c-menu__item-description">
+                                  <div class="pf-u-font-size-sm">Account number:</div>
+                                  <div class="pf-u-font-size-md">123456789</div>
+                                </span>
+                              </button>
+                            </li>
+                            <li class="pf-c-divider" role="separator"></li>
+                            <li class="pf-c-menu__list-item">
+                              <button class="pf-c-menu__item" type="button">
+                                <span class="pf-c-menu__item-main">
+                                  <span class="pf-c-menu__item-text">My profile</span>
+                                </span>
+                              </button>
+                            </li>
+                            <li class="pf-c-menu__list-item">
+                              <button class="pf-c-menu__item" type="button">
+                                <span class="pf-c-menu__item-main">
+                                  <span
+                                    class="pf-c-menu__item-text"
+                                  >User management</span>
+                                </span>
+                              </button>
+                            </li>
+                            <li class="pf-c-menu__list-item">
+                              <button class="pf-c-menu__item" type="button">
+                                <span class="pf-c-menu__item-main">
+                                  <span class="pf-c-menu__item-text">Logout</span>
+                                </span>
+                              </button>
+                            </li>
+                          </ul>
+                        </section>
+                        <hr class="pf-c-divider pf-m-hidden-on-sm" />
+                        <section class="pf-c-menu__group">
+                          <ul class="pf-c-menu__list">
+                            <li class="pf-c-menu__list-item">
+                              <button
+                                class="pf-c-menu__item"
+                                type="button"
+                                aria-expanded="false"
+                              >
+                                <span class="pf-c-menu__item-main">
+                                  <span class="pf-c-menu__item-icon">
+                                    <i
+                                      class="fas fa-fw fa-cog"
+                                      aria-hidden="true"
+                                    ></i>
+                                  </span>
+                                  <span class="pf-c-menu__item-text">Settings</span>
+                                  <span class="pf-c-menu__item-toggle-icon">
+                                    <i class="fas fa-angle-right"></i>
+                                  </span>
+                                </span>
+                              </button>
+                              <div class="pf-c-menu" hidden>
+                                <div class="pf-c-menu__content">
+                                  <ul class="pf-c-menu__list">
+                                    <li
+                                      class="pf-c-menu__list-item pf-m-drill-up"
+                                    >
+                                      <button
+                                        class="pf-c-menu__item"
+                                        type="button"
+                                      >
+                                        <span class="pf-c-menu__item-main">
+                                          <span
+                                            class="pf-c-menu__item-toggle-icon"
+                                          >
+                                            <i class="fas fa-angle-left"></i>
+                                          </span>
+                                          <span class="pf-c-menu__item-icon">
+                                            <i
+                                              class="fas fa-fw fa-cog"
+                                              aria-hidden="true"
+                                            ></i>
+                                          </span>
+                                          <span
+                                            class="pf-c-menu__item-text"
+                                          >Settings</span>
+                                        </span>
+                                      </button>
+                                    </li>
+                                    <li class="pf-c-divider" role="separator"></li>
+                                    <li class="pf-c-menu__list-item">
+                                      <a class="pf-c-menu__item" href="#">
+                                        <span class="pf-c-menu__item-main">
+                                          <span
+                                            class="pf-c-menu__item-text"
+                                          >Customer support</span>
+                                        </span>
+                                      </a>
+                                    </li>
+                                    <li class="pf-c-menu__list-item">
+                                      <a class="pf-c-menu__item" href="#">
+                                        <span class="pf-c-menu__item-main">
+                                          <span
+                                            class="pf-c-menu__item-text"
+                                          >About</span>
+                                        </span>
+                                      </a>
+                                    </li>
+                                  </ul>
+                                </div>
+                              </div>
+                            </li>
+
+                            <li class="pf-c-menu__list-item">
+                              <button
+                                class="pf-c-menu__item"
+                                type="button"
+                                aria-expanded="false"
+                              >
+                                <span class="pf-c-menu__item-main">
+                                  <span class="pf-c-menu__item-icon">
+                                    <i
+                                      class="fas fa-fw fa-pf-icon pf-icon-help"
+                                      aria-hidden="true"
+                                    ></i>
+                                  </span>
+                                  <span class="pf-c-menu__item-text">Help</span>
+                                  <span class="pf-c-menu__item-toggle-icon">
+                                    <i class="fas fa-angle-right"></i>
+                                  </span>
+                                </span>
+                              </button>
+                              <div class="pf-c-menu" hidden>
+                                <div class="pf-c-menu__content">
+                                  <ul class="pf-c-menu__list">
+                                    <li
+                                      class="pf-c-menu__list-item pf-m-drill-up"
+                                    >
+                                      <button
+                                        class="pf-c-menu__item"
+                                        type="button"
+                                      >
+                                        <span class="pf-c-menu__item-main">
+                                          <span
+                                            class="pf-c-menu__item-toggle-icon"
+                                          >
+                                            <i class="fas fa-angle-left"></i>
+                                          </span>
+                                          <span class="pf-c-menu__item-icon">
+                                            <i
+                                              class="fas fa-fw fa-pf-icon pf-icon-help"
+                                              aria-hidden="true"
+                                            ></i>
+                                          </span>
+                                          <span
+                                            class="pf-c-menu__item-text"
+                                          >Help</span>
+                                        </span>
+                                      </button>
+                                    </li>
+                                    <li class="pf-c-divider" role="separator"></li>
+                                    <li class="pf-c-menu__list-item">
+                                      <a class="pf-c-menu__item" href="#">
+                                        <span class="pf-c-menu__item-main">
+                                          <span
+                                            class="pf-c-menu__item-text"
+                                          >Support options</span>
+                                        </span>
+                                      </a>
+                                    </li>
+                                    <li class="pf-c-menu__list-item">
+                                      <a class="pf-c-menu__item" href="#">
+                                        <span class="pf-c-menu__item-main">
+                                          <span
+                                            class="pf-c-menu__item-text"
+                                          >Open support case</span>
+                                        </span>
+                                      </a>
+                                    </li>
+                                    <li class="pf-c-menu__list-item">
+                                      <a class="pf-c-menu__item" href="#">
+                                        <span class="pf-c-menu__item-main">
+                                          <span
+                                            class="pf-c-menu__item-text"
+                                          >API documentation</span>
+                                        </span>
+                                      </a>
+                                    </li>
+                                  </ul>
+                                </div>
+                              </div>
+                            </li>
+
+                            <li class="pf-c-menu__list-item">
+                              <button class="pf-c-menu__item" type="button">
+                                <span class="pf-c-menu__item-main">
+                                  <span class="pf-c-menu__item-icon">
+                                    <i
+                                      class="fas fa-fw fa-th"
+                                      aria-hidden="true"
+                                    ></i>
+                                  </span>
+                                  <span
+                                    class="pf-c-menu__item-text"
+                                  >Application launcher</span>
+                                  <span class="pf-c-menu__item-toggle-icon">
+                                    <i class="fas fa-angle-right"></i>
+                                  </span>
+                                </span>
+                              </button>
+                              <div class="pf-c-menu" hidden>
+                                <div class="pf-c-menu__header">
+                                  <button class="pf-c-menu__item" type="button">
+                                    <span class="pf-c-menu__item-main">
+                                      <span class="pf-c-menu__item-toggle-icon">
+                                        <i class="fas fa-angle-left"></i>
+                                      </span>
+                                      <span class="pf-c-menu__item-icon">
+                                        <i
+                                          class="fas fa-fw fa-th"
+                                          aria-hidden="true"
+                                        ></i>
+                                      </span>
+                                      <span
+                                        class="pf-c-menu__item-text"
+                                      >Application launcher</span>
+                                    </span>
+                                  </button>
+                                </div>
+                                <div class="pf-c-menu__search">
+                                  <div class="pf-c-menu__search-input">
+                                    <input
+                                      class="pf-c-form-control pf-m-search"
+                                      type="search"
+                                      id="-drilldown-menu-list-3-search-input"
+                                      name="-drilldown-menu-list-3-search-input"
+                                      aria-label="Search"
+                                    />
+                                  </div>
+                                </div>
+                                <hr class="pf-c-divider" />
+                                <section class="pf-c-menu__group">
+                                  <h1 class="pf-c-menu__group-title">Favorites</h1>
+                                  <ul class="pf-c-menu__list">
+                                    <li class="pf-c-menu__list-item">
+                                      <a class="pf-c-menu__item" href="#">
+                                        <span class="pf-c-menu__item-main">
+                                          <span
+                                            class="pf-c-menu__item-text"
+                                          >Link 1</span>
+                                        </span>
+                                      </a>
+                                      <button
+                                        class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
+                                        type="button"
+                                        aria-label="Starred"
+                                      >
+                                        <span
+                                          class="pf-c-menu__item-action-icon"
+                                        >
+                                          <i
+                                            class="fas fa-star"
+                                            aria-hidden="true"
+                                          ></i>
+                                        </span>
+                                      </button>
+                                    </li>
+                                    <li class="pf-c-menu__list-item">
+                                      <a
+                                        class="pf-c-menu__item"
+                                        href="#"
+                                        target="_blank"
+                                      >
+                                        <span class="pf-c-menu__item-main">
+                                          <span
+                                            class="pf-c-menu__item-text"
+                                          >Link 2</span>
+                                          <span
+                                            class="pf-c-menu__item-external-icon"
+                                          >
+                                            <i
+                                              class="fas fa-external-link-alt"
+                                              aria-hidden="true"
+                                            ></i>
+                                          </span>
+                                          <span
+                                            class="pf-screen-reader"
+                                          >(opens new window)</span>
+                                        </span>
+                                      </a>
+                                      <button
+                                        class="pf-c-menu__item-action pf-m-favorite"
+                                        type="button"
+                                        aria-label="Not starred"
+                                      >
+                                        <span
+                                          class="pf-c-menu__item-action-icon"
+                                        >
+                                          <i
+                                            class="fas fa-star"
+                                            aria-hidden="true"
+                                          ></i>
+                                        </span>
+                                      </button>
+                                    </li>
+                                  </ul>
+                                </section>
+                                <hr class="pf-c-divider" />
+                                <section class="pf-c-menu__group">
+                                  <h1 class="pf-c-menu__group-title">Group 1</h1>
+                                  <ul class="pf-c-menu__list">
+                                    <li class="pf-c-menu__list-item">
+                                      <a class="pf-c-menu__item" href="#">
+                                        <span class="pf-c-menu__item-main">
+                                          <span
+                                            class="pf-c-menu__item-text"
+                                          >Link 1</span>
+                                        </span>
+                                      </a>
+                                      <button
+                                        class="pf-c-menu__item-action pf-m-favorite"
+                                        type="button"
+                                        aria-label="Not starred"
+                                      >
+                                        <span
+                                          class="pf-c-menu__item-action-icon"
+                                        >
+                                          <i
+                                            class="fas fa-star"
+                                            aria-hidden="true"
+                                          ></i>
+                                        </span>
+                                      </button>
+                                    </li>
+                                    <li class="pf-c-menu__list-item">
+                                      <a
+                                        class="pf-c-menu__item"
+                                        href="#"
+                                        target="_blank"
+                                      >
+                                        <span class="pf-c-menu__item-main">
+                                          <span
+                                            class="pf-c-menu__item-text"
+                                          >Link 2</span>
+                                          <span
+                                            class="pf-c-menu__item-external-icon"
+                                          >
+                                            <i
+                                              class="fas fa-external-link-alt"
+                                              aria-hidden="true"
+                                            ></i>
+                                          </span>
+                                          <span
+                                            class="pf-screen-reader"
+                                          >(opens new window)</span>
+                                        </span>
+                                      </a>
+                                      <button
+                                        class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
+                                        type="button"
+                                        aria-label="Starred"
+                                      >
+                                        <span
+                                          class="pf-c-menu__item-action-icon"
+                                        >
+                                          <i
+                                            class="fas fa-star"
+                                            aria-hidden="true"
+                                          ></i>
+                                        </span>
+                                      </button>
+                                    </li>
+                                  </ul>
+                                </section>
+                              </div>
+                            </li>
+                          </ul>
+                        </section>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
+                <div
+                  class="pf-c-dropdown"
+                  style="--pf-c-dropdown--MaxWidth: 20ch;"
+                >
+                  <button
+                    class="pf-c-dropdown__toggle"
+                    id="-profile-button"
+                    aria-expanded="false"
+                    type="button"
+                  >
+                    <span class="pf-c-dropdown__toggle-image">
+                      <img
+                        class="pf-c-avatar"
+                        src="/assets/images/img_avatar.svg"
+                        alt="Avatar image"
+                      />
+                    </span>
+                    <span class="pf-c-dropdown__toggle-text">Ned Username</span>
+                    <span class="pf-c-dropdown__toggle-icon">
+                      <i class="fas fa-caret-down" aria-hidden="true"></i>
+                    </span>
+                  </button>
+                  <div class="pf-c-dropdown__menu" hidden>
+                    <section class="pf-c-dropdown__group">
+                      <div class="pf-c-dropdown__menu-item pf-m-text">
+                        <div class="pf-u-font-size-sm">Account number:</div>
+                        <div>123456789</div>
+                      </div>
+                      <div class="pf-c-dropdown__menu-item pf-m-text">
+                        <div class="pf-u-font-size-sm">Username:</div>
+                        <div>mshaksho@redhat.com</div>
+                      </div>
+                    </section>
+                    <hr class="pf-c-divider" />
+                    <section class="pf-c-dropdown__group">
+                      <ul>
+                        <li>
+                          <a
+                            class="pf-c-dropdown__menu-item"
+                            href="#"
+                          >My profile</a>
+                        </li>
+                        <li>
+                          <a
+                            class="pf-c-dropdown__menu-item"
+                            href="#"
+                          >User management</a>
+                        </li>
+                        <li>
+                          <a class="pf-c-dropdown__menu-item" href="#">Logout</a>
+                        </li>
+                      </ul>
+                    </section>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
+  </header>
+  <div class="pf-c-page__sidebar">
+    <div class="pf-c-page__sidebar-body pf-m-menu">
+      <div class="pf-c-context-selector pf-m-page-insets pf-m-large">
+        <span
+          id="context-selector-collapsed-example-label"
+          hidden
+        >Selected project:</span>
+        <button
+          class="pf-c-context-selector__toggle"
+          aria-expanded="false"
+          id="context-selector-collapsed-example-toggle"
+          aria-labelledby="context-selector-collapsed-example-label context-selector-collapsed-example-toggle"
+        >
+          <span class="pf-c-context-selector__toggle-text">My project</span>
+          <span class="pf-c-context-selector__toggle-icon">
+            <i class="fas fa-caret-down" aria-hidden="true"></i>
+          </span>
+        </button>
+        <div class="pf-c-context-selector__menu" hidden>
+          <div class="pf-c-context-selector__menu-search">
+            <div class="pf-c-input-group">
+              <input
+                class="pf-c-form-control"
+                type="search"
+                placeholder="Search"
+                id="textInput1"
+                name="textInput1"
+                aria-labelledby="context-selector-collapsed-example-search-button"
+              />
+              <button
+                class="pf-c-button pf-m-control"
+                type="button"
+                id="context-selector-collapsed-example-search-button"
+                aria-label="Search menu items"
+              >
+                <i class="fas fa-search" aria-hidden="true"></i>
+              </button>
+            </div>
+          </div>
+          <ul class="pf-c-context-selector__menu-list">
+            <li>
+              <a class="pf-c-context-selector__menu-list-item" href="#">Link</a>
+            </li>
+            <li>
+              <button
+                class="pf-c-context-selector__menu-list-item"
+                type="button"
+              >Action</button>
+            </li>
+            <li>
+              <a
+                class="pf-c-context-selector__menu-list-item pf-m-disabled"
+                href="#"
+                aria-disabled="true"
+                tabindex="-1"
+              >Disabled link</a>
+            </li>
+            <li>
+              <button
+                class="pf-c-context-selector__menu-list-item"
+                type="button"
+                disabled
+              >Disabled action</button>
+            </li>
+            <li>
+              <button
+                class="pf-c-context-selector__menu-list-item"
+                type="button"
+              >My project</button>
+            </li>
+            <li>
+              <button
+                class="pf-c-context-selector__menu-list-item"
+                type="button"
+              >OpenShift cluster</button>
+            </li>
+            <li>
+              <button
+                class="pf-c-context-selector__menu-list-item"
+                type="button"
+              >Production Ansible</button>
+            </li>
+            <li>
+              <button
+                class="pf-c-context-selector__menu-list-item"
+                type="button"
+              >AWS</button>
+            </li>
+            <li>
+              <button
+                class="pf-c-context-selector__menu-list-item"
+                type="button"
+              >Azure</button>
+            </li>
+            <li>
+              <button
+                class="pf-c-context-selector__menu-list-item"
+                type="button"
+              >My project</button>
+            </li>
+            <li>
+              <button
+                class="pf-c-context-selector__menu-list-item"
+                type="button"
+              >OpenShift cluster</button>
+            </li>
+            <li>
+              <button
+                class="pf-c-context-selector__menu-list-item"
+                type="button"
+              >Production Ansible</button>
+            </li>
+            <li>
+              <button
+                class="pf-c-context-selector__menu-list-item"
+                type="button"
+              >AWS</button>
+            </li>
+            <li>
+              <button
+                class="pf-c-context-selector__menu-list-item"
+                type="button"
+              >Azure</button>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="pf-c-page__sidebar-body">
+      <nav
+        class="pf-c-nav"
+        id="context-selector-in-sidebar-primary-nav"
+        aria-label="Global"
+      >
+        <ul class="pf-c-nav__list">
+          <li class="pf-c-nav__item">
+            <a href="#" class="pf-c-nav__link">System panel</a>
+          </li>
+          <li class="pf-c-nav__item">
+            <a
+              href="#"
+              class="pf-c-nav__link pf-m-current"
+              aria-current="page"
+            >Policy</a>
+          </li>
+          <li class="pf-c-nav__item">
+            <a href="#" class="pf-c-nav__link">Authentication</a>
+          </li>
+          <li class="pf-c-nav__item">
+            <a href="#" class="pf-c-nav__link">Network services</a>
+          </li>
+          <li class="pf-c-nav__item">
+            <a href="#" class="pf-c-nav__link">Server</a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  </div>
+  <main
+    class="pf-c-page__main"
+    tabindex="-1"
+    id="main-content-context-selector-in-sidebar"
+  >
+    <section
+      class="pf-c-page__main-section pf-m-limit-width pf-m-light pf-m-shadow-bottom"
+    >
+      <div class="pf-c-page__main-body">
+        <div class="pf-c-content">
+          <h1>Main title</h1>
+          <p>This is a full page demo.</p>
+        </div>
+      </div>
+    </section>
+    <section
+      class="pf-c-page__main-section pf-m-limit-width pf-m-overflow-scroll"
+    >
+      <div class="pf-c-page__main-body">
+        <div class="pf-l-gallery pf-m-gutter">
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section
+      class="pf-c-page__main-section pf-m-limit-width pf-m-no-fill pf-m-light pf-m-shadow-top"
+    >
+      <div class="pf-c-page__main-body">
+        <p>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.</p>
+      </div>
+    </section>
+  </main>
+</div>
+
+```
+
+### Context selector in sidebar expanded
+
+```html isFullscreen
+<div class="pf-c-page" id="context-selector-in-sidebar-expanded">
+  <header class="pf-c-page__header">
+    <a
+      class="pf-c-skip-to-content pf-c-button pf-m-primary"
+      href="#main-content-context-selector-in-sidebar-expanded"
+    >Skip to content</a>
+
+    <header class="pf-c-masthead">
+      <span class="pf-c-masthead__toggle">
+        <button
+          class="pf-c-button pf-m-plain"
+          type="button"
+          aria-label="Global navigation"
+        >
+          <i class="fas fa-bars" aria-hidden="true"></i>
+        </button>
+      </span>
+      <div class="pf-c-masthead__main">
+        <a class="pf-c-masthead__brand" href="#">
+          <picture
+            class="pf-c-brand pf-m-picture"
+            style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
+          >
+            <source
+              media="(min-width: 768px)"
+              srcset="/assets/images/logo__pf--reverse-on-md.svg"
+            />
+            <source srcset="/assets/images/logo__pf--reverse--base.svg" />
+            <img
+              src="/assets/images/logo__pf--reverse--base.png"
+              alt="Fallback patternFly default logo"
+            />
+          </picture>
+        </a>
+      </div>
+      <div class="pf-c-masthead__content">
+        <div class="pf-c-toolbar pf-m-full-height pf-m-static" id="-toolbar">
+          <div class="pf-c-toolbar__content">
+            <div class="pf-c-toolbar__content-section">
+              <div
+                class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
+              >
+                <div class="pf-c-toolbar__item">
+                  <button
+                    class="pf-c-button pf-m-plain"
+                    type="button"
+                    aria-label="Notifications"
+                  >
+                    <span class="pf-c-notification-badge">
+                      <i class="pf-icon-attention-bell" aria-hidden="true"></i>
+                    </span>
+                  </button>
+                </div>
+                <div
+                  class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
+                >
+                  <div class="pf-c-toolbar__item">
+                    <nav
+                      class="pf-c-app-launcher"
+                      aria-label="Application launcher"
+                      id="-icon-group--app-launcher"
+                    >
+                      <button
+                        class="pf-c-app-launcher__toggle"
+                        type="button"
+                        id="-button"
+                        aria-expanded="false"
+                        aria-label="Application launcher"
+                      >
+                        <i class="fas fa-th" aria-hidden="true"></i>
+                      </button>
+                      <div
+                        class="pf-c-app-launcher__menu pf-m-align-right"
+                        hidden
+                      >
+                        <div class="pf-c-app-launcher__menu-search">
+                          <input
+                            class="pf-c-form-control"
+                            type="search"
+                            aria-label="Type to filter"
+                            placeholder="Filter by name..."
+                            id="-application-launcher-text-input"
+                            name="textInput1"
+                          />
+                        </div>
+                        <section class="pf-c-app-launcher__group">
+                          <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
+                          <ul>
+                            <li
+                              class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
+                            >
+                              <a class="pf-c-app-launcher__menu-item">
+                                Link 1
+                                <span
+                                  class="pf-c-app-launcher__menu-item-external-icon"
+                                >
+                                  <i
+                                    class="fas fa-external-link-alt"
+                                    aria-hidden="true"
+                                  ></i>
+                                </span>
+                                <span
+                                  class="pf-screen-reader"
+                                >(opens new window)</span>
+                              </a>
+                              <button
+                                class="pf-c-app-launcher__menu-item pf-m-action"
+                                type="button"
+                                aria-label="Favorite"
+                              >
+                                <i class="fas fa-star" aria-hidden="true"></i>
+                              </button>
+                            </li>
+                            <li
+                              class="pf-c-app-launcher__menu-wrapper pf-m-external"
+                            >
+                              <a class="pf-c-app-launcher__menu-item">
+                                Link 2
+                                <span
+                                  class="pf-c-app-launcher__menu-item-external-icon"
+                                >
+                                  <i
+                                    class="fas fa-external-link-alt"
+                                    aria-hidden="true"
+                                  ></i>
+                                </span>
+                                <span
+                                  class="pf-screen-reader"
+                                >(opens new window)</span>
+                              </a>
+                              <button
+                                class="pf-c-app-launcher__menu-item pf-m-action"
+                                type="button"
+                                aria-label="Favorite"
+                              >
+                                <i class="fas fa-star" aria-hidden="true"></i>
+                              </button>
+                            </li>
+                          </ul>
+                        </section>
+                        <hr class="pf-c-divider" />
+                        <section class="pf-c-app-launcher__group">
+                          <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
+                          <ul>
+                            <li
+                              class="pf-c-app-launcher__menu-wrapper pf-m-external"
+                            >
+                              <a class="pf-c-app-launcher__menu-item">
+                                Link 1
+                                <span
+                                  class="pf-c-app-launcher__menu-item-external-icon"
+                                >
+                                  <i
+                                    class="fas fa-external-link-alt"
+                                    aria-hidden="true"
+                                  ></i>
+                                </span>
+                                <span
+                                  class="pf-screen-reader"
+                                >(opens new window)</span>
+                              </a>
+                              <button
+                                class="pf-c-app-launcher__menu-item pf-m-action"
+                                type="button"
+                                aria-label="Favorite"
+                              >
+                                <i class="fas fa-star" aria-hidden="true"></i>
+                              </button>
+                            </li>
+                            <li
+                              class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
+                            >
+                              <a class="pf-c-app-launcher__menu-item">
+                                Link 2
+                                <span
+                                  class="pf-c-app-launcher__menu-item-external-icon"
+                                >
+                                  <i
+                                    class="fas fa-external-link-alt"
+                                    aria-hidden="true"
+                                  ></i>
+                                </span>
+                                <span
+                                  class="pf-screen-reader"
+                                >(opens new window)</span>
+                              </a>
+                              <button
+                                class="pf-c-app-launcher__menu-item pf-m-action"
+                                type="button"
+                                aria-label="Favorite"
+                              >
+                                <i class="fas fa-star" aria-hidden="true"></i>
+                              </button>
+                            </li>
+                          </ul>
+                        </section>
+                      </div>
+                    </nav>
+                  </div>
+                  <div class="pf-c-toolbar__item">
+                    <div class="pf-c-dropdown">
+                      <button
+                        class="pf-c-dropdown__toggle pf-m-plain"
+                        id="-settings-button"
+                        aria-expanded="false"
+                        type="button"
+                        aria-label="Settings"
+                      >
+                        <i class="fas fa-cog" aria-hidden="true"></i>
+                      </button>
+                      <ul
+                        class="pf-c-dropdown__menu pf-m-align-right"
+                        aria-labelledby="-settings-button"
+                        hidden
+                      >
+                        <li>
+                          <button
+                            class="pf-c-dropdown__menu-item"
+                            type="button"
+                          >Settings</button>
+                        </li>
+                        <li>
+                          <button
+                            class="pf-c-dropdown__menu-item"
+                            type="button"
+                          >Use the beta release</button>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                  <div class="pf-c-toolbar__item">
+                    <div class="pf-c-dropdown">
+                      <button
+                        class="pf-c-dropdown__toggle pf-m-plain"
+                        id="-help-button"
+                        aria-expanded="false"
+                        type="button"
+                        aria-label="Help"
+                      >
+                        <i class="fas fa-question-circle" aria-hidden="true"></i>
+                      </button>
+                      <ul
+                        class="pf-c-dropdown__menu pf-m-align-right"
+                        aria-labelledby="-help-button"
+                        hidden
+                      >
+                        <li>
+                          <button
+                            class="pf-c-dropdown__menu-item"
+                            type="button"
+                          >Support options</button>
+                        </li>
+                        <li>
+                          <button
+                            class="pf-c-dropdown__menu-item"
+                            type="button"
+                          >Open support case</button>
+                        </li>
+                        <li>
+                          <button
+                            class="pf-c-dropdown__menu-item"
+                            type="button"
+                          >API documentation</button>
+                        </li>
+                      </ul>
+                    </div>
+                  </div>
+                </div>
+                <div class="pf-c-toolbar__item pf-m-hidden-on-lg">
+                  <div class="pf-c-dropdown">
+                    <button
+                      class="pf-c-menu-toggle pf-m-plain"
+                      type="button"
+                      aria-expanded="false"
+                      aria-label="Actions"
+                    >
+                      <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+                    </button>
+                    <div
+                      class="pf-c-menu pf-m-drilldown pf-m-align-right"
+                      hidden
+                    >
+                      <div class="pf-c-menu__content">
+                        <section class="pf-c-menu__group pf-m-hidden-on-sm">
+                          <ul class="pf-c-menu__list">
+                            <li class="pf-c-menu__list-item pf-m-disabled">
+                              <button
+                                class="pf-c-menu__item"
+                                type="button"
+                                disabled
+                              >
+                                <span class="pf-c-menu__item-description">
+                                  <div class="pf-u-font-size-sm">Username:</div>
+                                  <div
+                                    class="pf-u-font-size-md"
+                                  >mshaksho@redhat.com</div>
+                                </span>
+                              </button>
+                            </li>
+                            <li class="pf-c-menu__list-item pf-m-disabled">
+                              <button
+                                class="pf-c-menu__item"
+                                type="button"
+                                disabled
+                              >
+                                <span class="pf-c-menu__item-description">
+                                  <div class="pf-u-font-size-sm">Account number:</div>
+                                  <div class="pf-u-font-size-md">123456789</div>
+                                </span>
+                              </button>
+                            </li>
+                            <li class="pf-c-divider" role="separator"></li>
+                            <li class="pf-c-menu__list-item">
+                              <button class="pf-c-menu__item" type="button">
+                                <span class="pf-c-menu__item-main">
+                                  <span class="pf-c-menu__item-text">My profile</span>
+                                </span>
+                              </button>
+                            </li>
+                            <li class="pf-c-menu__list-item">
+                              <button class="pf-c-menu__item" type="button">
+                                <span class="pf-c-menu__item-main">
+                                  <span
+                                    class="pf-c-menu__item-text"
+                                  >User management</span>
+                                </span>
+                              </button>
+                            </li>
+                            <li class="pf-c-menu__list-item">
+                              <button class="pf-c-menu__item" type="button">
+                                <span class="pf-c-menu__item-main">
+                                  <span class="pf-c-menu__item-text">Logout</span>
+                                </span>
+                              </button>
+                            </li>
+                          </ul>
+                        </section>
+                        <hr class="pf-c-divider pf-m-hidden-on-sm" />
+                        <section class="pf-c-menu__group">
+                          <ul class="pf-c-menu__list">
+                            <li class="pf-c-menu__list-item">
+                              <button
+                                class="pf-c-menu__item"
+                                type="button"
+                                aria-expanded="false"
+                              >
+                                <span class="pf-c-menu__item-main">
+                                  <span class="pf-c-menu__item-icon">
+                                    <i
+                                      class="fas fa-fw fa-cog"
+                                      aria-hidden="true"
+                                    ></i>
+                                  </span>
+                                  <span class="pf-c-menu__item-text">Settings</span>
+                                  <span class="pf-c-menu__item-toggle-icon">
+                                    <i class="fas fa-angle-right"></i>
+                                  </span>
+                                </span>
+                              </button>
+                              <div class="pf-c-menu" hidden>
+                                <div class="pf-c-menu__content">
+                                  <ul class="pf-c-menu__list">
+                                    <li
+                                      class="pf-c-menu__list-item pf-m-drill-up"
+                                    >
+                                      <button
+                                        class="pf-c-menu__item"
+                                        type="button"
+                                      >
+                                        <span class="pf-c-menu__item-main">
+                                          <span
+                                            class="pf-c-menu__item-toggle-icon"
+                                          >
+                                            <i class="fas fa-angle-left"></i>
+                                          </span>
+                                          <span class="pf-c-menu__item-icon">
+                                            <i
+                                              class="fas fa-fw fa-cog"
+                                              aria-hidden="true"
+                                            ></i>
+                                          </span>
+                                          <span
+                                            class="pf-c-menu__item-text"
+                                          >Settings</span>
+                                        </span>
+                                      </button>
+                                    </li>
+                                    <li class="pf-c-divider" role="separator"></li>
+                                    <li class="pf-c-menu__list-item">
+                                      <a class="pf-c-menu__item" href="#">
+                                        <span class="pf-c-menu__item-main">
+                                          <span
+                                            class="pf-c-menu__item-text"
+                                          >Customer support</span>
+                                        </span>
+                                      </a>
+                                    </li>
+                                    <li class="pf-c-menu__list-item">
+                                      <a class="pf-c-menu__item" href="#">
+                                        <span class="pf-c-menu__item-main">
+                                          <span
+                                            class="pf-c-menu__item-text"
+                                          >About</span>
+                                        </span>
+                                      </a>
+                                    </li>
+                                  </ul>
+                                </div>
+                              </div>
+                            </li>
+
+                            <li class="pf-c-menu__list-item">
+                              <button
+                                class="pf-c-menu__item"
+                                type="button"
+                                aria-expanded="false"
+                              >
+                                <span class="pf-c-menu__item-main">
+                                  <span class="pf-c-menu__item-icon">
+                                    <i
+                                      class="fas fa-fw fa-pf-icon pf-icon-help"
+                                      aria-hidden="true"
+                                    ></i>
+                                  </span>
+                                  <span class="pf-c-menu__item-text">Help</span>
+                                  <span class="pf-c-menu__item-toggle-icon">
+                                    <i class="fas fa-angle-right"></i>
+                                  </span>
+                                </span>
+                              </button>
+                              <div class="pf-c-menu" hidden>
+                                <div class="pf-c-menu__content">
+                                  <ul class="pf-c-menu__list">
+                                    <li
+                                      class="pf-c-menu__list-item pf-m-drill-up"
+                                    >
+                                      <button
+                                        class="pf-c-menu__item"
+                                        type="button"
+                                      >
+                                        <span class="pf-c-menu__item-main">
+                                          <span
+                                            class="pf-c-menu__item-toggle-icon"
+                                          >
+                                            <i class="fas fa-angle-left"></i>
+                                          </span>
+                                          <span class="pf-c-menu__item-icon">
+                                            <i
+                                              class="fas fa-fw fa-pf-icon pf-icon-help"
+                                              aria-hidden="true"
+                                            ></i>
+                                          </span>
+                                          <span
+                                            class="pf-c-menu__item-text"
+                                          >Help</span>
+                                        </span>
+                                      </button>
+                                    </li>
+                                    <li class="pf-c-divider" role="separator"></li>
+                                    <li class="pf-c-menu__list-item">
+                                      <a class="pf-c-menu__item" href="#">
+                                        <span class="pf-c-menu__item-main">
+                                          <span
+                                            class="pf-c-menu__item-text"
+                                          >Support options</span>
+                                        </span>
+                                      </a>
+                                    </li>
+                                    <li class="pf-c-menu__list-item">
+                                      <a class="pf-c-menu__item" href="#">
+                                        <span class="pf-c-menu__item-main">
+                                          <span
+                                            class="pf-c-menu__item-text"
+                                          >Open support case</span>
+                                        </span>
+                                      </a>
+                                    </li>
+                                    <li class="pf-c-menu__list-item">
+                                      <a class="pf-c-menu__item" href="#">
+                                        <span class="pf-c-menu__item-main">
+                                          <span
+                                            class="pf-c-menu__item-text"
+                                          >API documentation</span>
+                                        </span>
+                                      </a>
+                                    </li>
+                                  </ul>
+                                </div>
+                              </div>
+                            </li>
 
-### Context selector in sidebar expanded
+                            <li class="pf-c-menu__list-item">
+                              <button class="pf-c-menu__item" type="button">
+                                <span class="pf-c-menu__item-main">
+                                  <span class="pf-c-menu__item-icon">
+                                    <i
+                                      class="fas fa-fw fa-th"
+                                      aria-hidden="true"
+                                    ></i>
+                                  </span>
+                                  <span
+                                    class="pf-c-menu__item-text"
+                                  >Application launcher</span>
+                                  <span class="pf-c-menu__item-toggle-icon">
+                                    <i class="fas fa-angle-right"></i>
+                                  </span>
+                                </span>
+                              </button>
+                              <div class="pf-c-menu" hidden>
+                                <div class="pf-c-menu__header">
+                                  <button class="pf-c-menu__item" type="button">
+                                    <span class="pf-c-menu__item-main">
+                                      <span class="pf-c-menu__item-toggle-icon">
+                                        <i class="fas fa-angle-left"></i>
+                                      </span>
+                                      <span class="pf-c-menu__item-icon">
+                                        <i
+                                          class="fas fa-fw fa-th"
+                                          aria-hidden="true"
+                                        ></i>
+                                      </span>
+                                      <span
+                                        class="pf-c-menu__item-text"
+                                      >Application launcher</span>
+                                    </span>
+                                  </button>
+                                </div>
+                                <div class="pf-c-menu__search">
+                                  <div class="pf-c-menu__search-input">
+                                    <input
+                                      class="pf-c-form-control pf-m-search"
+                                      type="search"
+                                      id="-drilldown-menu-list-3-search-input"
+                                      name="-drilldown-menu-list-3-search-input"
+                                      aria-label="Search"
+                                    />
+                                  </div>
+                                </div>
+                                <hr class="pf-c-divider" />
+                                <section class="pf-c-menu__group">
+                                  <h1 class="pf-c-menu__group-title">Favorites</h1>
+                                  <ul class="pf-c-menu__list">
+                                    <li class="pf-c-menu__list-item">
+                                      <a class="pf-c-menu__item" href="#">
+                                        <span class="pf-c-menu__item-main">
+                                          <span
+                                            class="pf-c-menu__item-text"
+                                          >Link 1</span>
+                                        </span>
+                                      </a>
+                                      <button
+                                        class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
+                                        type="button"
+                                        aria-label="Starred"
+                                      >
+                                        <span
+                                          class="pf-c-menu__item-action-icon"
+                                        >
+                                          <i
+                                            class="fas fa-star"
+                                            aria-hidden="true"
+                                          ></i>
+                                        </span>
+                                      </button>
+                                    </li>
+                                    <li class="pf-c-menu__list-item">
+                                      <a
+                                        class="pf-c-menu__item"
+                                        href="#"
+                                        target="_blank"
+                                      >
+                                        <span class="pf-c-menu__item-main">
+                                          <span
+                                            class="pf-c-menu__item-text"
+                                          >Link 2</span>
+                                          <span
+                                            class="pf-c-menu__item-external-icon"
+                                          >
+                                            <i
+                                              class="fas fa-external-link-alt"
+                                              aria-hidden="true"
+                                            ></i>
+                                          </span>
+                                          <span
+                                            class="pf-screen-reader"
+                                          >(opens new window)</span>
+                                        </span>
+                                      </a>
+                                      <button
+                                        class="pf-c-menu__item-action pf-m-favorite"
+                                        type="button"
+                                        aria-label="Not starred"
+                                      >
+                                        <span
+                                          class="pf-c-menu__item-action-icon"
+                                        >
+                                          <i
+                                            class="fas fa-star"
+                                            aria-hidden="true"
+                                          ></i>
+                                        </span>
+                                      </button>
+                                    </li>
+                                  </ul>
+                                </section>
+                                <hr class="pf-c-divider" />
+                                <section class="pf-c-menu__group">
+                                  <h1 class="pf-c-menu__group-title">Group 1</h1>
+                                  <ul class="pf-c-menu__list">
+                                    <li class="pf-c-menu__list-item">
+                                      <a class="pf-c-menu__item" href="#">
+                                        <span class="pf-c-menu__item-main">
+                                          <span
+                                            class="pf-c-menu__item-text"
+                                          >Link 1</span>
+                                        </span>
+                                      </a>
+                                      <button
+                                        class="pf-c-menu__item-action pf-m-favorite"
+                                        type="button"
+                                        aria-label="Not starred"
+                                      >
+                                        <span
+                                          class="pf-c-menu__item-action-icon"
+                                        >
+                                          <i
+                                            class="fas fa-star"
+                                            aria-hidden="true"
+                                          ></i>
+                                        </span>
+                                      </button>
+                                    </li>
+                                    <li class="pf-c-menu__list-item">
+                                      <a
+                                        class="pf-c-menu__item"
+                                        href="#"
+                                        target="_blank"
+                                      >
+                                        <span class="pf-c-menu__item-main">
+                                          <span
+                                            class="pf-c-menu__item-text"
+                                          >Link 2</span>
+                                          <span
+                                            class="pf-c-menu__item-external-icon"
+                                          >
+                                            <i
+                                              class="fas fa-external-link-alt"
+                                              aria-hidden="true"
+                                            ></i>
+                                          </span>
+                                          <span
+                                            class="pf-screen-reader"
+                                          >(opens new window)</span>
+                                        </span>
+                                      </a>
+                                      <button
+                                        class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
+                                        type="button"
+                                        aria-label="Starred"
+                                      >
+                                        <span
+                                          class="pf-c-menu__item-action-icon"
+                                        >
+                                          <i
+                                            class="fas fa-star"
+                                            aria-hidden="true"
+                                          ></i>
+                                        </span>
+                                      </button>
+                                    </li>
+                                  </ul>
+                                </section>
+                              </div>
+                            </li>
+                          </ul>
+                        </section>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
+                <div
+                  class="pf-c-dropdown"
+                  style="--pf-c-dropdown--MaxWidth: 20ch;"
+                >
+                  <button
+                    class="pf-c-dropdown__toggle"
+                    id="-profile-button"
+                    aria-expanded="false"
+                    type="button"
+                  >
+                    <span class="pf-c-dropdown__toggle-image">
+                      <img
+                        class="pf-c-avatar"
+                        src="/assets/images/img_avatar.svg"
+                        alt="Avatar image"
+                      />
+                    </span>
+                    <span class="pf-c-dropdown__toggle-text">Ned Username</span>
+                    <span class="pf-c-dropdown__toggle-icon">
+                      <i class="fas fa-caret-down" aria-hidden="true"></i>
+                    </span>
+                  </button>
+                  <div class="pf-c-dropdown__menu" hidden>
+                    <section class="pf-c-dropdown__group">
+                      <div class="pf-c-dropdown__menu-item pf-m-text">
+                        <div class="pf-u-font-size-sm">Account number:</div>
+                        <div>123456789</div>
+                      </div>
+                      <div class="pf-c-dropdown__menu-item pf-m-text">
+                        <div class="pf-u-font-size-sm">Username:</div>
+                        <div>mshaksho@redhat.com</div>
+                      </div>
+                    </section>
+                    <hr class="pf-c-divider" />
+                    <section class="pf-c-dropdown__group">
+                      <ul>
+                        <li>
+                          <a
+                            class="pf-c-dropdown__menu-item"
+                            href="#"
+                          >My profile</a>
+                        </li>
+                        <li>
+                          <a
+                            class="pf-c-dropdown__menu-item"
+                            href="#"
+                          >User management</a>
+                        </li>
+                        <li>
+                          <a class="pf-c-dropdown__menu-item" href="#">Logout</a>
+                        </li>
+                      </ul>
+                    </section>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
+  </header>
+  <div class="pf-c-page__sidebar">
+    <div class="pf-c-page__sidebar-body pf-m-menu">
+      <div
+        class="pf-c-context-selector pf-m-expanded pf-m-page-insets pf-m-large"
+      >
+        <span
+          id="context-selector-collapsed-example-label"
+          hidden
+        >Selected project:</span>
+        <button
+          class="pf-c-context-selector__toggle"
+          aria-expanded="true"
+          id="context-selector-collapsed-example-toggle"
+          aria-labelledby="context-selector-collapsed-example-label context-selector-collapsed-example-toggle"
+        >
+          <span class="pf-c-context-selector__toggle-text">My project</span>
+          <span class="pf-c-context-selector__toggle-icon">
+            <i class="fas fa-caret-down" aria-hidden="true"></i>
+          </span>
+        </button>
+        <div class="pf-c-context-selector__menu">
+          <div class="pf-c-context-selector__menu-search">
+            <div class="pf-c-input-group">
+              <input
+                class="pf-c-form-control"
+                type="search"
+                placeholder="Search"
+                id="textInput1"
+                name="textInput1"
+                aria-labelledby="context-selector-collapsed-example-search-button"
+              />
+              <button
+                class="pf-c-button pf-m-control"
+                type="button"
+                id="context-selector-collapsed-example-search-button"
+                aria-label="Search menu items"
+              >
+                <i class="fas fa-search" aria-hidden="true"></i>
+              </button>
+            </div>
+          </div>
+          <ul class="pf-c-context-selector__menu-list">
+            <li>
+              <a class="pf-c-context-selector__menu-list-item" href="#">Link</a>
+            </li>
+            <li>
+              <button
+                class="pf-c-context-selector__menu-list-item"
+                type="button"
+              >Action</button>
+            </li>
+            <li>
+              <a
+                class="pf-c-context-selector__menu-list-item pf-m-disabled"
+                href="#"
+                aria-disabled="true"
+                tabindex="-1"
+              >Disabled link</a>
+            </li>
+            <li>
+              <button
+                class="pf-c-context-selector__menu-list-item"
+                type="button"
+                disabled
+              >Disabled action</button>
+            </li>
+            <li>
+              <button
+                class="pf-c-context-selector__menu-list-item"
+                type="button"
+              >My project</button>
+            </li>
+            <li>
+              <button
+                class="pf-c-context-selector__menu-list-item"
+                type="button"
+              >OpenShift cluster</button>
+            </li>
+            <li>
+              <button
+                class="pf-c-context-selector__menu-list-item"
+                type="button"
+              >Production Ansible</button>
+            </li>
+            <li>
+              <button
+                class="pf-c-context-selector__menu-list-item"
+                type="button"
+              >AWS</button>
+            </li>
+            <li>
+              <button
+                class="pf-c-context-selector__menu-list-item"
+                type="button"
+              >Azure</button>
+            </li>
+            <li>
+              <button
+                class="pf-c-context-selector__menu-list-item"
+                type="button"
+              >My project</button>
+            </li>
+            <li>
+              <button
+                class="pf-c-context-selector__menu-list-item"
+                type="button"
+              >OpenShift cluster</button>
+            </li>
+            <li>
+              <button
+                class="pf-c-context-selector__menu-list-item"
+                type="button"
+              >Production Ansible</button>
+            </li>
+            <li>
+              <button
+                class="pf-c-context-selector__menu-list-item"
+                type="button"
+              >AWS</button>
+            </li>
+            <li>
+              <button
+                class="pf-c-context-selector__menu-list-item"
+                type="button"
+              >Azure</button>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+    <div class="pf-c-page__sidebar-body">
+      <nav
+        class="pf-c-nav"
+        id="context-selector-in-sidebar-expanded-primary-nav"
+        aria-label="Global"
+      >
+        <ul class="pf-c-nav__list">
+          <li class="pf-c-nav__item">
+            <a href="#" class="pf-c-nav__link">System panel</a>
+          </li>
+          <li class="pf-c-nav__item">
+            <a
+              href="#"
+              class="pf-c-nav__link pf-m-current"
+              aria-current="page"
+            >Policy</a>
+          </li>
+          <li class="pf-c-nav__item">
+            <a href="#" class="pf-c-nav__link">Authentication</a>
+          </li>
+          <li class="pf-c-nav__item">
+            <a href="#" class="pf-c-nav__link">Network services</a>
+          </li>
+          <li class="pf-c-nav__item">
+            <a href="#" class="pf-c-nav__link">Server</a>
+          </li>
+        </ul>
+      </nav>
+    </div>
+  </div>
+  <main
+    class="pf-c-page__main"
+    tabindex="-1"
+    id="main-content-context-selector-in-sidebar-expanded"
+  >
+    <section
+      class="pf-c-page__main-section pf-m-limit-width pf-m-light pf-m-shadow-bottom"
+    >
+      <div class="pf-c-page__main-body">
+        <div class="pf-c-content">
+          <h1>Main title</h1>
+          <p>This is a full page demo.</p>
+        </div>
+      </div>
+    </section>
+    <section
+      class="pf-c-page__main-section pf-m-limit-width pf-m-overflow-scroll"
+    >
+      <div class="pf-c-page__main-body">
+        <div class="pf-l-gallery pf-m-gutter">
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+          <div class="pf-l-gallery__item">
+            <div class="pf-c-card">
+              <div class="pf-c-card__body">This is a card</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <section
+      class="pf-c-page__main-section pf-m-limit-width pf-m-no-fill pf-m-light pf-m-shadow-top"
+    >
+      <div class="pf-c-page__main-body">
+        <p>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.</p>
+      </div>
+    </section>
+  </main>
+</div>
 
-```hbs isFullscreen
-{{> page-demo-masthead-component page-demo-default--id="context-selector-in-sidebar-expanded" page-demo-masthead-component--HasMenu="true" page-demo-masthead-component--MenuIsExpanded="true"}}
 ```
 
 ### Context selector in page content
 
 ```html isFullscreen
-<div class="pf-c-page" id="context-selector-in-page-content">
+<div class="pf-c-page" id="context-selector-in-page-content-demo">
   <a
     class="pf-c-skip-to-content pf-c-button pf-m-primary"
-    href="#main-content-context-selector-in-page-content"
+    href="#main-content-context-selector-in-page-content-demo"
   >Skip to content</a>
-  <header class="pf-c-page__header">
-    <div class="pf-c-page__header-brand">
-      <div class="pf-c-page__header-brand-toggle">
-        <button
-          class="pf-c-button pf-m-plain"
-          type="button"
-          id="context-selector-in-page-content-nav-toggle"
-          aria-label="Global navigation"
-          aria-expanded="true"
-          aria-controls="context-selector-in-page-content-primary-nav"
+
+  <header
+    class="pf-c-masthead"
+    id="context-selector-in-page-content-demo-masthead"
+  >
+    <span class="pf-c-masthead__toggle">
+      <button
+        class="pf-c-button pf-m-plain"
+        type="button"
+        aria-label="Global navigation"
+      >
+        <i class="fas fa-bars" aria-hidden="true"></i>
+      </button>
+    </span>
+    <div class="pf-c-masthead__main">
+      <a class="pf-c-masthead__brand" href="#">
+        <picture
+          class="pf-c-brand pf-m-picture"
+          style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
         >
-          <i class="fas fa-bars" aria-hidden="true"></i>
-        </button>
-      </div>
-      <a href="#" class="pf-c-page__header-brand-link">
-        <img
-          class="pf-c-brand"
-          src="/assets/images/PF-Masthead-Logo.svg"
-          alt="PatternFly logo"
-        />
+          <source
+            media="(min-width: 768px)"
+            srcset="/assets/images/logo__pf--reverse-on-md.svg"
+          />
+          <source srcset="/assets/images/logo__pf--reverse--base.svg" />
+          <img
+            src="/assets/images/logo__pf--reverse--base.png"
+            alt="Fallback patternFly default logo"
+          />
+        </picture>
       </a>
     </div>
-    <div class="pf-c-page__header-tools">
-      <div class="pf-c-page__header-tools-group">
-        <div
-          class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
-        >
-          <button
-            class="pf-c-button pf-m-plain"
-            type="button"
-            aria-label="Settings"
-          >
-            <i class="fas fa-cog" aria-hidden="true"></i>
-          </button>
-        </div>
-        <div
-          class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
-        >
-          <button
-            class="pf-c-button pf-m-plain"
-            type="button"
-            aria-label="Help"
-          >
-            <i class="fas fa-question-circle" aria-hidden="true"></i>
-          </button>
-        </div>
-      </div>
-      <div class="pf-c-page__header-tools-group">
-        <div class="pf-c-page__header-tools-item pf-m-hidden-on-lg">
-          <div class="pf-c-dropdown">
-            <button
-              class="pf-c-dropdown__toggle pf-m-plain"
-              id="context-selector-in-page-content-dropdown-kebab-1-button"
-              aria-expanded="false"
-              type="button"
-              aria-label="Actions"
-            >
-              <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
-            </button>
-            <ul
-              class="pf-c-dropdown__menu pf-m-align-right"
-              aria-labelledby="context-selector-in-page-content-dropdown-kebab-1-button"
-              hidden
+    <div class="pf-c-masthead__content">
+      <div
+        class="pf-c-toolbar pf-m-full-height pf-m-static"
+        id="context-selector-in-page-content-demo-masthead-toolbar"
+      >
+        <div class="pf-c-toolbar__content">
+          <div class="pf-c-toolbar__content-section">
+            <div
+              class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
             >
-              <li>
-                <a class="pf-c-dropdown__menu-item" href="#">Link</a>
-              </li>
-              <li>
-                <button class="pf-c-dropdown__menu-item" type="button">Action</button>
-              </li>
-              <li>
-                <a
-                  class="pf-c-dropdown__menu-item pf-m-disabled"
-                  href="#"
-                  aria-disabled="true"
-                  tabindex="-1"
-                >Disabled link</a>
-              </li>
-              <li>
+              <div class="pf-c-toolbar__item">
                 <button
-                  class="pf-c-dropdown__menu-item"
+                  class="pf-c-button pf-m-plain"
                   type="button"
-                  disabled
-                >Disabled action</button>
-              </li>
-              <li class="pf-c-divider" role="separator"></li>
-              <li>
-                <a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
-              </li>
-            </ul>
-          </div>
-        </div>
-        <div
-          class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-md"
-        >
-          <div class="pf-c-dropdown">
-            <button
-              class="pf-c-dropdown__toggle pf-m-plain"
-              id="context-selector-in-page-content-dropdown-kebab-2-button"
-              aria-expanded="false"
-              type="button"
-            >
-              <span class="pf-c-dropdown__toggle-text">John Smith</span>
-              <span class="pf-c-dropdown__toggle-icon">
-                <i class="fas fa-caret-down" aria-hidden="true"></i>
-              </span>
-            </button>
-            <ul
-              class="pf-c-dropdown__menu"
-              aria-labelledby="context-selector-in-page-content-dropdown-kebab-2-button"
-              hidden
-            >
-              <li>
-                <a class="pf-c-dropdown__menu-item" href="#">Link</a>
-              </li>
-              <li>
-                <button class="pf-c-dropdown__menu-item" type="button">Action</button>
-              </li>
-              <li>
-                <a
-                  class="pf-c-dropdown__menu-item pf-m-disabled"
-                  href="#"
-                  aria-disabled="true"
-                  tabindex="-1"
-                >Disabled link</a>
-              </li>
-              <li>
+                  aria-label="Notifications"
+                >
+                  <span class="pf-c-notification-badge">
+                    <i class="pf-icon-attention-bell" aria-hidden="true"></i>
+                  </span>
+                </button>
+              </div>
+              <div
+                class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
+              >
+                <div class="pf-c-toolbar__item">
+                  <nav
+                    class="pf-c-app-launcher"
+                    aria-label="Application launcher"
+                    id="context-selector-in-page-content-demo-masthead-icon-group--app-launcher"
+                  >
+                    <button
+                      class="pf-c-app-launcher__toggle"
+                      type="button"
+                      id="-button"
+                      aria-expanded="false"
+                      aria-label="Application launcher"
+                    >
+                      <i class="fas fa-th" aria-hidden="true"></i>
+                    </button>
+                    <div
+                      class="pf-c-app-launcher__menu pf-m-align-right"
+                      hidden
+                    >
+                      <div class="pf-c-app-launcher__menu-search">
+                        <input
+                          class="pf-c-form-control"
+                          type="search"
+                          aria-label="Type to filter"
+                          placeholder="Filter by name..."
+                          id="context-selector-in-page-content-demo-masthead-application-launcher-text-input"
+                          name="textInput1"
+                        />
+                      </div>
+                      <section class="pf-c-app-launcher__group">
+                        <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
+                        <ul>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 1
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 2
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                        </ul>
+                      </section>
+                      <hr class="pf-c-divider" />
+                      <section class="pf-c-app-launcher__group">
+                        <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
+                        <ul>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 1
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                          <li
+                            class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
+                          >
+                            <a class="pf-c-app-launcher__menu-item">
+                              Link 2
+                              <span
+                                class="pf-c-app-launcher__menu-item-external-icon"
+                              >
+                                <i
+                                  class="fas fa-external-link-alt"
+                                  aria-hidden="true"
+                                ></i>
+                              </span>
+                              <span class="pf-screen-reader">(opens new window)</span>
+                            </a>
+                            <button
+                              class="pf-c-app-launcher__menu-item pf-m-action"
+                              type="button"
+                              aria-label="Favorite"
+                            >
+                              <i class="fas fa-star" aria-hidden="true"></i>
+                            </button>
+                          </li>
+                        </ul>
+                      </section>
+                    </div>
+                  </nav>
+                </div>
+                <div class="pf-c-toolbar__item">
+                  <div class="pf-c-dropdown">
+                    <button
+                      class="pf-c-dropdown__toggle pf-m-plain"
+                      id="context-selector-in-page-content-demo-masthead-settings-button"
+                      aria-expanded="false"
+                      type="button"
+                      aria-label="Settings"
+                    >
+                      <i class="fas fa-cog" aria-hidden="true"></i>
+                    </button>
+                    <ul
+                      class="pf-c-dropdown__menu pf-m-align-right"
+                      aria-labelledby="context-selector-in-page-content-demo-masthead-settings-button"
+                      hidden
+                    >
+                      <li>
+                        <button
+                          class="pf-c-dropdown__menu-item"
+                          type="button"
+                        >Settings</button>
+                      </li>
+                      <li>
+                        <button
+                          class="pf-c-dropdown__menu-item"
+                          type="button"
+                        >Use the beta release</button>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+                <div class="pf-c-toolbar__item">
+                  <div class="pf-c-dropdown">
+                    <button
+                      class="pf-c-dropdown__toggle pf-m-plain"
+                      id="context-selector-in-page-content-demo-masthead-help-button"
+                      aria-expanded="false"
+                      type="button"
+                      aria-label="Help"
+                    >
+                      <i class="fas fa-question-circle" aria-hidden="true"></i>
+                    </button>
+                    <ul
+                      class="pf-c-dropdown__menu pf-m-align-right"
+                      aria-labelledby="context-selector-in-page-content-demo-masthead-help-button"
+                      hidden
+                    >
+                      <li>
+                        <button
+                          class="pf-c-dropdown__menu-item"
+                          type="button"
+                        >Support options</button>
+                      </li>
+                      <li>
+                        <button
+                          class="pf-c-dropdown__menu-item"
+                          type="button"
+                        >Open support case</button>
+                      </li>
+                      <li>
+                        <button
+                          class="pf-c-dropdown__menu-item"
+                          type="button"
+                        >API documentation</button>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+              </div>
+              <div class="pf-c-toolbar__item pf-m-hidden-on-lg">
+                <div class="pf-c-dropdown">
+                  <button
+                    class="pf-c-menu-toggle pf-m-plain"
+                    type="button"
+                    aria-expanded="false"
+                    aria-label="Actions"
+                  >
+                    <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+                  </button>
+                  <div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
+                    <div class="pf-c-menu__content">
+                      <section class="pf-c-menu__group pf-m-hidden-on-sm">
+                        <ul class="pf-c-menu__list">
+                          <li class="pf-c-menu__list-item pf-m-disabled">
+                            <button
+                              class="pf-c-menu__item"
+                              type="button"
+                              disabled
+                            >
+                              <span class="pf-c-menu__item-description">
+                                <div class="pf-u-font-size-sm">Username:</div>
+                                <div
+                                  class="pf-u-font-size-md"
+                                >mshaksho@redhat.com</div>
+                              </span>
+                            </button>
+                          </li>
+                          <li class="pf-c-menu__list-item pf-m-disabled">
+                            <button
+                              class="pf-c-menu__item"
+                              type="button"
+                              disabled
+                            >
+                              <span class="pf-c-menu__item-description">
+                                <div class="pf-u-font-size-sm">Account number:</div>
+                                <div class="pf-u-font-size-md">123456789</div>
+                              </span>
+                            </button>
+                          </li>
+                          <li class="pf-c-divider" role="separator"></li>
+                          <li class="pf-c-menu__list-item">
+                            <button class="pf-c-menu__item" type="button">
+                              <span class="pf-c-menu__item-main">
+                                <span class="pf-c-menu__item-text">My profile</span>
+                              </span>
+                            </button>
+                          </li>
+                          <li class="pf-c-menu__list-item">
+                            <button class="pf-c-menu__item" type="button">
+                              <span class="pf-c-menu__item-main">
+                                <span
+                                  class="pf-c-menu__item-text"
+                                >User management</span>
+                              </span>
+                            </button>
+                          </li>
+                          <li class="pf-c-menu__list-item">
+                            <button class="pf-c-menu__item" type="button">
+                              <span class="pf-c-menu__item-main">
+                                <span class="pf-c-menu__item-text">Logout</span>
+                              </span>
+                            </button>
+                          </li>
+                        </ul>
+                      </section>
+                      <hr class="pf-c-divider pf-m-hidden-on-sm" />
+                      <section class="pf-c-menu__group">
+                        <ul class="pf-c-menu__list">
+                          <li class="pf-c-menu__list-item">
+                            <button
+                              class="pf-c-menu__item"
+                              type="button"
+                              aria-expanded="false"
+                            >
+                              <span class="pf-c-menu__item-main">
+                                <span class="pf-c-menu__item-icon">
+                                  <i
+                                    class="fas fa-fw fa-cog"
+                                    aria-hidden="true"
+                                  ></i>
+                                </span>
+                                <span class="pf-c-menu__item-text">Settings</span>
+                                <span class="pf-c-menu__item-toggle-icon">
+                                  <i class="fas fa-angle-right"></i>
+                                </span>
+                              </span>
+                            </button>
+                            <div class="pf-c-menu" hidden>
+                              <div class="pf-c-menu__content">
+                                <ul class="pf-c-menu__list">
+                                  <li
+                                    class="pf-c-menu__list-item pf-m-drill-up"
+                                  >
+                                    <button
+                                      class="pf-c-menu__item"
+                                      type="button"
+                                    >
+                                      <span class="pf-c-menu__item-main">
+                                        <span
+                                          class="pf-c-menu__item-toggle-icon"
+                                        >
+                                          <i class="fas fa-angle-left"></i>
+                                        </span>
+                                        <span class="pf-c-menu__item-icon">
+                                          <i
+                                            class="fas fa-fw fa-cog"
+                                            aria-hidden="true"
+                                          ></i>
+                                        </span>
+                                        <span
+                                          class="pf-c-menu__item-text"
+                                        >Settings</span>
+                                      </span>
+                                    </button>
+                                  </li>
+                                  <li class="pf-c-divider" role="separator"></li>
+                                  <li class="pf-c-menu__list-item">
+                                    <a class="pf-c-menu__item" href="#">
+                                      <span class="pf-c-menu__item-main">
+                                        <span
+                                          class="pf-c-menu__item-text"
+                                        >Customer support</span>
+                                      </span>
+                                    </a>
+                                  </li>
+                                  <li class="pf-c-menu__list-item">
+                                    <a class="pf-c-menu__item" href="#">
+                                      <span class="pf-c-menu__item-main">
+                                        <span class="pf-c-menu__item-text">About</span>
+                                      </span>
+                                    </a>
+                                  </li>
+                                </ul>
+                              </div>
+                            </div>
+                          </li>
+
+                          <li class="pf-c-menu__list-item">
+                            <button
+                              class="pf-c-menu__item"
+                              type="button"
+                              aria-expanded="false"
+                            >
+                              <span class="pf-c-menu__item-main">
+                                <span class="pf-c-menu__item-icon">
+                                  <i
+                                    class="fas fa-fw fa-pf-icon pf-icon-help"
+                                    aria-hidden="true"
+                                  ></i>
+                                </span>
+                                <span class="pf-c-menu__item-text">Help</span>
+                                <span class="pf-c-menu__item-toggle-icon">
+                                  <i class="fas fa-angle-right"></i>
+                                </span>
+                              </span>
+                            </button>
+                            <div class="pf-c-menu" hidden>
+                              <div class="pf-c-menu__content">
+                                <ul class="pf-c-menu__list">
+                                  <li
+                                    class="pf-c-menu__list-item pf-m-drill-up"
+                                  >
+                                    <button
+                                      class="pf-c-menu__item"
+                                      type="button"
+                                    >
+                                      <span class="pf-c-menu__item-main">
+                                        <span
+                                          class="pf-c-menu__item-toggle-icon"
+                                        >
+                                          <i class="fas fa-angle-left"></i>
+                                        </span>
+                                        <span class="pf-c-menu__item-icon">
+                                          <i
+                                            class="fas fa-fw fa-pf-icon pf-icon-help"
+                                            aria-hidden="true"
+                                          ></i>
+                                        </span>
+                                        <span class="pf-c-menu__item-text">Help</span>
+                                      </span>
+                                    </button>
+                                  </li>
+                                  <li class="pf-c-divider" role="separator"></li>
+                                  <li class="pf-c-menu__list-item">
+                                    <a class="pf-c-menu__item" href="#">
+                                      <span class="pf-c-menu__item-main">
+                                        <span
+                                          class="pf-c-menu__item-text"
+                                        >Support options</span>
+                                      </span>
+                                    </a>
+                                  </li>
+                                  <li class="pf-c-menu__list-item">
+                                    <a class="pf-c-menu__item" href="#">
+                                      <span class="pf-c-menu__item-main">
+                                        <span
+                                          class="pf-c-menu__item-text"
+                                        >Open support case</span>
+                                      </span>
+                                    </a>
+                                  </li>
+                                  <li class="pf-c-menu__list-item">
+                                    <a class="pf-c-menu__item" href="#">
+                                      <span class="pf-c-menu__item-main">
+                                        <span
+                                          class="pf-c-menu__item-text"
+                                        >API documentation</span>
+                                      </span>
+                                    </a>
+                                  </li>
+                                </ul>
+                              </div>
+                            </div>
+                          </li>
+
+                          <li class="pf-c-menu__list-item">
+                            <button class="pf-c-menu__item" type="button">
+                              <span class="pf-c-menu__item-main">
+                                <span class="pf-c-menu__item-icon">
+                                  <i class="fas fa-fw fa-th" aria-hidden="true"></i>
+                                </span>
+                                <span
+                                  class="pf-c-menu__item-text"
+                                >Application launcher</span>
+                                <span class="pf-c-menu__item-toggle-icon">
+                                  <i class="fas fa-angle-right"></i>
+                                </span>
+                              </span>
+                            </button>
+                            <div class="pf-c-menu" hidden>
+                              <div class="pf-c-menu__header">
+                                <button class="pf-c-menu__item" type="button">
+                                  <span class="pf-c-menu__item-main">
+                                    <span class="pf-c-menu__item-toggle-icon">
+                                      <i class="fas fa-angle-left"></i>
+                                    </span>
+                                    <span class="pf-c-menu__item-icon">
+                                      <i
+                                        class="fas fa-fw fa-th"
+                                        aria-hidden="true"
+                                      ></i>
+                                    </span>
+                                    <span
+                                      class="pf-c-menu__item-text"
+                                    >Application launcher</span>
+                                  </span>
+                                </button>
+                              </div>
+                              <div class="pf-c-menu__search">
+                                <div class="pf-c-menu__search-input">
+                                  <input
+                                    class="pf-c-form-control pf-m-search"
+                                    type="search"
+                                    id="context-selector-in-page-content-demo-masthead-drilldown-menu-list-3-search-input"
+                                    name="context-selector-in-page-content-demo-masthead-drilldown-menu-list-3-search-input"
+                                    aria-label="Search"
+                                  />
+                                </div>
+                              </div>
+                              <hr class="pf-c-divider" />
+                              <section class="pf-c-menu__group">
+                                <h1 class="pf-c-menu__group-title">Favorites</h1>
+                                <ul class="pf-c-menu__list">
+                                  <li class="pf-c-menu__list-item">
+                                    <a class="pf-c-menu__item" href="#">
+                                      <span class="pf-c-menu__item-main">
+                                        <span
+                                          class="pf-c-menu__item-text"
+                                        >Link 1</span>
+                                      </span>
+                                    </a>
+                                    <button
+                                      class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
+                                      type="button"
+                                      aria-label="Starred"
+                                    >
+                                      <span class="pf-c-menu__item-action-icon">
+                                        <i
+                                          class="fas fa-star"
+                                          aria-hidden="true"
+                                        ></i>
+                                      </span>
+                                    </button>
+                                  </li>
+                                  <li class="pf-c-menu__list-item">
+                                    <a
+                                      class="pf-c-menu__item"
+                                      href="#"
+                                      target="_blank"
+                                    >
+                                      <span class="pf-c-menu__item-main">
+                                        <span
+                                          class="pf-c-menu__item-text"
+                                        >Link 2</span>
+                                        <span
+                                          class="pf-c-menu__item-external-icon"
+                                        >
+                                          <i
+                                            class="fas fa-external-link-alt"
+                                            aria-hidden="true"
+                                          ></i>
+                                        </span>
+                                        <span
+                                          class="pf-screen-reader"
+                                        >(opens new window)</span>
+                                      </span>
+                                    </a>
+                                    <button
+                                      class="pf-c-menu__item-action pf-m-favorite"
+                                      type="button"
+                                      aria-label="Not starred"
+                                    >
+                                      <span class="pf-c-menu__item-action-icon">
+                                        <i
+                                          class="fas fa-star"
+                                          aria-hidden="true"
+                                        ></i>
+                                      </span>
+                                    </button>
+                                  </li>
+                                </ul>
+                              </section>
+                              <hr class="pf-c-divider" />
+                              <section class="pf-c-menu__group">
+                                <h1 class="pf-c-menu__group-title">Group 1</h1>
+                                <ul class="pf-c-menu__list">
+                                  <li class="pf-c-menu__list-item">
+                                    <a class="pf-c-menu__item" href="#">
+                                      <span class="pf-c-menu__item-main">
+                                        <span
+                                          class="pf-c-menu__item-text"
+                                        >Link 1</span>
+                                      </span>
+                                    </a>
+                                    <button
+                                      class="pf-c-menu__item-action pf-m-favorite"
+                                      type="button"
+                                      aria-label="Not starred"
+                                    >
+                                      <span class="pf-c-menu__item-action-icon">
+                                        <i
+                                          class="fas fa-star"
+                                          aria-hidden="true"
+                                        ></i>
+                                      </span>
+                                    </button>
+                                  </li>
+                                  <li class="pf-c-menu__list-item">
+                                    <a
+                                      class="pf-c-menu__item"
+                                      href="#"
+                                      target="_blank"
+                                    >
+                                      <span class="pf-c-menu__item-main">
+                                        <span
+                                          class="pf-c-menu__item-text"
+                                        >Link 2</span>
+                                        <span
+                                          class="pf-c-menu__item-external-icon"
+                                        >
+                                          <i
+                                            class="fas fa-external-link-alt"
+                                            aria-hidden="true"
+                                          ></i>
+                                        </span>
+                                        <span
+                                          class="pf-screen-reader"
+                                        >(opens new window)</span>
+                                      </span>
+                                    </a>
+                                    <button
+                                      class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
+                                      type="button"
+                                      aria-label="Starred"
+                                    >
+                                      <span class="pf-c-menu__item-action-icon">
+                                        <i
+                                          class="fas fa-star"
+                                          aria-hidden="true"
+                                        ></i>
+                                      </span>
+                                    </button>
+                                  </li>
+                                </ul>
+                              </section>
+                            </div>
+                          </li>
+                        </ul>
+                      </section>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
+              <div
+                class="pf-c-dropdown"
+                style="--pf-c-dropdown--MaxWidth: 20ch;"
+              >
                 <button
-                  class="pf-c-dropdown__menu-item"
+                  class="pf-c-dropdown__toggle"
+                  id="context-selector-in-page-content-demo-masthead-profile-button"
+                  aria-expanded="false"
                   type="button"
-                  disabled
-                >Disabled action</button>
-              </li>
-              <li class="pf-c-divider" role="separator"></li>
-              <li>
-                <a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
-              </li>
-            </ul>
+                >
+                  <span class="pf-c-dropdown__toggle-image">
+                    <img
+                      class="pf-c-avatar"
+                      src="/assets/images/img_avatar.svg"
+                      alt="Avatar image"
+                    />
+                  </span>
+                  <span class="pf-c-dropdown__toggle-text">Ned Username</span>
+                  <span class="pf-c-dropdown__toggle-icon">
+                    <i class="fas fa-caret-down" aria-hidden="true"></i>
+                  </span>
+                </button>
+                <div class="pf-c-dropdown__menu" hidden>
+                  <section class="pf-c-dropdown__group">
+                    <div class="pf-c-dropdown__menu-item pf-m-text">
+                      <div class="pf-u-font-size-sm">Account number:</div>
+                      <div>123456789</div>
+                    </div>
+                    <div class="pf-c-dropdown__menu-item pf-m-text">
+                      <div class="pf-u-font-size-sm">Username:</div>
+                      <div>mshaksho@redhat.com</div>
+                    </div>
+                  </section>
+                  <hr class="pf-c-divider" />
+                  <section class="pf-c-dropdown__group">
+                    <ul>
+                      <li>
+                        <a class="pf-c-dropdown__menu-item" href="#">My profile</a>
+                      </li>
+                      <li>
+                        <a
+                          class="pf-c-dropdown__menu-item"
+                          href="#"
+                        >User management</a>
+                      </li>
+                      <li>
+                        <a class="pf-c-dropdown__menu-item" href="#">Logout</a>
+                      </li>
+                    </ul>
+                  </section>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>
-      <img
-        class="pf-c-avatar"
-        src="/assets/images/img_avatar.svg"
-        alt="Avatar image"
-      />
     </div>
   </header>
   <div class="pf-c-page__sidebar">
     <div class="pf-c-page__sidebar-body">
       <nav
         class="pf-c-nav"
-        id="context-selector-in-page-content-primary-nav"
+        id="context-selector-in-page-content-demo-primary-nav"
         aria-label="Global"
       >
         <ul class="pf-c-nav__list">
@@ -235,9 +3063,11 @@ section: components
   <main
     class="pf-c-page__main"
     tabindex="-1"
-    id="main-content-context-selector-in-page-content"
+    id="main-content-context-selector-in-page-content-demo"
   >
-    <section class="pf-c-page__main-section pf-m-limit-width pf-m-no-padding">
+    <section
+      class="pf-c-page__main-section pf-m-limit-width pf-m-light pf-m-no-padding"
+    >
       <div class="pf-c-page__main-body">
         <div class="pf-c-toolbar pf-m-inset-none" id="toolbar-simple-example">
           <div class="pf-c-toolbar__content">
@@ -247,15 +3077,12 @@ section: components
                   class="pf-c-context-selector pf-m-page-insets pf-m-width-auto"
                   style="--pf-c-context-selector--Width: 270px;"
                 >
-                  <span
-                    id="context-selector-in-page-content-context-selector-label"
-                    hidden
-                  >Selected project:</span>
+                  <span id="-context-selector-label" hidden>Selected project:</span>
                   <button
                     class="pf-c-context-selector__toggle pf-m-text pf-m-plain"
                     aria-expanded="false"
-                    id="context-selector-in-page-content-context-selector-toggle"
-                    aria-labelledby="context-selector-in-page-content-context-selector-label context-selector-in-page-content-context-selector-toggle"
+                    id="-context-selector-toggle"
+                    aria-labelledby="-context-selector-label -context-selector-toggle"
                   >
                     <span
                       class="pf-c-context-selector__toggle-text"
@@ -273,12 +3100,12 @@ section: components
                           placeholder="Search"
                           id="textInput1"
                           name="textInput1"
-                          aria-labelledby="context-selector-in-page-content-context-selector-search-button"
+                          aria-labelledby="-context-selector-search-button"
                         />
                         <button
                           class="pf-c-button pf-m-control"
                           type="button"
-                          id="context-selector-in-page-content-context-selector-search-button"
+                          id="-context-selector-search-button"
                           aria-label="Search menu items"
                         >
                           <i class="fas fa-search" aria-hidden="true"></i>
@@ -379,18 +3206,15 @@ section: components
               </div>
               <div class="pf-c-toolbar__item">
                 <div class="pf-c-select">
-                  <span
-                    id="context-selector-in-page-content-select-label"
-                    hidden
-                  >Choose one</span>
+                  <span id="-select-label" hidden>Choose one</span>
 
                   <button
                     class="pf-c-select__toggle pf-m-plain"
                     type="button"
-                    id="context-selector-in-page-content-select-toggle"
+                    id="-select-toggle"
                     aria-haspopup="true"
                     aria-expanded="false"
-                    aria-labelledby="context-selector-in-page-content-select-label context-selector-in-page-content-select-toggle"
+                    aria-labelledby="-select-label -select-toggle"
                   >
                     <div class="pf-c-select__toggle-wrapper">
                       <span class="pf-c-select__toggle-text">All applications</span>
@@ -403,7 +3227,7 @@ section: components
                   <ul
                     class="pf-c-select__menu"
                     role="listbox"
-                    aria-labelledby="context-selector-in-page-content-select-label"
+                    aria-labelledby="-select-label"
                     hidden
                   >
                     <li role="presentation">