Launcher
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.
The Launcher Home should be accessible from the Launcher Menu under the “Home” button.
Launcher
Launcher Menu
- 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.
- 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.
- 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.
- Tooltip（Optional）: As a user hovers over the UI Name or Icon, a Tooltip should be available to explain what the action will do. The tooltip is optional and should only be used if more information is needed about the app that will be launched.
Launcher Menu 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.
- Page Title: Give the page a name that encompasses all interface options.
- Description (optional): Welcome users to the application and give a brief description of the menu items presented.
- 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.
- 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.
- 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 Angular PatternFly Example
- View PatternFly NG Example
- View PatternFly React Example
PatternFly Core Example
<h2>Horizontal Nav Bar</h2>
<h3>Grid Menu</h3>
<h4>Icons</h4>
<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">
<button class="btn btn-link dropdown-toggle nav-item-iconic" data-toggle="dropdown" href="#">
<span class="fa fa-th applauncher-pf-icon" aria-hidden="true"></span>
<span class="dropdown-title">
<span class="applauncher-pf-title">
Application Launcher
<span class="caret" aria-hidden="true"></span>
</span>
</span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="applauncher-pf-item" role="presentation">
<a class="applauncher-pf-link" href="#" role="menuitem">
<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="presentation">
<a class="applauncher-pf-link" href="#" role="menuitem">
<i class="applauncher-pf-link-icon pficon pficon-virtual-machine" aria-hidden="true"></i>
<span class="applauncher-pf-link-title">Ipsum</span>
</a>
</li>
<li class="applauncher-pf-item" role="presentation">
<a class="applauncher-pf-link" href="#" role="menuitem">
<!-- 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="presentation">
<a class="applauncher-pf-link" href="#" role="menuitem">
<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="presentation">
<a class="applauncher-pf-link" href="#" role="menuitem">
<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 class="dropdown">
<button class="btn btn-link nav-item-iconic" id="horizontalDropdownMenu11" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span title="Help" class="fa pficon-help dropdown-title"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="horizontalDropdownMenu11">
<li><a href="#0">Help</a></li>
<li><a href="#0">About</a></li>
</ul>
</li>
<li class="dropdown">
<button class="btn btn-link dropdown-toggle" data-toggle="dropdown">
<span class="pficon pficon-user"></span>
<span class="dropdown-title">
Brian Johnson <b class="caret"></b>
</span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#0">Link</a>
</li>
<li>
<a href="#0">Another link</a>
</li>
<li>
<a href="#0">Something else here</a>
</li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#0">More options</a>
<ul class="dropdown-menu">
<li>
<a href="#0">Link</a>
</li>
<li>
<a href="#0">Another link</a>
</li>
<li>
<a href="#0">Something else here</a>
</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>
<a href="#0">Separated link</a>
</li>
<li class="divider"></li>
<li>
<a href="#0">One more separated link</a>
</li>
</ul>
</li>
<li class="divider"></li>
<li>
<a href="#0">One more separated link</a>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-primary">
<li>
<a href="#0">First Link</a>
</li>
<li class="active">
<a href="#0">Another Link</a>
</li>
<li>
<a href="#0">And Another</a>
</li>
<li>
<a href="#0">As a General Rule</a>
</li>
<li>
<a href="#0">Five to Seven Links</a>
</li>
<li>
<a href="#0">Is Good</a>
</li>
</ul>
</div>
</nav>
<h4>No Icons</h4>
<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">
<button class="btn btn-link dropdown-toggle nav-item-iconic" data-toggle="dropdown" href="#">
<span class="fa fa-th applauncher-pf-icon" aria-hidden="true"></span>
<span class="dropdown-title">
<span class="applauncher-pf-title">
Application Launcher
<span class="caret" aria-hidden="true"></span>
</span>
</span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="applauncher-pf-item" role="presentation">
<a class="applauncher-pf-link" href="#" role="menuitem">
<span class="applauncher-pf-link-title">Recteque</span>
</a>
</li>
<li class="applauncher-pf-item" role="presentation">
<a class="applauncher-pf-link" href="#" role="menuitem">
<span class="applauncher-pf-link-title">Ipsum</span>
</a>
</li>
<li class="applauncher-pf-item" role="presentation">
<a class="applauncher-pf-link" href="#" role="menuitem">
<span class="applauncher-pf-link-title">Suavitate</span>
</a>
</li>
<li class="applauncher-pf-item" role="presentation">
<a class="applauncher-pf-link" href="#" role="menuitem">
<span class="applauncher-pf-link-title">Lorem</span>
</a>
</li>
<li class="applauncher-pf-item" role="presentation">
<a class="applauncher-pf-link" href="#" role="menuitem">
<span class="applauncher-pf-link-title">Home</span>
</a>
</li>
</ul>
</li>
<li class="dropdown">
<button class="btn btn-link nav-item-iconic" id="horizontalDropdownMenu12" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span title="Help" class="fa pficon-help dropdown-title"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="horizontalDropdownMenu12">
<li><a href="#0">Help</a></li>
<li><a href="#0">About</a></li>
</ul>
</li>
<li class="dropdown">
<button class="btn btn-link dropdown-toggle" data-toggle="dropdown">
<span class="pficon pficon-user"></span>
<span class="dropdown-title">
Brian Johnson <b class="caret"></b>
</span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#0">Link</a>
</li>
<li>
<a href="#0">Another link</a>
</li>
<li>
<a href="#0">Something else here</a>
</li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#0">More options</a>
<ul class="dropdown-menu">
<li>
<a href="#0">Link</a>
</li>
<li>
<a href="#0">Another link</a>
</li>
<li>
<a href="#0">Something else here</a>
</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>
<a href="#0">Separated link</a>
</li>
<li class="divider"></li>
<li>
<a href="#0">One more separated link</a>
</li>
</ul>
</li>
<li class="divider"></li>
<li>
<a href="#0">One more separated link</a>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-primary">
<li>
<a href="#0">First Link</a>
</li>
<li class="active">
<a href="#0">Another Link</a>
</li>
<li>
<a href="#0">And Another</a>
</li>
<li>
<a href="#0">As a General Rule</a>
</li>
<li>
<a href="#0">Five to Seven Links</a>
</li>
<li>
<a href="#0">Is Good</a>
</li>
</ul>
</div>
</nav>
<h3>List Menu</h3>
<h4>Icons</h4>
<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">
<button class="btn btn-link dropdown-toggle nav-item-iconic" data-toggle="dropdown" href="#">
<span class="fa fa-th applauncher-pf-icon" aria-hidden="true"></span>
<span class="dropdown-title">
<span class="applauncher-pf-title">
Application Launcher
<span class="caret" aria-hidden="true"></span>
</span>
</span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="applauncher-pf-item" role="presentation">
<a class="applauncher-pf-link" href="#" role="menuitem">
<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="presentation">
<a class="applauncher-pf-link" href="#" role="menuitem">
<i class="applauncher-pf-link-icon pficon pficon-virtual-machine" aria-hidden="true"></i>
<span class="applauncher-pf-link-title">Ipsum</span>
</a>
</li>
<li class="applauncher-pf-item" role="presentation">
<a class="applauncher-pf-link" href="#" role="menuitem">
<!-- 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="presentation">
<a class="applauncher-pf-link" href="#" role="menuitem">
<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="presentation">
<a class="applauncher-pf-link" href="#" role="menuitem">
<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 class="dropdown">
<button class="btn btn-link nav-item-iconic" id="horizontalDropdownMenu13" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span title="Help" class="fa pficon-help dropdown-title"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="horizontalDropdownMenu13">
<li><a href="#0">Help</a></li>
<li><a href="#0">About</a></li>
</ul>
</li>
<li class="dropdown">
<button class="btn btn-link dropdown-toggle" data-toggle="dropdown">
<span class="pficon pficon-user"></span>
<span class="dropdown-title">
Brian Johnson <b class="caret"></b>
</span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#0">Link</a>
</li>
<li>
<a href="#0">Another link</a>
</li>
<li>
<a href="#0">Something else here</a>
</li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#0">More options</a>
<ul class="dropdown-menu">
<li>
<a href="#0">Link</a>
</li>
<li>
<a href="#0">Another link</a>
</li>
<li>
<a href="#0">Something else here</a>
</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>
<a href="#0">Separated link</a>
</li>
<li class="divider"></li>
<li>
<a href="#0">One more separated link</a>
</li>
</ul>
</li>
<li class="divider"></li>
<li>
<a href="#0">One more separated link</a>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-primary">
<li>
<a href="#0">First Link</a>
</li>
<li class="active">
<a href="#0">Another Link</a>
</li>
<li>
<a href="#0">And Another</a>
</li>
<li>
<a href="#0">As a General Rule</a>
</li>
<li>
<a href="#0">Five to Seven Links</a>
</li>
<li>
<a href="#0">Is Good</a>
</li>
</ul>
</div>
</nav>
<h4>No Icons</h4>
<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">
<button class="btn btn-link dropdown-toggle nav-item-iconic" data-toggle="dropdown" href="#">
<span class="fa fa-th applauncher-pf-icon" aria-hidden="true"></span>
<span class="dropdown-title">
<span class="applauncher-pf-title">
Application Launcher
<span class="caret" aria-hidden="true"></span>
</span>
</span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="applauncher-pf-item" role="presentation">
<a class="applauncher-pf-link" href="#" role="menuitem">
<span class="applauncher-pf-link-title">Recteque</span>
</a>
</li>
<li class="applauncher-pf-item" role="presentation">
<a class="applauncher-pf-link" href="#" role="menuitem">
<span class="applauncher-pf-link-title">Ipsum</span>
</a>
</li>
<li class="applauncher-pf-item" role="presentation">
<a class="applauncher-pf-link" href="#" role="menuitem">
<span class="applauncher-pf-link-title">Suavitate</span>
</a>
</li>
<li class="applauncher-pf-item" role="presentation">
<a class="applauncher-pf-link" href="#" role="menuitem">
<span class="applauncher-pf-link-title">Lorem</span>
</a>
</li>
<li class="applauncher-pf-item" role="presentation">
<a class="applauncher-pf-link" href="#" role="menuitem">
<span class="applauncher-pf-link-title">Home</span>
</a>
</li>
</ul>
</li>
<li class="dropdown">
<button class="btn btn-link nav-item-iconic" id="horizontalDropdownMenu14" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span title="Help" class="fa pficon-help dropdown-title"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="horizontalDropdownMenu14">
<li><a href="#0">Help</a></li>
<li><a href="#0">About</a></li>
</ul>
</li>
<li class="dropdown">
<button class="btn btn-link dropdown-toggle" data-toggle="dropdown">
<span class="pficon pficon-user"></span>
<span class="dropdown-title">
Brian Johnson <b class="caret"></b>
</span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#0">Link</a>
</li>
<li>
<a href="#0">Another link</a>
</li>
<li>
<a href="#0">Something else here</a>
</li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#0">More options</a>
<ul class="dropdown-menu">
<li>
<a href="#0">Link</a>
</li>
<li>
<a href="#0">Another link</a>
</li>
<li>
<a href="#0">Something else here</a>
</li>
<li class="divider"></li>
<li class="dropdown-header">Nav header</li>
<li>
<a href="#0">Separated link</a>
</li>
<li class="divider"></li>
<li>
<a href="#0">One more separated link</a>
</li>
</ul>
</li>
<li class="divider"></li>
<li>
<a href="#0">One more separated link</a>
</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-primary">
<li>
<a href="#0">First Link</a>
</li>
<li class="active">
<a href="#0">Another Link</a>
</li>
<li>
<a href="#0">And Another</a>
</li>
<li>
<a href="#0">As a General Rule</a>
</li>
<li>
<a href="#0">Five to Seven Links</a>
</li>
<li>
<a href="#0">Is Good</a>
</li>
</ul>
</div>
</nav>
<br>
<br>
<h2>Vertical Nav Bar</h2>
<h3>Grid Menu</h3>
<h4>Icons</h4>
<nav class="navbar navbar-pf-vertical">
<div class="navbar-header">
<button type="button" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="/" class="navbar-brand">
<img class="navbar-brand-icon" src="/assets/img/logo-alt.svg" alt=""/><img class="navbar-brand-name" src="/assets/img/brand-alt.svg" alt="PatternFly Enterprise Application" />
</a>
</div>
<nav class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right navbar-iconic navbar-utility">
<li class="applauncher-pf applauncher-pf-block-list dropdown">
<button class="btn btn-link dropdown-toggle nav-item-iconic" data-toggle="dropdown" href="#">
<span class="fa fa-th applauncher-pf-icon" aria-hidden="true"></span>
<span class="dropdown-title">
<span class="applauncher-pf-title">
Application Launcher
<span class="caret" aria-hidden="true"></span>
</span>
</span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="applauncher-pf-item" role="presentation">
<a class="applauncher-pf-link" href="#" role="menuitem">
<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="presentation">
<a class="applauncher-pf-link" href="#" role="menuitem">
<i class="applauncher-pf-link-icon pficon pficon-virtual-machine" aria-hidden="true"></i>
<span class="applauncher-pf-link-title">Ipsum</span>
</a>
</li>
<li class="applauncher-pf-item" role="presentation">
<a class="applauncher-pf-link" href="#" role="menuitem">
<!-- 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="presentation">
<a class="applauncher-pf-link" href="#" role="menuitem">
<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="presentation">
<a class="applauncher-pf-link" href="#" role="menuitem">
<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 class="dropdown">
<button class="btn btn-link dropdown-toggle nav-item-iconic" id="dropdownMenu15" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span title="Help" class="fa pficon-help"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu15">
<li><a href="#0">Help</a></li>
<li><a href="#0">About</a></li>
</ul>
</li>
<li class="dropdown">
<button class="btn btn-link dropdown-toggle nav-item-iconic" id="dropdownMenu25" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span title="Username" class="fa pficon-user"></span>
<span class="dropdown-title">
Brian Johnson <span class="caret"></span>
</span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu25">
<li><a href="#0">Preferences</a></li>
<li><a href="#0">Logout</a></li>
</ul>
</li>
</ul>
</nav>
</nav> <!--/.navbar-->
<h4>No Icons</h4>
<nav class="navbar navbar-pf-vertical">
<div class="navbar-header">
<button type="button" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="/" class="navbar-brand">
<img class="navbar-brand-icon" src="/assets/img/logo-alt.svg" alt=""/><img class="navbar-brand-name" src="/assets/img/brand-alt.svg" alt="PatternFly Enterprise Application" />
</a>
</div>
<nav class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right navbar-iconic navbar-utility">
<li class="applauncher-pf applauncher-pf-block-list dropdown">
<button class="btn btn-link dropdown-toggle nav-item-iconic" data-toggle="dropdown" href="#">
<span class="fa fa-th applauncher-pf-icon" aria-hidden="true"></span>
<span class="dropdown-title">
<span class="applauncher-pf-title">
Application Launcher
<span class="caret" aria-hidden="true"></span>
</span>
</span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="applauncher-pf-item" role="presentation">
<a class="applauncher-pf-link" href="#" role="menuitem">
<span class="applauncher-pf-link-title">Recteque</span>
</a>
</li>
<li class="applauncher-pf-item" role="presentation">
<a class="applauncher-pf-link" href="#" role="menuitem">
<span class="applauncher-pf-link-title">Ipsum</span>
</a>
</li>
<li class="applauncher-pf-item" role="presentation">
<a class="applauncher-pf-link" href="#" role="menuitem">
<span class="applauncher-pf-link-title">Suavitate</span>
</a>
</li>
<li class="applauncher-pf-item" role="presentation">
<a class="applauncher-pf-link" href="#" role="menuitem">
<span class="applauncher-pf-link-title">Lorem</span>
</a>
</li>
<li class="applauncher-pf-item" role="presentation">
<a class="applauncher-pf-link" href="#" role="menuitem">
<span class="applauncher-pf-link-title">Home</span>
</a>
</li>
</ul>
</li>
<li class="dropdown">
<button class="btn btn-link dropdown-toggle nav-item-iconic" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span title="Help" class="fa pficon-help"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><a href="#0">Help</a></li>
<li><a href="#0">About</a></li>
</ul>
</li>
<li class="dropdown">
<button class="btn btn-link dropdown-toggle nav-item-iconic" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span title="Username" class="fa pficon-user"></span>
<span class="dropdown-title">
Brian Johnson <span class="caret"></span>
</span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
<li><a href="#0">Preferences</a></li>
<li><a href="#0">Logout</a></li>
</ul>
</li>
</ul>
</nav>
</nav> <!--/.navbar-->
<h3>List Menu</h3>
<h4>Icons</h4>
<nav class="navbar navbar-pf-vertical">
<div class="navbar-header">
<button type="button" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="/" class="navbar-brand">
<img class="navbar-brand-icon" src="/assets/img/logo-alt.svg" alt=""/><img class="navbar-brand-name" src="/assets/img/brand-alt.svg" alt="PatternFly Enterprise Application" />
</a>
</div>
<nav class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right navbar-iconic navbar-utility">
<li class="applauncher-pf dropdown">
<button class="btn btn-link dropdown-toggle nav-item-iconic" data-toggle="dropdown" href="#">
<span class="fa fa-th applauncher-pf-icon" aria-hidden="true"></span>
<span class="dropdown-title">
<span class="applauncher-pf-title">
Application Launcher
<span class="caret" aria-hidden="true"></span>
</span>
</span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="applauncher-pf-item" role="presentation">
<a class="applauncher-pf-link" href="#" role="menuitem">
<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="presentation">
<a class="applauncher-pf-link" href="#" role="menuitem">
<i class="applauncher-pf-link-icon pficon pficon-virtual-machine" aria-hidden="true"></i>
<span class="applauncher-pf-link-title">Ipsum</span>
</a>
</li>
<li class="applauncher-pf-item" role="presentation">
<a class="applauncher-pf-link" href="#" role="menuitem">
<!-- 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="presentation">
<a class="applauncher-pf-link" href="#" role="menuitem">
<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="presentation">
<a class="applauncher-pf-link" href="#" role="menuitem">
<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 class="dropdown">
<button class="btn btn-link dropdown-toggle nav-item-iconic" id="dropdownMenu17" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span title="Help" class="fa pficon-help"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu17">
<li><a href="#0">Help</a></li>
<li><a href="#0">About</a></li>
</ul>
</li>
<li class="dropdown">
<button class="btn btn-link dropdown-toggle nav-item-iconic" id="dropdownMenu27" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span title="Username" class="fa pficon-user"></span>
<span class="dropdown-title">
Brian Johnson <span class="caret"></span>
</span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu27">
<li><a href="#0">Preferences</a></li>
<li><a href="#0">Logout</a></li>
</ul>
</li>
</ul>
</nav>
</nav> <!--/.navbar-->
<h4>No Icons</h4>
<nav class="navbar navbar-pf-vertical">
<div class="navbar-header">
<button type="button" class="navbar-toggle">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="/" class="navbar-brand">
<img class="navbar-brand-icon" src="/assets/img/logo-alt.svg" alt=""/><img class="navbar-brand-name" src="/assets/img/brand-alt.svg" alt="PatternFly Enterprise Application" />
</a>
</div>
<nav class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right navbar-iconic navbar-utility">
<li class="applauncher-pf dropdown">
<button class="btn btn-link dropdown-toggle nav-item-iconic" data-toggle="dropdown" href="#">
<span class="fa fa-th applauncher-pf-icon" aria-hidden="true"></span>
<span class="dropdown-title">
<span class="applauncher-pf-title">
Application Launcher
<span class="caret" aria-hidden="true"></span>
</span>
</span>
</button>
<ul class="dropdown-menu" role="menu">
<li class="applauncher-pf-item" role="presentation">
<a class="applauncher-pf-link" href="#" role="menuitem">
<span class="applauncher-pf-link-title">Recteque</span>
</a>
</li>
<li class="applauncher-pf-item" role="presentation">
<a class="applauncher-pf-link" href="#" role="menuitem">
<span class="applauncher-pf-link-title">Ipsum</span>
</a>
</li>
<li class="applauncher-pf-item" role="presentation">
<a class="applauncher-pf-link" href="#" role="menuitem">
<span class="applauncher-pf-link-title">Suavitate</span>
</a>
</li>
<li class="applauncher-pf-item" role="presentation">
<a class="applauncher-pf-link" href="#" role="menuitem">
<span class="applauncher-pf-link-title">Lorem</span>
</a>
</li>
<li class="applauncher-pf-item" role="presentation">
<a class="applauncher-pf-link" href="#" role="menuitem">
<span class="applauncher-pf-link-title">Home</span>
</a>
</li>
</ul>
</li>
<li class="dropdown">
<button class="btn btn-link dropdown-toggle nav-item-iconic" id="dropdownMenu18" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span title="Help" class="fa pficon-help"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu18">
<li><a href="#0">Help</a></li>
<li><a href="#0">About</a></li>
</ul>
</li>
<li class="dropdown">
<button class="btn btn-link dropdown-toggle nav-item-iconic" id="dropdownMenu28" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<span title="Username" class="fa pficon-user"></span>
<span class="dropdown-title">
Brian Johnson <span class="caret"></span>
</span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu28">
<li><a href="#0">Preferences</a></li>
<li><a href="#0">Logout</a></li>
</ul>
</li>
</ul>
</nav>
</nav> <!--/.navbar-->
<script>
$(document).ready(function() {
$('.applauncher-pf .dropdown-toggle').eq(0).click();
});
</script>