Launcher

The Launcher allows users to see all available interfaces from one area of an application. This pattern makes it easier for users to quickly navigate to different interfaces without logging out. The pattern consists of two parts, the Launcher Menu and the Launcher Home (optional). Both parts display all available interfaces, with the Home screen also acting as a landing page for additional resources and documentation.

The Launcher Menu can be used without the Launcher Home, but the Launcher Home is recommended for any application that has between one and four interfaces available and has a need to provide additional context around functionality of those interface options.

The Launcher pattern is NOT meant to be an alternative to displaying Vertical Navigation or Horizontal Navigation.

The Launcher Menu should be accessible from the Masthead using the Launcher icon detailed in the Design tab.

Application Launcher Dropdown

The Launcher Home should be accessible from the Launcher Menu under the “Home” button.

Application Launcher Icon

Launcher

Launcher Menu

Application Launcher

  1. Launcher Icon: The “fa-th” icon from the Font Awesome icon library should be used to represent the launcher. Clicking on the icon will open a menu allowing the user to select a different interface to launch.
  2. Menu Items: The menu is triggered by clicking on the launcher icon. The menu displays the available user interfaces. The presentation of this menu may vary. In this example, user interfaces are represented with a label (UI name) and associated icon (optional) however, you could also use a list. The current interface being used should not show up in the menu. Home is optional, but when used should send the user to the Launcher Home.
  3. Selecting: When a user hovers over the UI Name or Icon, both should be highlighted as links, with a button border appearing as well. Clicking the option will launch the selected UI in a new browser window or browser tab, based on the browser preferences of the user.
  4. Tooltip: As a user hovers over the UI Name or Icon, a Tooltip should be available to explain what the action will do.

Launcher Menu Without Icons

Application Launcher without icons

Launcher Home

  • The Launcher Home can be used as a landing page between the Login Screen and the main application functionality when multiple interfaces exist. It may also be navigated to through a link in the Launcher Menu.

Application Launcher Icon

  1. Page Title: Give the page a name that encompasses all interface options.
  2. Description (optional): Welcome users to the application and give a brief description of the menu items presented.
  3. Menu Items: All available interfaces are represented with a label (UI name) and associated icon (optional). No more than four menu items should be displayed using the Launcher Home pattern.
  4. Action Buttons Place an action button under each menu item to allow for launching each user interface. See the Action Labels section for more information about terminology and wording specific to action labels.
  5. Footer (optional) Provide links to any additional resources associated with the application that may be helpful to the user. Resources in the footer may include documentation, tutorials, guides, etc, and may be organized using vertical separators as needed.

View full page example

Reference Markup

<html class="login-pf">
...
<h2>Grid Menu</h2>

<h3>Icons</h3>

<nav class="navbar navbar-default navbar-pf" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-1">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="/">
      <img src="//assets/img/brand.svg" alt="PatternFly Enterprise Application" />
    </a>
  </div>
  <div class="collapse navbar-collapse navbar-collapse-1">
    <ul class="nav navbar-nav navbar-utility">

      <li class="applauncher-pf applauncher-pf-block-list dropdown dropdown-kebab-pf">
        <a class="dropdown-toggle drawer-pf-trigger-icon" data-toggle="dropdown" href="#">
          <i class="fa fa-th applauncher-pf-icon" aria-hidden="true"></i>
          <span class="applauncher-pf-title">
            Application Launcher
            <span class="caret" aria-hidden="true"></span>
          </span>
        </a>
        <ul class="dropdown-menu dropdown-menu-right" role="menu">
          <li class="applauncher-pf-item" role="menuitem">
            <a class="applauncher-pf-link" href="#">
              <i class="applauncher-pf-link-icon pficon pficon-storage-domain" aria-hidden="true"></i>
              <span class="applauncher-pf-link-title">Recteque</span>
            </a>
          </li>
          <li class="applauncher-pf-item" role="menuitem">
            <a class="applauncher-pf-link" href="#">
              <i class="applauncher-pf-link-icon pficon pficon-build" aria-hidden="true"></i>
              <span class="applauncher-pf-link-title">Suavitate</span>
            </a>
          </li>
          <li class="applauncher-pf-item" role="menuitem">
            <a class="applauncher-pf-link" href="#">
              <i class="applauncher-pf-link-icon pficon pficon-domain" aria-hidden="true"></i>
              <span class="applauncher-pf-link-title">Lorem</span>
            </a>
          </li>
          <li class="applauncher-pf-item" role="menuitem">
            <a class="applauncher-pf-link" href="#">
              <i class="applauncher-pf-link-icon pficon pficon-home" aria-hidden="true"></i>
              <span class="applauncher-pf-link-title">Home</span>
            </a>
          </li>
        </ul>
      </li>

      <li>
        <a href="#">Status</a>
      </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
          <span class="pficon pficon-user"></span>
          Brian Johnson <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
          <li>
            <a href="#">Link</a>
          </li>
          <li>
            <a href="#">Another link</a>
          </li>
          <li>
            <a href="#">Something else here</a>
          </li>
          <li class="divider"></li>
          <li class="dropdown-submenu">
            <a tabindex="-1" href="#">More options</a>
            <ul class="dropdown-menu">
              <li>
                <a href="#">Link</a>
              </li>
              <li>
                <a href="#">Another link</a>
              </li>
              <li>
                <a href="#">Something else here</a>
              </li>
              <li class="divider"></li>
              <li class="dropdown-header">Nav header</li>
              <li>
                <a href="#">Separated link</a>
              </li>
              <li class="divider"></li>
              <li>
                <a href="#">One more separated link</a>
              </li>
            </ul>
          </li>
          <li class="divider"></li>
          <li>
            <a href="#">One more separated link</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

