Topic page responsive layout

The Topic Page is the page generated for each DITA topic in the WebHelp Responsive output. The HTML pages produced for each topic consist of the topic content along with various other additional components, such as a title, menu, navigation breadcrumb, print icon, or side table of contents.

Figure: Topic Page

Topic Page Components

The layout components displayed in this page are:

Publication Title
The title of the publication. It is usually taken from the DITA map title.

Displays a logo associated with the publication. Additionally you can set a target URL that will be opened when you click on the logo image.

The logo image can be specified using the webhelp.logo.image transformation parameter. For target URL use the webhelp.logo.image.target.url parameter.

Menu
Helps you to navigate to your documentation. This component presents a set of links to all topics from your publication.
Index terms link
Presents a link to the index terms page. You can control if this component is displayed by using the webhelp.show.indexterms.link parameter.
Search query input
Input text field allowing you to easily enter your search queries.
Navigation Links
The navigation links (Previous / Next arrows) can be used to navigate to the previous or next topic. These navigation links are controlled by the collection-type attribute. For example, if you set collection-type="sequence" on a parent topic reference, navigation links will be generated in the output for that topic and all of its child topics. You can also use the webhelp.default.collection.type.sequence parameter and set its value to yes to generate navigation links for all topics, regardless of whether or not the collection-type attribute is present.
Tip: To hide the navigation links, you can edit the transformation scenario and set the value of the webhelp.show.navigation.links parameter to no.
Expand/Collapse Sections Icon
Icon that expands or collapses sections listed in the side table of contents within a topic.
Print Icon
A print icon that opens the print dialog box for your particular browser.
Breadcrumb
Presents the path of the current displayed DITA topic in documentation.
Topic Content
Presents the content of the associated DITA topic.
Publication Table of Contents
A Table of Content for the publication displayed in the left side.
Topic Table of Contents
A Table of Content for the topic displayed on the right side. This table of contents contains links to each section within the current topic and the section corresponding to the current scroll position is highlighted.
Page Footer
WebHelp Responsive output footer.