Primary Navigation

Synopsis: Website navigation refers to the link structure and hierarchy of a website. The purpose of it is to guide users to where they want to go in as few steps as possible. In addition to user experience, website navigation.

Content Fields:

(Logo) -  Logo Text, Logo Aria Label, Logo Link, Logo Analytics Name

(Links) - Link Text, URL Link for target page, Analytics Name For URL, Bottom CTA Text, Bottom CTA Link, 

(Utility) - Search Icon Text, Placeholder, Country Icon Text, Country Analytics Name, Country Selector Aria Label, Language Text, Locale Text, Login Icon Text, Utility Link Text, Analytics Name

Options:

(Logo) - Logo Image, Logo Link Target *, 

(Links) - Link Target *, Include Submenu(Checkbox), Bottom CTA Target *

(Utility) - Enable Search(Checkbox), Search Endpoint,  Enable Country(Checkbox). Country List URL, List Page URL Link Target *, Enable Language(Checkbox), Enable Login(Checkbox),Utility Link Icon, Utility Link URL, Utility Link Target *

Usage: Experience fragment.

Note: This should be used as an example only.

This page consists of the following authoring steps required to configure the Header Experience Fragment:

  1. Creating and Authoring the Experience Fragment
  2. Authoring the Primary Navigation
  3. Authoring the Secondary Navigation

Step 1:

Creating an Experience Fragment

  1. Navigate to Experience Fragments in AEM.
  2. Browse to: Northstar → en → Header Experience Fragment
  3. Click Create → Variation.
  4. Select Web Experience Fragment Northstar and click Next.
  5. Enter the Title for the experience fragment.
  6. Click Create.
  7. Click Open.
    • The newly created Northstar Experience Fragment page opens in Edit Mode.

Adding and Configuring the Primary Navigation Component

  1. Click the Parsys area within the experience fragment.
  2. Add the Primary Navigation component.
  3. Select the Primary Navigation component and click Edit to configure it.

This will open the component dialog where you can configure the navigation settings as required.

 

 

 

 

 

Step 2

Authoring an Primary navigation component
Ingredients: Primary Navigation Component

Refer to the pre-authored page for the Primary Navigation link configuration: Click here

Logo section authoiring

Header links Authoring

To create a primary navigation link, author the Link Text, which will be displayed in the navigation menu, and either provide a URL for external destinations or select a Target Page for internal site pages. Configure the Link Target setting to determine whether the link opens in the same window or a new window. Additionally, enter a meaningful Analytics Name to enable accurate tracking and reporting of user interactions with the navigation item. Once all required fields have been authored, click Done to save the configuration and publish the navigation link according to the specified settings.

( Adding Secondary Navigation Links:

To add secondary navigation links, author the Link Text for the parent navigation item and select the Include Submenu checkbox. No additional fields, such as URL Link for Target Page, or Link Target, are required for the parent navigation item.

Click Done to save the configuration. Once saved, a parsys will appear below the authored link text. Use this parsys to add and configure the secondary navigation links that should be displayed under the parent navigation item.)

Enable Search and Enable Country 

Step 3

Authoring an Secondary navigation component
Ingredients: Primary Navigation Component,Secondary navigation component, Column control component(50/50), Basic card and SideCar component.

To add secondary navigation items, click the parsys displayed beneath the parent navigation item and add the Secondary Navigation component. Open the component configuration by clicking the Configure (wrench) icon, then use the Add button in the multifield section to create secondary navigation items. For each item, author the Item Text and Analytics Name. After saving the configuration, a dedicated parsys becomes available for each secondary navigation item. Use this parsys to add the components required for the dropdown content. To achieve the expected layout, add a Column Control component and select the 50/50 layout. Once the Column Control is added, separate parsys areas will be available within each column. In the first column parsys, add the required Basic Card (Navigation Variant) components and configure them as needed. In the second column parsys, add a Sidecar component and author the desired content. After all components have been configured, click Done to save the changes. This setup displays the secondary navigation in the expected two-column layout, with Basic Card (Navigation Variant) components on the left and the Sidecar component on the right.

Refer to the pre-authored page for the Primary Navigation link configuration: Click here

Secondary Navigation Authoring

 

Authoring Column control inside Secondary navigation

Authoring Basic card inside 50/50 column control (First 50 column)
Refer to the pre-authored page for the Basic card link configuration: Click here

Authoring SideCar component 

To understand the SideCar component configuration, please refer to this link: Click here