Guidelines for AEM Components
Sub-Navigation Components
- Select
- All
- Category Navigation Component
- Sub-navigation Component
- Sticky Sub-Navigation Component
- PBU TOC Component
Category Navigation Component
The Category Navigation Component provides access to lower-level categories that give more specific content within a section.
Settings
Basic
- Navigation Headline
- Enter the label for the component headline.
Content
Navigation Configuration
We can configure the navigation menu here.
- Link Text
- It is visible on page as navigation menu name.
- Link
- We can add here the destination URL for the menu.
- It can be external/internal/a particular section on a page.
- Link Title
- This will displayed when we hovering over the link/menu.
- Best practice to add link title for accessibility and SEO.
- This page is selected as current?
- It has two option Yes/No in dropdown.
- We have to select no for the other pages except the current one.
- Once we make the current one as Yes then a blue bar is visible on the menu. That means it is a current page.
Yes or No Action
- Top Gap?
- Add space above the component.
- No Gap?
- Remove space below to the component.
- Secondary Color Scheme (Pink)?
- .It enables the pink color schemeto the menu text.
- White Background?
- The component has gray background by default.
- If we check this option background color will be white of the navigation.
Example
Sub-Navigation Component
The Sub-Navigation Component allows for easy access to different pages of a specific section of the site. This specific component can be customized with either a logo or a headline to fit the overall design of a section and can even include dropdown menus for more options.
Settings
Logo
- It is shown at the center of the sub navigation above to the navigation menu and will stick at the top of the page on scroll of the page.
- Logo Image Dimension :- 60px high - *MUST* be SVG format.
Logo Text
- It is optional.
- If we add this logo text it will appear on a blue green gradient image which we can not change the gradient color.
- It will stick at the top of the page on scroll of the page.
- We can not use both logo and logo text in a single component if we do so it will visible only the logo text on page but the logo will be hide on the page.
Logo image alt text
- If we are uploading a logo then the alt text is required.
- It is accessed by SEO.
Note:-
We have to add Logo / Logo text compulsory to configure the Sub-Navigation component.
Content
Navigation Configuration
We can configure the navigation menu here.
- Link Text
- It is visible on page as navigation menu name.
- Link
- We can add here the destination URL for the menu.
- It can be external/internal/a particular section on a page.
- Link Title
- This will displayed when we hovering over the link/menu.
- Best practice to add link title for accessibility and SEO.
- This page is selected as current?
- It has two option Yes/No in dropdown.
- We have to select no for the other pages except the current one.
- Once we make the current one as Yes then a blue bar is visible on the menu. That means it is a current page.
Yes or No Action
- White Background?
- If we check this option background color will be white of the navigation.
Examples
Example 1 :- Logo Implemented
Example 2 :- Logo Text Implemented
Example 3 :- Logo Text Implemented in white background
Sticky Navigation Component
Designed for long PDPs, the Sticky Sub-Navigation Component includes up to four anchor links to specific parts of the PDP and the primary CTA.
PBU TOC Component
The PBU TOC (Table of Contents) Component provides a page overview and direct access to specific sections. Placed in the left rail, this component provides a seamless user experience for long-form pages, such as SEO pages.
Item 1
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Item 2
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Item 3
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Item 4
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Item 5
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Item 6
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Item 7
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Settings
Configuration
- Unique ID
- This is auto-generated and populated after saving. Can be edited as needed.
Basic
- TOC Navigation Label
- Enter the label for the component Label.
- TOC Heading Level
- DIV
- H2
- H3
- H4
- H5
- H6
TOC Content
- TOC Heading Text
- It is used for heading for this TOC.
- TOC Short Text
- We can put a short text/name for the TOC item.
- No spaces, must start with letter, only dashes.
Yes or No Action
- Top Gap?
- Adds a gap to the top of the component separating it from the top of the page or a prior component.
- No Gap?
- Removes the bottom margin separating modules.
Note:-
- TOC content acts as a container. We can put other components into it. Except other components we can use text and standalone image component for better layout in this module.