Guide to Web Publishing

Scrolling nav

Add multiple tabs of content

Use the tab 1 content here to add useful information, which the scrolling nav will piece together with a right side navigation on the page.  You can scroll down here to read more, or use the navigation menu to jump to each item.

On mobile view, this content collapses to accordions.

Read More About the other t4 content types

tab 2 heading - add another section

Your can add more content to this next tab/content field in t4 to create another entry for the navigation.

This can be useful for grouping some related items related items on a page, especially when the content is fairly long and the navigation will make it easier to find information on the page.  You can add the usual content features, including lists and calls to action:

  1. Start list item
  2. Middle list item
  3. End list item

I want to read about writing for the web

Additional text under a call to action - try not to make each tab section too long, it's best to break text and other content into smaller chunks.

tab 3 heading - another item for the scrolling nav menu

You may have noticed that when you scroll down, the navigation on the right scrolls down with the page, hence the name.

I am a call to action, use me to highlight important links

  • The information above links to the t4 standard content page
  • Scroll down to find the information on the call to action option
  • Call to action is available in the t4 editor in most content fields, including scrolling nav
  • Using a mix of options like this on a page is useful for highlighting important links to other pages
(there is also this plain text content option for each tab)

tab 4 heading

Tab 4 content with h3 header

Use headers to split large chunks of text as shown in our writing for the web guidance.  Pages default with an h1 header (from the section name in t4), with h2 the heading for the scrolling nav content type taken from the content heading field above, so h3, h4 and h5 are the only options in the editor.

Tab 4 content with h4 header

This next item of text content is using an h4 header, the next option down from an h3.  Headers are selected using the menu option in the editor above, which defaults to say Paragraph.

Another h4 header item

This is default paragraph text, using a second h4 header above.  It's important never jump from header 3 to header 5.  Always make your headers nested, to comply with accessibility guidance on header ranking.

You can use Siteimprove to identify page headers, or select View > Source code in the editor. 

In html source code, headers look like this: <h3>header text</h3>, always with an opening and closing tag wrapped around text.  Don't leave empty headers in your t4 content:

Last header - h5

One final item using a smaller h5, so you can see the different header sizes. When you add headers to a page, the option to change them is in the drop down menu of the editor above and to the right, previously located in the styles menu.

We'll add a call to action underneath to show the important last step of the user journey on the page.

This is our call to action - to login to t4

One final note - 7 tabs to use

There are 7 tab fields in total for you to add to the scrolling nav content type.  If you require more than this, you should think about a different way to display your content in t4.

Below is a new drone shot of Gilmorehill from the t4 shared media library, as an example of an image added to the content.  The shared library is a useful group of folders in the t4 media library that everyone has access to, with 700x300 navigation tile images, splash images and more.

An aerial drone shot of the Gilbert Scott Building during sunrise