Tophat

Including the Tophat

The NICE UI library provides a standard component that must be included on all web pages to ensure uniformity across services. For an example of the basic Tophat just look to the top of this web page.

To include the component you need to include the following script tag before other script tags in your HTML5 document <body>.

<!-- Tophat script -->
<script src="https://cdn.nice.org.uk/v4.0.0/scripts/ui.tophat.js" async></script>

The tophat consists of three tiers of navigation each customisable and configurable in different ways;

The top tier

Displaying the NICE Logo to consistently tie each service into the group. Several navigational links are provided that take the user to each of our core service offerings. Additional it provides access to the NICE accounts system allowing a user to register and manage their profile across the NICE services.

The middle tier

Closed by default on short screen devices to provide as much room for visible content as possible, this tier provides access to secondary services within the evidence service group.

The bottom tier

The most configurable area of the tophat and is unique to each service if it is included. See the options for advanced ways to tailor this tier to your service but the most basic setup for this tier is to display the main service navigation.

<!-- Tophat placeholder -->
<header class="nice-tophat" role="banner">
  <div class="nice-global" id="nice-global">
    <div class="tophat-inner">
      <ul class="menu" role="navigation">
        <li><a href="/" rel="home">Home</a></li>
        ...
      </ul>
    </div>
  </div>
</header>

Options

The Tophat component is highly configurable giving several options that control its visible look as well as the features included. Options can be passed via data attributes on the script tag simply append the option name to data-, as in data-service="".

The following is a summary of the available options;

name	type	default	description
`service`	String	`''`	The name of this service name so that it can be highlighted in the top tier. Note: there is no need to use this if it is an evidence service use the `evidence` option.
`wtrealm`	string	`''`	If present the value will be passed on to the accounts system to identify the actual root of a particular service. By default the accounts system assume the domain root is the correct please to send authentication information.

A consistent search experience

including the data-search attribute will force the tophat to include a search form that provides the consistent search experience design by the Search and Information Architecture Team.

<!-- Tophat script -->
  <script src="https://cdn.nice.org.uk/v4.0.0/scripts/ui.tophat.js"
  data-search="/search?q=%term"
  async></script>

When the search field is included within the bottom tier additional options are available incase the typeahead component has also been included. The options are designed to work with twitters opensource typeahead.js.

Include the typeahead component by also including the following script tags directly after the tophat script tag. jquery is a dependency of the twitter typeahead.

<!-- jquery script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js" ></script>

<!-- Typeahead script -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.10.4/dist/typeahead.bundle.min.js" ></script>

The following is a summary of the additional typeahead options;

name	type	default	description
`search`	String	`''`	The search url used by this service. If the url is empty then the search field will not be included in the lower tier. The standard template text of `%term` will get replace by the appropriate search term entered into the search field.
`typeaheadtype`	String	`'remote'`	Can be set to `'local'` in order to utilise a javascript array located on the `window` object
`typeaheadsource`	String	`'/typeahead?term=%term'`	Indicates the remote service URL the typeahead will request results from. If the option `typeaheadtype` is set to local then this must be the `window` object property name that is a valid string array. Again the standard template text of `%term` will get replace by the appropriate search term entered into the search field.

NICE Evidence services microsites

As mentioned in the list of options a NICE evidence service should use the data-evidence attribute to highlight the service, this will automatically highlight the evidence services item in the top tier and open the evidence menu by default on that service.

name	type	default	description
`evidence`	String	`''`	The name of this evidence service name so that it can be highlighted in the middle tier. If set it will automatically overide the `service` option and set it to "evidence".

<!-- Tophat script -->
<script src="https://cdn.nice.org.uk/v4.0.0/scripts/ui.tophat.js"
  data-evidence="bnf"
  data-search="/formulary/bnf/current/search"
  data-typeaheadsource="/formulary/bnf/autocomplete?%query"
  data-wtrealm="http://www.evidence.nhs.uk/formulary/bnf/current/"
  async></script>

