Nav: Sub-section Nav

This component creates tabs that let users see an overview of content and jump to sections they are interested in.

Sample text so we can see how the sub-nav works for content 1.

Sample text so we can see how the sub-nav works for content 2.

Sample text so we can see how the sub-nav works for content 3.

Usage Criteria

This component allows users to quickly see an overview of different sections of content. Once a tab is clicked, they can jump to the position of the page where that content starts.

This allows the user to avoid scrolling through the entire page if they already know what information they are interested in. 

Do's and Don'ts

  • Use this component for long pages that have a lot of content. If the page is short, this component may not be necessary.
  • Continue to provide headers within each section, even though they may already be mentioned in the Nav: Sub-section Nav component. If not, a user scrolling through would have trouble finding where a section begins and ends.

Design Notes

This component is good for information that authors want most users to read, or information that is important. If the content is shorter and may not be relevant to most users, consider using the Content Block: Accordion component instead, so users have the option to show or hide information and the component will take up less space.

Configurable Options

This component is configured using multiple instances of the Structure: Section Container component. Each section container will specify the Section title anchor that is then used by the Nav: Sub-section Nav to autopopulate the tabs labels and jump to the right position on the page after the tab is clicked.

Developer Notes

Type
Name
AEM Component Name

Nav: Sub-section Nav

Code Base Name

subsection-nav

resourceSupertype
 
SCSS Attributes

subsection-nav.scss

JavaScript

subsection-nav.js

Status

Released (RC 1)

Version

Code Base v1.0

Designer Notes

Type
Name
Sketch Component Name

BCLC_Corporate_Designs/components/navigation/sub-section-nav

Sketch Responsive Sizes

Desktop HD, Desktop, Tablet, Mobile

Status

Released (Master)

Version

Design 1.0