@patternfly/patternfly
Version:
Assets, source, tooling, and content for PatternFly 4
1,361 lines (1,336 loc) • 51.5 kB
Markdown
---
id: 'Context selector'
section: components
subsection: menus
deprecated: true
---## Examples
### Context selector in masthead
```html isFullscreen
<div class="pf-v5-c-page" id="context-selector-in-masthead">
<div class="pf-v5-c-skip-to-content">
<a
class="pf-v5-c-button pf-m-primary"
href="#main-content-context-selector-in-masthead"
>Skip to content</a>
</div>
<header class="pf-v5-c-masthead" id="context-selector-in-masthead-masthead">
<span class="pf-v5-c-masthead__toggle">
<button
class="pf-v5-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-v5-c-masthead__main">
<a class="pf-v5-c-masthead__brand" href="#">
<img
class="pf-v5-c-brand"
src="/assets/images/pf-logo.svg"
alt="PatternFly logo"
style="--pf-v5-c-brand--Height:36px"
/>
</a>
</div>
<div class="pf-v5-c-masthead__content">
<div
class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
id="context-selector-in-masthead-masthead-toolbar"
>
<div class="pf-v5-c-toolbar__content">
<div class="pf-v5-c-toolbar__content-section">
<div class="pf-v5-c-toolbar__item">
<button
class="pf-v5-c-menu-toggle pf-m-full-height"
type="button"
aria-expanded="false"
>
<span class="pf-v5-c-menu-toggle__text">Context selector</span>
<span class="pf-v5-c-menu-toggle__controls">
<span class="pf-v5-c-menu-toggle__toggle-icon">
<i class="fas fa-caret-down" aria-hidden="true"></i>
</span>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="pf-v5-c-page__sidebar">
<div class="pf-v5-c-page__sidebar-body">
<nav
class="pf-v5-c-nav"
id="context-selector-in-masthead-primary-nav"
aria-label="Global"
>
<ul class="pf-v5-c-nav__list" role="list">
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">System panel</a>
</li>
<li class="pf-v5-c-nav__item">
<a
href="#"
class="pf-v5-c-nav__link pf-m-current"
aria-current="page"
>Policy</a>
</li>
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Authentication</a>
</li>
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Network services</a>
</li>
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Server</a>
</li>
</ul>
</nav>
</div>
</div>
<main
class="pf-v5-c-page__main"
tabindex="-1"
id="main-content-context-selector-in-masthead"
>
<section class="pf-v5-c-page__main-breadcrumb pf-m-limit-width">
<div class="pf-v5-c-page__main-body">
<nav class="pf-v5-c-breadcrumb" aria-label="breadcrumb">
<ol class="pf-v5-c-breadcrumb__list" role="list">
<li class="pf-v5-c-breadcrumb__item">
<a href="#" class="pf-v5-c-breadcrumb__link">Section home</a>
</li>
<li class="pf-v5-c-breadcrumb__item">
<span class="pf-v5-c-breadcrumb__item-divider">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
</li>
<li class="pf-v5-c-breadcrumb__item">
<span class="pf-v5-c-breadcrumb__item-divider">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
</li>
<li class="pf-v5-c-breadcrumb__item">
<span class="pf-v5-c-breadcrumb__item-divider">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<a
href="#"
class="pf-v5-c-breadcrumb__link pf-m-current"
aria-current="page"
>Section landing</a>
</li>
</ol>
</nav>
</div>
</section>
<section class="pf-v5-c-page__main-section pf-m-limit-width pf-m-light">
<div class="pf-v5-c-page__main-body">
<div class="pf-v5-c-content">
<h1>Main title</h1>
<p>This is a full page demo.</p>
</div>
</div>
</section>
<section class="pf-v5-c-page__main-section pf-m-limit-width">
<div class="pf-v5-c-page__main-body">
<div class="pf-v5-l-gallery pf-m-gutter">
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
</div>
</div>
</section>
</main>
</div>
```
### Context selector in sidebar
```html isFullscreen
<div class="pf-v5-c-page" id="context-selector-in-sidebar-example">
<div class="pf-v5-c-skip-to-content">
<a
class="pf-v5-c-button pf-m-primary"
href="#main-content-context-selector-in-sidebar-example"
>Skip to content</a>
</div>
<header
class="pf-v5-c-masthead"
id="context-selector-in-sidebar-example-masthead"
>
<span class="pf-v5-c-masthead__toggle">
<button
class="pf-v5-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-v5-c-masthead__main">
<a class="pf-v5-c-masthead__brand" href="#">
<img
class="pf-v5-c-brand"
src="/assets/images/pf-logo.svg"
alt="PatternFly logo"
style="--pf-v5-c-brand--Height:36px"
/>
</a>
</div>
<div class="pf-v5-c-masthead__content">
<div
class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
id="context-selector-in-sidebar-example-masthead-toolbar"
>
<div class="pf-v5-c-toolbar__content">
<div class="pf-v5-c-toolbar__content-section">
<div
class="pf-v5-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-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
>
<div class="pf-v5-c-toolbar__item">
<button
class="pf-v5-c-menu-toggle pf-m-plain"
type="button"
aria-expanded="false"
aria-label="Application launcher"
>
<i class="fas fa-th" aria-hidden="true"></i>
</button>
</div>
<div class="pf-v5-c-toolbar__item">
<button
class="pf-v5-c-menu-toggle pf-m-plain"
type="button"
aria-expanded="false"
aria-label="Settings"
>
<i class="fas fa-cog" aria-hidden="true"></i>
</button>
</div>
<div class="pf-v5-c-toolbar__item">
<button
class="pf-v5-c-menu-toggle pf-m-plain"
type="button"
aria-expanded="false"
aria-label="Help"
>
<i class="fas fa-question-circle" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
<button
class="pf-v5-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>
</div>
<div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
<button
class="pf-v5-c-menu-toggle pf-m-full-height"
type="button"
aria-expanded="false"
>
<span class="pf-v5-c-menu-toggle__icon">
<img
class="pf-v5-c-avatar"
alt="Avatar image"
src="/assets/images/img_avatar-light.svg"
/>
</span>
<span class="pf-v5-c-menu-toggle__text">Ned Username</span>
<span class="pf-v5-c-menu-toggle__controls">
<span class="pf-v5-c-menu-toggle__toggle-icon">
<i class="fas fa-caret-down" aria-hidden="true"></i>
</span>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="pf-v5-c-page__sidebar">
<div class="pf-v5-c-page__sidebar-body pf-m-menu">
<div class="pf-v5-c-context-selector pf-m-page-insets pf-m-large">
<span
id="context-selector-collapsed-example-label"
hidden
>Selected project:</span>
<button
class="pf-v5-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-v5-c-context-selector__toggle-text">My project</span>
<span class="pf-v5-c-context-selector__toggle-icon">
<i class="fas fa-caret-down" aria-hidden="true"></i>
</span>
</button>
<div class="pf-v5-c-context-selector__menu" hidden>
<div class="pf-v5-c-context-selector__menu-search">
<div class="pf-v5-c-text-input-group">
<div class="pf-v5-c-text-input-group__main pf-m-icon">
<span class="pf-v5-c-text-input-group__text">
<span class="pf-v5-c-text-input-group__icon">
<i class="fas fa-fw fa-search"></i>
</span>
<input
class="pf-v5-c-text-input-group__text-input"
type="text"
placeholder="Search"
value
aria-label="Search input"
/>
</span>
</div>
</div>
</div>
<ul class="pf-v5-c-context-selector__menu-list" role="menu">
<li role="none">
<a
class="pf-v5-c-context-selector__menu-list-item"
href="#"
role="menuitem"
>Link</a>
</li>
<li role="none">
<button
class="pf-v5-c-context-selector__menu-list-item"
type="button"
role="menuitem"
>Action</button>
</li>
<li role="none">
<a
class="pf-v5-c-context-selector__menu-list-item pf-m-disabled"
href="#"
aria-disabled="true"
tabindex="-1"
role="menuitem"
>Disabled link</a>
</li>
<li role="none">
<button
class="pf-v5-c-context-selector__menu-list-item"
type="button"
disabled
role="menuitem"
>Disabled action</button>
</li>
<li role="none">
<button
class="pf-v5-c-context-selector__menu-list-item"
type="button"
role="menuitem"
>My project</button>
</li>
<li role="none">
<button
class="pf-v5-c-context-selector__menu-list-item"
type="button"
role="menuitem"
>OpenShift cluster</button>
</li>
<li role="none">
<button
class="pf-v5-c-context-selector__menu-list-item"
type="button"
role="menuitem"
>Production Ansible</button>
</li>
<li role="none">
<button
class="pf-v5-c-context-selector__menu-list-item"
type="button"
role="menuitem"
>AWS</button>
</li>
<li role="none">
<button
class="pf-v5-c-context-selector__menu-list-item"
type="button"
role="menuitem"
>Azure</button>
</li>
<li role="none">
<button
class="pf-v5-c-context-selector__menu-list-item"
type="button"
role="menuitem"
>My project</button>
</li>
<li role="none">
<button
class="pf-v5-c-context-selector__menu-list-item"
type="button"
role="menuitem"
>OpenShift cluster</button>
</li>
<li role="none">
<button
class="pf-v5-c-context-selector__menu-list-item"
type="button"
role="menuitem"
>Production Ansible</button>
</li>
<li role="none">
<button
class="pf-v5-c-context-selector__menu-list-item"
type="button"
role="menuitem"
>AWS</button>
</li>
<li role="none">
<button
class="pf-v5-c-context-selector__menu-list-item"
type="button"
role="menuitem"
>Azure</button>
</li>
</ul>
</div>
</div>
</div>
<div class="pf-v5-c-page__sidebar-body">
<nav
class="pf-v5-c-nav"
id="context-selector-in-sidebar-example-primary-nav"
aria-label="Global"
>
<ul class="pf-v5-c-nav__list" role="list">
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">System panel</a>
</li>
<li class="pf-v5-c-nav__item">
<a
href="#"
class="pf-v5-c-nav__link pf-m-current"
aria-current="page"
>Policy</a>
</li>
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Authentication</a>
</li>
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Network services</a>
</li>
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Server</a>
</li>
</ul>
</nav>
</div>
</div>
<main
class="pf-v5-c-page__main"
tabindex="-1"
id="main-content-context-selector-in-sidebar-example"
>
<section class="pf-v5-c-page__main-breadcrumb pf-m-limit-width">
<div class="pf-v5-c-page__main-body">
<nav class="pf-v5-c-breadcrumb" aria-label="breadcrumb">
<ol class="pf-v5-c-breadcrumb__list" role="list">
<li class="pf-v5-c-breadcrumb__item">
<a href="#" class="pf-v5-c-breadcrumb__link">Section home</a>
</li>
<li class="pf-v5-c-breadcrumb__item">
<span class="pf-v5-c-breadcrumb__item-divider">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
</li>
<li class="pf-v5-c-breadcrumb__item">
<span class="pf-v5-c-breadcrumb__item-divider">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
</li>
<li class="pf-v5-c-breadcrumb__item">
<span class="pf-v5-c-breadcrumb__item-divider">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<a
href="#"
class="pf-v5-c-breadcrumb__link pf-m-current"
aria-current="page"
>Section landing</a>
</li>
</ol>
</nav>
</div>
</section>
<section class="pf-v5-c-page__main-section pf-m-limit-width pf-m-light">
<div class="pf-v5-c-page__main-body">
<div class="pf-v5-c-content">
<h1>Main title</h1>
<p>This is a full page demo.</p>
</div>
</div>
</section>
<section class="pf-v5-c-page__main-section pf-m-limit-width">
<div class="pf-v5-c-page__main-body">
<div class="pf-v5-l-gallery pf-m-gutter">
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
</div>
</div>
</section>
</main>
</div>
```
### Context selector in sidebar expanded
```html isFullscreen
<div class="pf-v5-c-page" id="context-selector-in-sidebar-expanded-example">
<div class="pf-v5-c-skip-to-content">
<a
class="pf-v5-c-button pf-m-primary"
href="#main-content-context-selector-in-sidebar-expanded-example"
>Skip to content</a>
</div>
<header
class="pf-v5-c-masthead"
id="context-selector-in-sidebar-expanded-example-masthead"
>
<span class="pf-v5-c-masthead__toggle">
<button
class="pf-v5-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-v5-c-masthead__main">
<a class="pf-v5-c-masthead__brand" href="#">
<img
class="pf-v5-c-brand"
src="/assets/images/pf-logo.svg"
alt="PatternFly logo"
style="--pf-v5-c-brand--Height:36px"
/>
</a>
</div>
<div class="pf-v5-c-masthead__content">
<div
class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
id="context-selector-in-sidebar-expanded-example-masthead-toolbar"
>
<div class="pf-v5-c-toolbar__content">
<div class="pf-v5-c-toolbar__content-section">
<div
class="pf-v5-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-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
>
<div class="pf-v5-c-toolbar__item">
<button
class="pf-v5-c-menu-toggle pf-m-plain"
type="button"
aria-expanded="false"
aria-label="Application launcher"
>
<i class="fas fa-th" aria-hidden="true"></i>
</button>
</div>
<div class="pf-v5-c-toolbar__item">
<button
class="pf-v5-c-menu-toggle pf-m-plain"
type="button"
aria-expanded="false"
aria-label="Settings"
>
<i class="fas fa-cog" aria-hidden="true"></i>
</button>
</div>
<div class="pf-v5-c-toolbar__item">
<button
class="pf-v5-c-menu-toggle pf-m-plain"
type="button"
aria-expanded="false"
aria-label="Help"
>
<i class="fas fa-question-circle" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
<button
class="pf-v5-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>
</div>
<div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
<button
class="pf-v5-c-menu-toggle pf-m-full-height"
type="button"
aria-expanded="false"
>
<span class="pf-v5-c-menu-toggle__icon">
<img
class="pf-v5-c-avatar"
alt="Avatar image"
src="/assets/images/img_avatar-light.svg"
/>
</span>
<span class="pf-v5-c-menu-toggle__text">Ned Username</span>
<span class="pf-v5-c-menu-toggle__controls">
<span class="pf-v5-c-menu-toggle__toggle-icon">
<i class="fas fa-caret-down" aria-hidden="true"></i>
</span>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="pf-v5-c-page__sidebar">
<div class="pf-v5-c-page__sidebar-body pf-m-menu">
<div
class="pf-v5-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-v5-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-v5-c-context-selector__toggle-text">My project</span>
<span class="pf-v5-c-context-selector__toggle-icon">
<i class="fas fa-caret-down" aria-hidden="true"></i>
</span>
</button>
<div class="pf-v5-c-context-selector__menu">
<div class="pf-v5-c-context-selector__menu-search">
<div class="pf-v5-c-text-input-group">
<div class="pf-v5-c-text-input-group__main pf-m-icon">
<span class="pf-v5-c-text-input-group__text">
<span class="pf-v5-c-text-input-group__icon">
<i class="fas fa-fw fa-search"></i>
</span>
<input
class="pf-v5-c-text-input-group__text-input"
type="text"
placeholder="Search"
value
aria-label="Search input"
/>
</span>
</div>
</div>
</div>
<ul class="pf-v5-c-context-selector__menu-list" role="menu">
<li role="none">
<a
class="pf-v5-c-context-selector__menu-list-item"
href="#"
role="menuitem"
>Link</a>
</li>
<li role="none">
<button
class="pf-v5-c-context-selector__menu-list-item"
type="button"
role="menuitem"
>Action</button>
</li>
<li role="none">
<a
class="pf-v5-c-context-selector__menu-list-item pf-m-disabled"
href="#"
aria-disabled="true"
tabindex="-1"
role="menuitem"
>Disabled link</a>
</li>
<li role="none">
<button
class="pf-v5-c-context-selector__menu-list-item"
type="button"
disabled
role="menuitem"
>Disabled action</button>
</li>
<li role="none">
<button
class="pf-v5-c-context-selector__menu-list-item"
type="button"
role="menuitem"
>My project</button>
</li>
<li role="none">
<button
class="pf-v5-c-context-selector__menu-list-item"
type="button"
role="menuitem"
>OpenShift cluster</button>
</li>
<li role="none">
<button
class="pf-v5-c-context-selector__menu-list-item"
type="button"
role="menuitem"
>Production Ansible</button>
</li>
<li role="none">
<button
class="pf-v5-c-context-selector__menu-list-item"
type="button"
role="menuitem"
>AWS</button>
</li>
<li role="none">
<button
class="pf-v5-c-context-selector__menu-list-item"
type="button"
role="menuitem"
>Azure</button>
</li>
<li role="none">
<button
class="pf-v5-c-context-selector__menu-list-item"
type="button"
role="menuitem"
>My project</button>
</li>
<li role="none">
<button
class="pf-v5-c-context-selector__menu-list-item"
type="button"
role="menuitem"
>OpenShift cluster</button>
</li>
<li role="none">
<button
class="pf-v5-c-context-selector__menu-list-item"
type="button"
role="menuitem"
>Production Ansible</button>
</li>
<li role="none">
<button
class="pf-v5-c-context-selector__menu-list-item"
type="button"
role="menuitem"
>AWS</button>
</li>
<li role="none">
<button
class="pf-v5-c-context-selector__menu-list-item"
type="button"
role="menuitem"
>Azure</button>
</li>
</ul>
</div>
</div>
</div>
<div class="pf-v5-c-page__sidebar-body">
<nav
class="pf-v5-c-nav"
id="context-selector-in-sidebar-expanded-example-primary-nav"
aria-label="Global"
>
<ul class="pf-v5-c-nav__list" role="list">
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">System panel</a>
</li>
<li class="pf-v5-c-nav__item">
<a
href="#"
class="pf-v5-c-nav__link pf-m-current"
aria-current="page"
>Policy</a>
</li>
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Authentication</a>
</li>
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Network services</a>
</li>
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Server</a>
</li>
</ul>
</nav>
</div>
</div>
<main
class="pf-v5-c-page__main"
tabindex="-1"
id="main-content-context-selector-in-sidebar-expanded-example"
>
<section class="pf-v5-c-page__main-breadcrumb pf-m-limit-width">
<div class="pf-v5-c-page__main-body">
<nav class="pf-v5-c-breadcrumb" aria-label="breadcrumb">
<ol class="pf-v5-c-breadcrumb__list" role="list">
<li class="pf-v5-c-breadcrumb__item">
<a href="#" class="pf-v5-c-breadcrumb__link">Section home</a>
</li>
<li class="pf-v5-c-breadcrumb__item">
<span class="pf-v5-c-breadcrumb__item-divider">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
</li>
<li class="pf-v5-c-breadcrumb__item">
<span class="pf-v5-c-breadcrumb__item-divider">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
</li>
<li class="pf-v5-c-breadcrumb__item">
<span class="pf-v5-c-breadcrumb__item-divider">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<a
href="#"
class="pf-v5-c-breadcrumb__link pf-m-current"
aria-current="page"
>Section landing</a>
</li>
</ol>
</nav>
</div>
</section>
<section class="pf-v5-c-page__main-section pf-m-limit-width pf-m-light">
<div class="pf-v5-c-page__main-body">
<div class="pf-v5-c-content">
<h1>Main title</h1>
<p>This is a full page demo.</p>
</div>
</div>
</section>
<section class="pf-v5-c-page__main-section pf-m-limit-width">
<div class="pf-v5-c-page__main-body">
<div class="pf-v5-l-gallery pf-m-gutter">
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
<div class="pf-v5-c-card">
<div class="pf-v5-c-card__body">This is a card</div>
</div>
</div>
</div>
</section>
</main>
</div>
```
### Context selector in page content
```html isFullscreen
<div class="pf-v5-c-page" id="context-selector-in-page-content-example">
<div class="pf-v5-c-skip-to-content">
<a
class="pf-v5-c-button pf-m-primary"
href="#main-content-context-selector-in-page-content-example"
>Skip to content</a>
</div>
<header
class="pf-v5-c-masthead"
id="context-selector-in-page-content-example-masthead"
>
<span class="pf-v5-c-masthead__toggle">
<button
class="pf-v5-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-v5-c-masthead__main">
<a class="pf-v5-c-masthead__brand" href="#">
<img
class="pf-v5-c-brand"
src="/assets/images/pf-logo.svg"
alt="PatternFly logo"
style="--pf-v5-c-brand--Height:36px"
/>
</a>
</div>
<div class="pf-v5-c-masthead__content">
<div
class="pf-v5-c-toolbar pf-m-full-height pf-m-static"
id="context-selector-in-page-content-example-masthead-toolbar"
>
<div class="pf-v5-c-toolbar__content">
<div class="pf-v5-c-toolbar__content-section">
<div
class="pf-v5-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-v5-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
>
<div class="pf-v5-c-toolbar__item">
<button
class="pf-v5-c-menu-toggle pf-m-plain"
type="button"
aria-expanded="false"
aria-label="Application launcher"
>
<i class="fas fa-th" aria-hidden="true"></i>
</button>
</div>
<div class="pf-v5-c-toolbar__item">
<button
class="pf-v5-c-menu-toggle pf-m-plain"
type="button"
aria-expanded="false"
aria-label="Settings"
>
<i class="fas fa-cog" aria-hidden="true"></i>
</button>
</div>
<div class="pf-v5-c-toolbar__item">
<button
class="pf-v5-c-menu-toggle pf-m-plain"
type="button"
aria-expanded="false"
aria-label="Help"
>
<i class="fas fa-question-circle" aria-hidden="true"></i>
</button>
</div>
</div>
<div class="pf-v5-c-toolbar__item pf-m-hidden-on-lg">
<button
class="pf-v5-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>
</div>
<div class="pf-v5-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
<button
class="pf-v5-c-menu-toggle pf-m-full-height"
type="button"
aria-expanded="false"
>
<span class="pf-v5-c-menu-toggle__icon">
<img
class="pf-v5-c-avatar"
alt="Avatar image"
src="/assets/images/img_avatar-light.svg"
/>
</span>
<span class="pf-v5-c-menu-toggle__text">Ned Username</span>
<span class="pf-v5-c-menu-toggle__controls">
<span class="pf-v5-c-menu-toggle__toggle-icon">
<i class="fas fa-caret-down" aria-hidden="true"></i>
</span>
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="pf-v5-c-page__sidebar">
<div class="pf-v5-c-page__sidebar-body">
<nav
class="pf-v5-c-nav"
id="context-selector-in-page-content-example-primary-nav"
aria-label="Global"
>
<ul class="pf-v5-c-nav__list" role="list">
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">System panel</a>
</li>
<li class="pf-v5-c-nav__item">
<a
href="#"
class="pf-v5-c-nav__link pf-m-current"
aria-current="page"
>Policy</a>
</li>
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Authentication</a>
</li>
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Network services</a>
</li>
<li class="pf-v5-c-nav__item">
<a href="#" class="pf-v5-c-nav__link">Server</a>
</li>
</ul>
</nav>
</div>
</div>
<main
class="pf-v5-c-page__main"
tabindex="-1"
id="main-content-context-selector-in-page-content-example"
>
<section
class="pf-v5-c-page__main-section pf-m-limit-width pf-m-light pf-m-no-padding"
>
<div class="pf-v5-c-page__main-body">
<div
class="pf-v5-c-toolbar pf-m-inset-none"
id="toolbar-simple-example"
>
<div class="pf-v5-c-toolbar__content">
<div class="pf-v5-c-toolbar__content-section">
<div class="pf-v5-c-toolbar__item">
<div
class="pf-v5-c-context-selector pf-m-page-insets pf-m-width-auto"
style="--pf-v5-c-context-selector--Width: 270px;"
>
<span
id="context-selector-in-page-content-example-context-selector-label"
hidden
>Selected project:</span>
<button
class="pf-v5-c-context-selector__toggle pf-m-text pf-m-plain"
aria-expanded="false"
id="context-selector-in-page-content-example-context-selector-toggle"
aria-labelledby="context-selector-in-page-content-example-context-selector-label context-selector-in-page-content-example-context-selector-toggle"
>
<span
class="pf-v5-c-context-selector__toggle-text"
>Project: openshift-apple1</span>
<span class="pf-v5-c-context-selector__toggle-icon">
<i class="fas fa-caret-down" aria-hidden="true"></i>
</span>
</button>
<div class="pf-v5-c-context-selector__menu" hidden>
<div class="pf-v5-c-context-selector__menu-search">
<div class="pf-v5-c-text-input-group">
<div class="pf-v5-c-text-input-group__main pf-m-icon">
<span class="pf-v5-c-text-input-group__text">
<span class="pf-v5-c-text-input-group__icon">
<i class="fas fa-fw fa-search"></i>
</span>
<input
class="pf-v5-c-text-input-group__text-input"
type="text"
placeholder="Search"
value
aria-label="Search input"
/>
</span>
</div>
</div>
</div>
<ul class="pf-v5-c-context-selector__menu-list" role="menu">
<li role="none">
<a
class="pf-v5-c-context-selector__menu-list-item"
href="#"
role="menuitem"
>Link</a>
</li>
<li role="none">
<button
class="pf-v5-c-context-selector__menu-list-item"
type="button"
role="menuitem"
>Action</button>
</li>
<li role="none">
<a
class="pf-v5-c-context-selector__menu-list-item pf-m-disabled"
href="#"
aria-disabled="true"
tabindex="-1"
role="menuitem"
>Disabled link</a>
</li>
<li role="none">
<button
class="pf-v5-c-context-selector__menu-list-item"
type="button"
disabled
role="menuitem"
>Disabled action</button>
</li>
<li role="none">
<button
class="pf-v5-c-context-selector__menu-list-item"
type="button"
role="menuitem"
>My project</button>
</li>
<li role="none">
<button
class="pf-v5-c-context-selector__menu-list-item"
type="button"
role="menuitem"
>OpenShift cluster</button>
</li>
<li role="none">
<button
class="pf-v5-c-context-selector__menu-list-item"
type="button"
role="menuitem"
>Production Ansible</button>
</li>
<li role="none">
<button
class="pf-v5-c-context-selector__menu-list-item"
type="button"
role="menuitem"
>AWS</button>
</li>
<li role="none">
<button
class="pf-v5-c-context-selector__menu-list-item"
type="button"
role="menuitem"
>Azure</button>
</li>
<li role="none">
<button
class="pf-v5-c-context-selector__menu-list-item"
type="button"
role="menuitem"
>My project</button>
</li>
<li role="none">
<button
class="pf-v5-c-context-selector__menu-list-item"
type="button"
role="menuitem"
>OpenShift cluster</button>
</li>
<li role="none">
<button
class="pf-v5-c-context-selector__menu-list-item"
type="button"
role="menuitem"
>Production Ansible</button>
</li>
<li role="none">
<button
class="pf-v5-c-context-selector__menu-list-item"
type="button"
role="menuitem"
>AWS</button>
</li>
<li role="none">
<button
class="pf-v5-c-context-selector__menu-list-item"
type="button"
role="menuitem"
>Azure</button>
</li>
</ul>
</div>
</div>
</div>
<div class="pf-v5-c-toolbar__item">
<div class="pf-v5-c-select">
<span
id="context-selector-in-page-content-example-select-label"
hidden
>Choose one</span>
<button
class="pf-v5-c-select__toggle pf-m-plain"
type="button"
id="context-selector-in-page-content-example-select-toggle"
aria-haspopup="true"
aria-expanded="false"
aria-labelledby="context-selector-in-page-content-example-select-label context-selector-in-page-content-example-select-toggle"
>
<div class="pf-v5-c-select__toggle-wrapper">
<span class="pf-v5-c-select__toggle-text">All applications</span>
</div>
<span class="pf-v5-c-select__toggle-arrow">
<i class="fas fa-caret-down" aria-hidden="true"></i>
</span>
</button>
<ul
class="pf-v5-c-select__menu"
role="listbox"
aria-labelledby="context-selector-in-page-content-example-select-label"
hidden
>
<li role="presentation">
<button
class="pf-v5-c-select__menu-item"
role="option"
>Running</button>
</li>
<li role="presentation">
<button
class="pf-v5-c-select__menu-item pf-m-selected"
role="option"
aria-selected="true"
>
Stopped
<span class="pf-v5-c-select__menu-item-icon">
<i class="fas fa-check" aria-hidden="true"></i>
</span>
</button>
</li>
<li role="presentation">
<button
class="pf-v5-c-select__menu-item"
role="option"
>Down</button>
</li>
<li role="presentation">
<button
class="pf-v5-c-select__menu-item"
role="option"
>Degraded</button>
</li>
<li role="presentation">
<button
class="pf-v5-c-select__menu-item"
role="option"
>Needs maintenance</button>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<hr class="pf-v5-c-divider" />
<section class="pf-v5-c-page__main-breadcrumb pf-m-limit-width">
<div class="pf-v5-c-page__main-body">
<nav class="pf-v5-c-breadcrumb" aria-label="breadcrumb">
<ol class="pf-v5-c-breadcrumb__list" role="list">
<li class="pf-v5-c-breadcrumb__item">
<a href="#" class="pf-v5-c-breadcrumb__link">Section home</a>
</li>
<li class="pf-v5-c-breadcrumb__item">
<span class="pf-v5-c-breadcrumb__item-divider">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
</li>
<li class="pf-v5-c-breadcrumb__item">
<span class="pf-v5-c-breadcrumb__item-divider">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<a href="#" class="pf-v5-c-breadcrumb__link">Section title</a>
</li>
<li class="pf-v5-c-breadcrumb__item">
<span class="pf-v5-c-breadcrumb__item-divider">
<i class="fas fa-angle-right" aria-hidden="true"></i>
</span>
<a
href="#"
class="pf-v5-c-breadcrumb__link pf-m-current"
aria-current="page"
>Section landing</a>
</li>
</ol>
</nav>
</div>
</section>
<section class="pf-v5-c-page__main-section pf-m-limit-width pf-m-light">
<div class="pf-v5-c-page__main-body">
<div class="pf-v5-c-content">
<h