Nav: Sub-section Nav
This component creates tabs that let users see an overview of content and jump to sections they are interested in.
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 |