Additionally you may want to configure additonal microsite branding and livery that will be integrated into the bottom tier. An example of the BNF Microsites tophat placeholder is provided for reference. To see the result of using this placeholder please refer to the actual BNF website

<!-- BNF Tophat placeholder -->
<header class="nice-tophat" role="banner">
  <div class="nice-global nice-partner" id="nice-global">
    <div class="tophat-inner">
      <a href="/formulary/bnf/current/" class="partner-logo"><img src="/formulary/content/nice/bnf-220-logo.png"/></a>

      <span class="partner-brand">British National Formulary <small class="pull-right">December 2014</small></span>

      <ul class="menu" role="navigation"><li><a href="http://www.nice.org.uk/bnf-feedback">Leave feedback</a></li>
        <li><a href="/formulary/bnf/current/general-information-and-changes/changes">What's new</a></li>
        <li class="active"><a href="/formulary/bnf/current/">Formulary</a></li>
      </ul>
    </div>
  </div>
</header>

NICE Internal services

Along with the primary NICE services, several web services are closed to select audiences. These are classed as Internal services and are displayed slightly differently so as to be less intrusive visually.

<!-- Internal service Tophat script -->
<script src="https://cdn.nice.org.uk/v4.0.0/scripts/ui.tophat.js" data-internal="Docs / Appraisals" data-home="/" async></script>

Generally other options are ignored but again a placeholder can be included so that the bottom tier of the tophat is displayed with local service navigation. Also it is usual to set the additonal data-home attribute so that the logo directs users to the root of the current service rather than the global service root.

name	type	default	description
`internal`	String	`''`	Certain services fall outside of the primary NICE services and so should set the name of their service in this option. The service name will be displayed after the short version of the NICE logo and the tophat will take on the inverted appearance.
`home`	String	`'http://www.nice.org.uk'`	Sometimes there is a valid business reason for the logo to link to somewhere other than the root of the NICE service group. Please use with caution!

Tracking events

The Tophat automatically integrates with Google Analytics and Google Tag Manager sending trackable events over their integration methods. The following tracking events are emitted if a tracking script is detected, if no tracking script is detected then it will attempt use the browsers developer console.

Event Category	Event Action	Event Label	Description
`tophat`	NICE Pathways	current url	Indicates that the "NICE Pathways" service link has been clicked in the tophat.
`tophat`	Guidance	current url	Indicates that the "Guidance" service link has been clicked in the tophat.
`tophat`	Standards and indicators	current url	Indicates that the "Standards and indicators" service link has been clicked in the tophat.
`tophat`	Evidence services expanded	current url	Indicates that the "Evidence services" service menu has been expanded.
`tophat`	Evidence services collapsed	current url	Indicates that the "Evidence services" service menu has been collapsed.
`tophat`	Sign in	current url	Indicates that the "Sign in" link has been clicked in the tophat.
`tophat`	Your Profile expanded	current url	Indicates that the users profile menu has been expanded.
`tophat`	Your Profile collapsed	current url	Indicates that the users profile menu has been collapsed.
`tophat`	Evidence search	current url	Indicates that the "Evidence search" service link has been clicked in the tophat.
`tophat`	BNF	current url	Indicates that the "BNF" service link has been clicked in the tophat.
`tophat`	BNFC	current url	Indicates that the "BNFC" service link has been clicked in the tophat.
`tophat`	CKS	current url	Indicates that the "CKS" service link has been clicked in the tophat.
`tophat`	Journals and databases	current url	Indicates that the "Journals and databases" service link has been clicked in the tophat.
`search`	term	search url	Indicates that the tophat search was used and includes details of what was searched.
`Typeahead`	suggestion	link url	Indicates that the typeahead provided a suggestion that was used.

JavaScript callback

Some services require a notification when the tophat has loaded. This is provided through a document level callback. One such use of the callback is to allow the UI of the web page to resize any elements that need to fill the available area.

document.onTophatReady = function() {
  // do something when the tophat has injected itself
}