Add breadcrumbs to HTML outputs


Breadcrumbs can be added to your HTML based outputs, such as HTML pages, XHTML pages, HTML Help, JavaHelp, and Oracle Help.

Breadcrumb Sample

Use the following steps to configure your library and content for adding breadcrumbs:

  1. (Required) Add the <authorit:SYS_BREADCRUMBS> placeholder to your custom publishing template.
  2. (Optional) Create a BREADCRUMB_DELIMITER variable.
  3. (Optional) Create Breadcrumbs,Link, Delimiter, and Active styles (Breadcrumbs is the base style, and defaults to Times New Roman if not configured).

The template placeholder and custom publishing template

Add the template placeholder to your custom publishing template at the location where you want to add the breadcrumbs.

  1. Use a custom HTML template and add the breadcrumb template placeholder.

    The custom template includes a head section and a body section. In the body section you add the breadcrumbs and aitdata placeholders. (The <aitdata> placeholder is used by the custom template to define where the topic content is added.)

    The breadcrumb variable option has two modes:

    • <authorit:SYS_BREADCRUMBS> which includes the current (open) topic in the breadcrumbs.
    • <authorit:SYS_BREADCRUMBS_WITHOUT_ACTIVE> which excludes the current (open) topic from the breadcrumbs.

      Note: This variable is only used and resolved in HTML templates and is not added to topic content.

      Body_template Variable Entry

  2. Reference the template in the Media objects used by the topics in the book. The reference is added in the Web tab in the "Use this HTML template instead of settings below" field.

    Media Object with Custom Body_template

The optional delimiter variable

The optional breadcrumb delimiter variable is created in Author-it Administrator as a text variable (if you do not create this, the default delimiter is ‘ > ’). The variable is not applied to any objects in the library; it is resolved when publishing to an HTML output when Author-it finds the SYS_BREADCRUMBS template variable.

    (Option) Variable set to Text, then add your chosen delimiter characters (and spaces) as the value, for example, to add a pipe as the delimiter you could add [a space before the pipe] [a pipe (|)] [a space after the pipe]. (Note, spaces are not automatically included so must be added to the variable value if required.)
    (Option) Variable set to File if you want to use an image as a delimiter, e.g. Parent > Topic.
  • Optional: you can select a style in the variable window. The style is applied to the delimiter character during publishing. As an example, you could make the character bold. You can use this option or create the Breadcrumb Delimiter style.

    Breadcrumb Delimiter Variable

The Breadcrumbs, Link, Delimiter, and Active styles

The following base and optional styles are created in the library, using Style objects, and are added to the stylesheet during publishing. The Breadcrumbs style is required but if unconfigured will default to Times New Roman. The Link, Delimiter, and Active styles are optional.

Important: If you create Style objects ensure that you use the names shown below in the General tab's Description field. All styles are created as "paragraph" styles.

The base breadcrumb style has the following behaviors:

  • If this style is not created, the breadcrumbs will be added in the topic but will not have any styling applied. For example, the text may use the Times New Roman font.
  • The Breadcrumbs style provides the base font and style attributes used by the breadcrumbs.
  • If the Breadcrumbs style is created but the optional styles are not created, the breadcrumb text (links) use the default link colors set for your output using the a:link, a: visited, and a:hover stylesheet entries used for other hyperlinks, the table of contents, and index.
  • When you create the Style object ensure you name the style Breadcrumbs on the General tab so it is added to the stylesheet. (For example, if the style is named Breadcrumb (without an 's') the style will not be added.)

    Breadcrumbs Style Object

Optional breadcrumb styles:

The following styles can be used to apply additional display styling to different parts of the breadcrumbs. (You can either create the styles using Style objects in the library or add the references to a custom stylesheet file.)

  • Breadcrumb Link - applies a style to any topic titles in the breadcrumbs (when the style is used the default a:link, a: visited, and a:hover styles are not used).
  • Breadcrumb Delimiter - applies a style to the delimiter character.
  • Breadcrumb Active - applies a style to the current (open) topic.