<h3>No Icons</h3>

<nav class="navbar navbar-default navbar-pf" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-1">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="/">
      <img src="//assets/img/brand.svg" alt="PatternFly Enterprise Application" />
    </a>
  </div>
  <div class="collapse navbar-collapse navbar-collapse-1">
    <ul class="nav navbar-nav navbar-utility">

      <li class="applauncher-pf applauncher-pf-block-list dropdown dropdown-kebab-pf">
        <a class="dropdown-toggle drawer-pf-trigger-icon" data-toggle="dropdown" href="#">
          <i class="fa fa-th applauncher-pf-icon" aria-hidden="true"></i>
          <span class="applauncher-pf-title">
            Application Launcher
            <span class="caret" aria-hidden="true"></span>
          </span>
        </a>
        <ul class="dropdown-menu dropdown-menu-right" role="menu">
          <li class="applauncher-pf-item" role="menuitem">
            <a class="applauncher-pf-link" href="#">
              <span class="applauncher-pf-link-title">Recteque</span>
            </a>
          </li>
          <li class="applauncher-pf-item" role="menuitem">
            <a class="applauncher-pf-link" href="#">
              <span class="applauncher-pf-link-title">Suavitate</span>
            </a>
          </li>
          <li class="applauncher-pf-item" role="menuitem">
            <a class="applauncher-pf-link" href="#">
              <span class="applauncher-pf-link-title">Lorem</span>
            </a>
          </li>
          <li class="applauncher-pf-item" role="menuitem">
            <a class="applauncher-pf-link" href="#">
              <span class="applauncher-pf-link-title">Home</span>
            </a>
          </li>
        </ul>
      </li>

      <li>
        <a href="#">Status</a>
      </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
          <span class="pficon pficon-user"></span>
          Brian Johnson <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
          <li>
            <a href="#">Link</a>
          </li>
          <li>
            <a href="#">Another link</a>
          </li>
          <li>
            <a href="#">Something else here</a>
          </li>
          <li class="divider"></li>
          <li class="dropdown-submenu">
            <a tabindex="-1" href="#">More options</a>
            <ul class="dropdown-menu">
              <li>
                <a href="#">Link</a>
              </li>
              <li>
                <a href="#">Another link</a>
              </li>
              <li>
                <a href="#">Something else here</a>
              </li>
              <li class="divider"></li>
              <li class="dropdown-header">Nav header</li>
              <li>
                <a href="#">Separated link</a>
              </li>
              <li class="divider"></li>
              <li>
                <a href="#">One more separated link</a>
              </li>
            </ul>
          </li>
          <li class="divider"></li>
          <li>
            <a href="#">One more separated link</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

<h2>List Menu</h2>
<h3>Icons</h3>

