Language selection


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.

See all provisional features.

In order to use the provisional subway map navigation, you will need to complete the following steps:

  1. First, you'll need a <nav> element with both the "provisional" and the "gc-subway" classes. Inside of that <nav>, put your first <h1>; it will be the smaller, gray-ish, upper one.
  2. Add a <ul> next to that <h1>.
  3. Each list item should contain the links to your set of pages targeted by the subway map navigation, as such: <a href="the-link-to-your-page.html">[Page 1]</a> .Optionally, you could offer an SPA feel when the user is on mobile by adding a second hyperlink with an anchor to the first H1, like so: <a href="the-link-to-your-page.html#gc-document-nav" class="visible-xs visible-sm">[Page 1]</a> . If you do go forward with this option, make sure to hide the regular link (the one without the anchor) on small devices with the following class attribute: class="hidden-xs hidden-sm", and the new one to be visible only on small screen devices (as shown in the HTML code snippet above already).
  4. The rest just needs your own main content for that page. Do not forget the navigation buttons at the bottom of the pages. If you want the left column to stop being at 2/3 of the width on desktop at some point, then you can stop the propagation by using any HTML element with a "gc-subway-section-end" class on it; that element needs to be a sibling of your <nav class="gc-subway">.
  5. If you want to use the new bold short red underline underneath your regular H1, then add both the "provisional" and "gc-thickline" classes on it.

See raw code in action by checking out the working example.

Report a problem on this page
Please select all that apply:

Thank you for your help!

You will not receive a reply. For enquiries, please contact us.

Date modified: