"topicPath"を利用するには、所定のスクリプトを記載し、BODY要素内に"topicPath"と"contents"をid属性とする2つの要素を設定します。
"topicPath"をid属性とする要素は、トピックパスを表示する領域です。内容はスクリプトが生成します。したがって、HTMLの記述では、子要素は不要です。以下この部分を「トピックパス」といいます。
"contents"をid属性とする要素は、目次と内容を表示する領域です。表示されるのは、現在選択されている子要素（以下「カレント要素」といいます。）だけです。
初期状態では、"home"をid属性とする要素が表示されます。この部分にはトップレベルの目次を記載することを想定しています。したがって、通常、リストモジュールとしてLI要素を子要素とするUL要素を割り当てます。このLI要素内には、A要素を配置してページ内の他の場所へのハイパーリンクを設定します。
"topicPath"は、カレント要素のtitle属性とid属性を取得して、これをトピックパスにハイパーリンクとして追加します。トピックパスの一番右側にカレント要素のtitle、その左側にその前の要素のtitleが表示され、「パンくずリスト」のようになります。
"topicPath"は、id属性とtitle属性を利用するので、"contents"をid属性とする要素の子要素にはこのふたつの属性は必須です。
トピックパスには、階層があるように表示されますが、HTMLの構造としては、各要素はすべて"contents"をid属性とする要素の子要素という並列な関係にします。
指定したid属性を有する要素を返すショートカット関数です。
$=function(id){return document.getElementById(id)};
"topicPath.js"では、次のグローバル変数を設定します