Documentation of GC Subway map navigation
Unstable feature
To be used at your own risks. All functionalities described below could be removed in any subsequent minor/major release and are excluded from the GCWeb public API.
Documentation and/or working examples for those features could be incomplete or not available.
On this page
Purpose
Break up long and complex content into pages that each focus on a step or specific answer people need before moving to the next step or section. Ideal for presenting services and processes.
Working examples
Layout
The layout for the index page is different from the sections pages. Below are code samples of how the GC Subway elements are laid out before the plugin has been initialized.
Index page
The GC Subway code snippet for the index page can be placed anywhere within the content of the page (<main>). However, make sure the heading level is appropriate. Also, the sub-section items must not be included in the index page.
<main>
<h1 property="name" id="wb-cont" class="gc-thickline">[Service name]</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<!-- GC Subway navigation -->
<nav class="gc-subway provisional">
<h2>Sections</h2>
<dl>
<dt><a href="section1-en.html">[Page 1]</a></dt>
<dd>Page description. Lorem ipsum dolor sit amet, consectetur adipiscing elit</dd>
<dt><a href="section2-en.html">[Page 2]</a></dt>
<dd>Page description. Lorem ipsum dolor sit amet, consectetur adipiscing elit</dd>
<dt><a href="section3-en.html">[Page 3]</a></dt>
<dd>Page description. Lorem ipsum dolor sit amet, consectetur adipiscing elit</dd>
<dt><a href="section4-en.html">[Page 4]</a></dt>
<dd>Page description. Lorem ipsum dolor sit amet, consectetur adipiscing elit</dd>
<dt><a href="section5-en.html">[Page 5]</a></dt>
<dd>Page description. Lorem ipsum dolor sit amet, consectetur adipiscing elit</dd>
<dt><a href="section6-en.html">[Page 6]</a></dt>
<dd>Page description. Lorem ipsum dolor sit amet, consectetur adipiscing elit</dd>
</dl>
</nav>
...
</main>Section page
The GC Subway code snippet for the section page must be placed at the beginning of your content, before the title (<h1>).
<main>
<!-- 1: GC Subway navigation -->
<nav class="gc-subway provisional">
<h1>[Service name]</h1>
<ul>
<li><a href="section1-en.html" class="active">[Page 1]</a></li>
<li><a href="section2-en.html">[Page 2]</a></li>
<li><a href="section3-en.html">[Page 3]</a></li>
<li><a href="section4-en.html">[Page 4]</a></li>
<li><a href="section5-en.html">[Page 5]</a></li>
<li><a href="section6-en.html">[Page 6]</a></li>
</ul>
</nav>
<!-- 2: Title -->
<h1 property="name" id="wb-cont" class="gc-thickline">[Page 1]</h1>
<!-- 3: Page content -->
<p>Page content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam commodo elementum est, ac ultrices urna convallis vitae.</p>
...
<!-- 4: Document navigation -->
<nav class="gc-subway-pagination">
<h2 class="wb-inv">Document navigation</h2>
<ul class="pager">
<li class="next"><a href="section2-en.html" rel="next"><span class="wb-inv">Next: </span>[Page 2]</a></li>
</ul>
</nav>
<!-- 5: Related information (optional) -->
<aside class="gc-subway-support">
<h2 class="h3">Related information</h2>
...
</aside>
</main>Style
- Class (mandatory):
active - To be added to the active page's link (
<a>) in the GC Subway navigation. - Class (optional):
noline - To be applied on a sub-section list (
<ul>). It will remove the vertical line connecting all sub-sections. It will also add a horizontal line connecting the active sub-section with the main subway line. Example of correct implementation.
Semantic
Index page
The heading's level will be dependent on your document's structure.
<nav class="gc-subway provisional">
<h2>Sections</h2>
<dl>
<dt><a href="section1-en.html">[Page 1]</a></dt>
<dd>Page description. Lorem ipsum dolor sit amet, consectetur adipiscing elit</dd>
<dt><a href="section2-en.html">[Page 2]</a></dt>
<dd>Page description. Lorem ipsum dolor sit amet, consectetur adipiscing elit</dd>
<dt><a href="section3-en.html">[Page 3]</a></dt>
<dd>Page description. Lorem ipsum dolor sit amet, consectetur adipiscing elit</dd>
<dt><a href="section4-en.html">[Page 4]</a></dt>
<dd>Page description. Lorem ipsum dolor sit amet, consectetur adipiscing elit</dd>
<dt><a href="section5-en.html">[Page 5]</a></dt>
<dd>Page description. Lorem ipsum dolor sit amet, consectetur adipiscing elit</dd>
<dt><a href="section6-en.html">[Page 6]</a></dt>
<dd>Page description. Lorem ipsum dolor sit amet, consectetur adipiscing elit</dd>
</dl>
</nav>Section page
Main GC Subway element
The GC Subway navigation allows for up to two (2) levels of list items. However, the default and recommended structure is only one (1) level.
<nav class="gc-subway provisional">
<h1>[Service name]</h1>
<ul>
<li><a href="section1-en.html" class="active">[Page 1]</a></li>
<li><a href="section2-en.html">[Page 2]</a></li>
<li><a href="section3-en.html">[Page 3]</a></li>
<li><a href="section4-en.html">[Page 4]</a></li>
<li><a href="section5-en.html">[Page 5]</a></li>
<li><a href="section6-en.html">[Page 6]</a></li>
</ul>
</nav>Document navigation
To be added at the end of your content, before the related information block (if applicable). This navigation is mandatory for section pages.
<nav class="gc-subway-pagination">
<h2 class="wb-inv">Document navigation</h2>
<ul class="pager">
<li class="previous"><a href="#" rel="prev"><span class="wb-inv">Previous: </span>[Page 3]</a></li>
<li class="next"><a href="#" rel="next"><span class="wb-inv">Next: </span>[Page 3b]</a></li>
</ul>
</nav>Related information (optional)
To be added at the end of your content, after the document navigation block. This block is optional. It will be displayed on the right side under the GC Subway navigation on md and lg breakpoints and at the end of the content on xs and sm breakpoints.
<aside class="gc-subway-support">
<h2 class="h3">Related information</h2>
...
</aside>Configuration
| Attribute | Description | Default | Example |
|---|---|---|---|
| data-sections-title | Text used for the dynamically created title visible above the subway navigation on md and lg breakpoints. |
"Sections" |
data-sections-title="My sections" |
Schema
- Title, type: string
- Subtitle, type: string (optional)
- Sections, type: array
- Title, type: string
- Url, type: string
- Description, type: string
- Sub-section, type: array
- Title, type: string
- Url, type: string
- Page content, type: HTML
- Related information, type: object (optional)
- Title, type: string
- Content, type: HTML
Page details
- Date modified: