• Use Cases: The Sticky Navigation is a fixed bar that can be added to the pages, so it's always visible while the user scrolls through the page, and also has links to sections so the user can click on them to jump to different sections.
• Dependencies
  • None required, but mostly used with AWT Containers. The Sticky Navigation is fully self-contained and does not rely on child items or external data sources to be displayed, but it only makes sense to be added to the page when there are AWT Containers with Anchor field values defined for every Sticky Navigation item (so that each Sticky Navigation item link will jump to the container with the corresponding anchor).

• Always Visible:: The Sticky Navigation is always visible while the user scrolls through the page.
• Configurable Links: The link of each Sticky Navigation item can be configured with a section ID in the page.
• Icons: A Sticky Navigation item can be have an icon if desired.

This paragraph represents the first section example. If you click the Sticky Navigation Example Item 1, you will be redirected to this section.

This paragraph represents the second section example. If you click the Sticky Navigation Example Item 2, you will be redirected to this section.

StickyNav:

StickyNavItem:

Creating a Sticky Navigation Bar

1. In Content Editor, go to the global market folder of yoursite and then to the NavigationItemsFolder item.
   • For example: /sitecore/content/AWTSites/Templates/MarketRepositoryFolder/MarketSharedContentFolder/Global/NavigationItemsFolder)
   • If there's still no NavigationItemsFolder item, you can create one from the NavigationItemsFolder template in the global market folder of your site)
2. Create a new StickyNav item called Sticky Navigation Bar (or any preferable name) from the StickyNav template within the NavigationItemsFolder item in the global market folder of your site.
3. Fill in optional field: Use Divider
4. Create one or more StickyNavItem items from the StickyNavItem template within the StickyNav item created in the previous step.
5. Fill in optional field: Text, Icon, Anchor, etc
6. In Experience Editor, insert the StickyNavigation rendering into the awt-body placeholder of the page.
7. Associate the StickyNav item as the data source.
8. Make sure you have AWT Containers added to the page in which their Anchor field values match the ones from the StickyNavItem items Anchor field values.

• None: There are no variants for this component.

• There are currently no known issues with this component