<nav class="navbar navbar-default navbar-pf" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-1">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="/">
      <img src="//assets/img/brand.svg" alt="PatternFly Enterprise Application" />
    </a>
  </div>
  <div class="collapse navbar-collapse navbar-collapse-1">
    <ul class="nav navbar-nav navbar-utility">

      <li class="applauncher-pf dropdown dropdown-kebab-pf">
        <a class="dropdown-toggle drawer-pf-trigger-icon" data-toggle="dropdown" href="#">
          <i class="fa fa-th applauncher-pf-icon" aria-hidden="true"></i>
          <span class="applauncher-pf-title">
            Application Launcher
            <span class="caret" aria-hidden="true"></span>
          </span>
        </a>
        <ul class="dropdown-menu dropdown-menu-right" role="menu">
          <li class="applauncher-pf-item" role="menuitem">
            <a class="applauncher-pf-link" href="#">
              <i class="applauncher-pf-link-icon pficon pficon-storage-domain" aria-hidden="true"></i>
              <span class="applauncher-pf-link-title">Recteque</span>
            </a>
          </li>
          <li class="applauncher-pf-item" role="menuitem">
            <a class="applauncher-pf-link" href="#">
              <!-- Placeholder left to maintain spacing -->
              <i class="applauncher-pf-link-icon" aria-hidden="true"></i>
              <span class="applauncher-pf-link-title">Suavitate</span>
            </a>
          </li>
          <li class="applauncher-pf-item" role="menuitem">
            <a class="applauncher-pf-link" href="#">
              <i class="applauncher-pf-link-icon pficon pficon-domain" aria-hidden="true"></i>
              <span class="applauncher-pf-link-title">Lorem</span>
            </a>
          </li>
          <li class="applauncher-pf-item" role="menuitem">
            <a class="applauncher-pf-link" href="#">
              <i class="applauncher-pf-link-icon pficon pficon-home" aria-hidden="true"></i>
              <span class="applauncher-pf-link-title">Home</span>
            </a>
          </li>
        </ul>
      </li>

      <li>
        <a href="#">Status</a>
      </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
          <span class="pficon pficon-user"></span>
          Brian Johnson <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
          <li>
            <a href="#">Link</a>
          </li>
          <li>
            <a href="#">Another link</a>
          </li>
          <li>
            <a href="#">Something else here</a>
          </li>
          <li class="divider"></li>
          <li class="dropdown-submenu">
            <a tabindex="-1" href="#">More options</a>
            <ul class="dropdown-menu">
              <li>
                <a href="#">Link</a>
              </li>
              <li>
                <a href="#">Another link</a>
              </li>
              <li>
                <a href="#">Something else here</a>
              </li>
              <li class="divider"></li>
              <li class="dropdown-header">Nav header</li>
              <li>
                <a href="#">Separated link</a>
              </li>
              <li class="divider"></li>
              <li>
                <a href="#">One more separated link</a>
              </li>
            </ul>
          </li>
          <li class="divider"></li>
          <li>
            <a href="#">One more separated link</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

<h3>No Icons</h3>

<nav class="navbar navbar-default navbar-pf" role="navigation">
  <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse-1">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="/">
      <img src="//assets/img/brand.svg" alt="PatternFly Enterprise Application" />
    </a>
  </div>
  <div class="collapse navbar-collapse navbar-collapse-1">
    <ul class="nav navbar-nav navbar-utility">

      <li class="applauncher-pf dropdown dropdown-kebab-pf">
        <a class="dropdown-toggle drawer-pf-trigger-icon" data-toggle="dropdown" href="#">
          <i class="fa fa-th applauncher-pf-icon" aria-hidden="true"></i>
          <span class="applauncher-pf-title">
            Application Launcher
            <span class="caret" aria-hidden="true"></span>
          </span>
        </a>
        <ul class="dropdown-menu dropdown-menu-right" role="menu">
          <li class="applauncher-pf-item" role="menuitem">
            <a class="applauncher-pf-link" href="#">
              <span class="applauncher-pf-link-title">Recteque</span>
            </a>
          </li>
          <li class="applauncher-pf-item" role="menuitem">
            <a class="applauncher-pf-link" href="#">
              <span class="applauncher-pf-link-title">Suavitate</span>
            </a>
          </li>
          <li class="applauncher-pf-item" role="menuitem">
            <a class="applauncher-pf-link" href="#">
              <span class="applauncher-pf-link-title">Lorem</span>
            </a>
          </li>
          <li class="applauncher-pf-item" role="menuitem">
            <a class="applauncher-pf-link" href="#">
              <span class="applauncher-pf-link-title">Home</span>
            </a>
          </li>
        </ul>
      </li>

      <li>
        <a href="#">Status</a>
      </li>
      <li class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
          <span class="pficon pficon-user"></span>
          Brian Johnson <b class="caret"></b>
        </a>
        <ul class="dropdown-menu">
          <li>
            <a href="#">Link</a>
          </li>
          <li>
            <a href="#">Another link</a>
          </li>
          <li>
            <a href="#">Something else here</a>
          </li>
          <li class="divider"></li>
          <li class="dropdown-submenu">
            <a tabindex="-1" href="#">More options</a>
            <ul class="dropdown-menu">
              <li>
                <a href="#">Link</a>
              </li>
              <li>
                <a href="#">Another link</a>
              </li>
              <li>
                <a href="#">Something else here</a>
              </li>
              <li class="divider"></li>
              <li class="dropdown-header">Nav header</li>
              <li>
                <a href="#">Separated link</a>
              </li>
              <li class="divider"></li>
              <li>
                <a href="#">One more separated link</a>
              </li>
            </ul>
          </li>
          <li class="divider"></li>
          <li>
            <a href="#">One more separated link</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</nav>

<script>
  $(document).ready(function() {

    $('.applauncher-pf .dropdown-toggle').eq(0).click();
  });
</script>

</html>