Table of Contents

Style the Table of Contents (TOC).

Note: The default TOC layout is A4 portrait. The TOC layout is not affected by the @outputclass attributes available in the Orientation Size Module.


Resource location:@import url("");
Figure 1. Hierarchical Map TOC.

By default, the TOC shows up to five levels of nested topics.

toc hierarchical map
Figure 2. Flat Map TOC.

By default, the TOC adjusts its styling to maps with no topic nesting.

toc flat map

DITA Outputclass Attributes

This module enables you to set the following @outputclass attributes in the DITA source:

Assign the @outputclass="no_toc" attribute to the root element of a publication map to remove the TOC completely from the output.
Tip: Hiding the TOC from the output is useful for maps that contain only one topic or a couple of short topics.
no table of content

Common Customizations

You can apply customizations by pasting the following code snippets under the @import rules.

Change the TOC heading
toc custom heading
/* Custom TOC heading. */
nav > ul:first-child::before {
    content: "Table of Contents"
Remove the TOC indents
toc no padding
/* Remove the TOC indents. */
nav ul li ul li {
    padding-left: 0px;
Change the TOC page layout
See Orientation Size.

Add a topic before the TOC

topic before table of content

You can apply this advanced customization by developing your DITA content in a particular way and by modifying the HTML, CSS, and XSLT code of the template.


The topic that you want to put before the TOC needs to have an @outputclass attribute assigned to its root tag. You can use any attribute value but in the following example, the @outputclass="doc_history" value is used.

doc history topic
<reference id="reference-228" outputclass="doc_history">
    <title>Document History</title>
        <author translate="no" type="creator">Rafał Karoń &lt;;</author>

<!-- Topic contents -->


We recommend hiding the topic from the TOC by assigning a @toc="no" attribute to the topic reference.

hide doc from table of content

Cover Page HTML

The entire cover page HTML code needs to be commented-out except for a single empty <div/> element.

<!-- <h1 class="cover-page-container">
    <div class="cover-page-content">
        <div class="title-text">{map.title}</div>
            <div class="bottom-stripe">
                <div class="logo-container">
                    <div class="logo">
                        <img src=""/>
</h1> -->


In the XSLT tab, add the code under the <xsl:import> tag(s).

Note: The following code snippet assumes that the topic that you want to move before the TOC has the @outputclass="doc_history" attribute assigned to its root element.

If you want to move a topic before the TOC with a different @outputclass attribute value, edit the underlined code accordingly.

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns:xsl="" version="2.0">

  <xsl:import href="../../../../../../../../sdk2/internal/pdf_generator/pdf_generator.xsl"/>

<!-- Add this code -->
<xsl:template match="*[contains(@class, ' map/map ')]" mode="chapterBody"> <body> <xsl:apply-templates select="*[contains(@class, ' ditaot-d/ditaval-startprop ')]/@outputclass" mode="add-ditaval-style"/> <xsl:if test="@outputclass"> <xsl:attribute name="class" select="@outputclass"/> </xsl:if> <xsl:apply-templates select="." mode="addAttributesToBody"/> <xsl:call-template name="setidaname"/> <xsl:apply-templates select="*[contains(@class, ' ditaot-d/ditaval-startprop ')]" mode="out-of-line"/> <xsl:call-template name="generateBreadcrumbs"/> <xsl:call-template name="gen-user-header"/> <xsl:call-template name="processHDR"/> <xsl:if test="$INDEXSHOW = 'yes'"> <xsl:apply-templates select="/*/*[contains(@class, ' map/topicmeta ')]/*[contains(@class, ' topic/keywords ')]/*[contains(@class, ' topic/indexterm ')]"/> </xsl:if> <xsl:call-template name="gen-user-sidetoc"/> <xsl:call-template name=""/> <xsl:variable name="map" as="element()*"> <xsl:apply-templates select="." mode="normalize-map"/> </xsl:variable> <!-- Put the topic before the TOC --> <xsl:apply-templates select="/normalized//*[contains(@class, ' topic/topic ')][@outputclass='doc_history'][1]" mode="doc.history"/> <xsl:apply-templates select="$map" mode="toc"/> <xsl:call-template name="gen-user-footer"/> <xsl:call-template name="processFTR"/> <xsl:apply-templates select="*[contains(@class, ' ditaot-d/ditaval-endprop ')]" mode="out-of-line"/> <xsl:apply-templates select="/normalized/*[contains(@class, ' topic/topic ')]" mode="child.topic"/> </body> </xsl:template> <!-- Remove the moved topic from its original location --> <xsl:template match="*[contains(@class, ' topic/topic ')][@outputclass='doc_history']" mode="child.topic"/> <xsl:template match="*" mode="doc.history"> <div class="doc_history"> <xsl:apply-templates/> </div> </xsl:template>  <!-- Generate cover page --> <xsl:template name=""> <h1 class="cover-page-container"> <div class="cover-page-content"> <div class="title-text"><xsl:call-template name=""/></div> <div class="bottom-stripe"> <div class="logo-container"> <div class="logo"> <img src=""/> </div> </div> </div> </div> </h1> </xsl:template> <!-- Generate map title --> <xsl:template name=""> <xsl:choose> <xsl:when test="//*[contains(@class, ' map/map ')]/*[contains(@class, ' topic/title ')]"> <xsl:apply-templates select="//*[contains(@class, ' map/map ')]/*[contains(@class, ' topic/title ')]"/> </xsl:when> <xsl:when test="//*[contains(@class, ' map/map ')]/@title"> <xsl:value-of select="//*[contains(@class, ' map/map ')]/@title"/> </xsl:when> <xsl:when test="//*[contains(@class, ' map/map ')]//*[contains(@class, ' topic/title ')]//*[contains(@class, ' bookmap/mainbooktitle ')]"> <xsl:apply-templates select="//*[contains(@class, ' map/map ')]//*[contains(@class, ' topic/title ')]//*[contains(@class, ' bookmap/mainbooktitle ')]"/> </xsl:when> <xsl:otherwise> <xsl:comment>No title specified</xsl:comment> </xsl:otherwise> </xsl:choose> </xsl:template>
<!-- End of add this code -->



Add the cover page styling in the CSS tab.

/* Style the cover page title. */
  div.title-text > h1.topictitle1 {
    color: #fff;
    font-style: normal;
    font-weight: bold;
    text-align: left;
    font-size: 80px;
    word-wrap: normal;
    letter-spacing: 0.025em;