Anchor navigation component

Guidelines

• Set the anchors first, then insert the anchor navigation near the top of the page, ahead of the first anchor.
• You should link to at least two anchors on a page.
• By default, the anchor navigation display is horizontal. To display a vertical list, simply use the checkbox to switch to vertical.

Design options

There are four design options that can be used with the horizontal anchor navigation:

• No background: displays with white background (default is very light grey)
• With border: displays with a fine top line
• Centre align: centers the navigation bar with respect to the main column width
• Left padding: slightly indents the first item from the left edge

There are three design considerations for the vertical anchor navigation:

• Navigation title: vertical anchor navigation mode requires a title for the list
• Title colour: 
  • Black (use on white, light grey or tinted backgrounds)
  • Burgundy (only use on white or light grey tinted backgrounds) 
  • White (use on a primary colour and dark backgrounds)
• No top padding: removes padding above the above navigation

Examples & use cases

Click Add item for each anchor in the navigation; give it a Title (label) and use the anchor id in the Anchor link field.

• The Anchor link field must be the same as the anchor id.

Set the display options as required.

Horizontal anchor navigation component shown with default settings (grey background).

Horizontal anchor navigation component shown with no background and borders.

Horizontal anchor navigation component shown with center alignment with respect to the 940px grid.

Horizontal anchor navigation component shown with default grey background and left indent with respect to the 940px grid.

Vertical anchor navigation component shown with title and link colour options on different backgrounds.

Training

Advanced training.