Need to Add Dropdown Caret for Subcategories in Employee Center Mega Menu

RG52
Tera Contributor

3 weeks ago

Mega menu.pngHighRiskWidget.png
 

Background

Hi Community,

I’m working on a customization in Employee Center involving the mega menu and I need some technical guidance from anyone who has extended the OOB navigation components to add a drop down caret to the subcategory of mega menu.
 

The caret logic is controlled by the OOB Employee Center Navigation widget, which is flagged as:

  • High‑Risk (may not receive updates if modified)
  • Read‑only / Protected by platform security
  • Used heavily across Employee Center

Because of these restrictions, I’m trying to determine the safest way to implement this customization.

 

Is it feasible and supported to customize or clone the Employee Center Navigation widget specifically to adjust the logic that determines whether a caret should appear for sub‑categories?

 

Additional Clarifications I’m Looking For

  • Does cloning this widget cause upgrade‑compatibility problems in Employee Center?
  • Has anyone successfully overridden the caret logic (e.g., hasChildItems(item)) through safe customization of "Employee Center Navigation" widget.

 

Any guidance on whether customizing the widget is advisable—or if there’s a more upgrade‑safe alternative—would be greatly appreciated.

 

 Thank you!

 
0 Helpfuls
  • 207 Views
1 REPLY 1

ayushraj7012933
Mega Guru

3 weeks ago

 

Hi   ,

You’re absolutely right to be cautious here — since the Employee Center Navigation widget is OOB and marked high-risk, we should follow an upgrade-safe approach first, and only go for cloning if required.

Step-by-Step Approach

Step 1: Verify Menu Hierarchy (Most Important)

Before any customization, check if your subcategories are configured correctly.

  1. Navigate to:

    • Employee Center → Navigation → Menu Items

  2. Open your parent category

  3. Ensure:

    • Subcategories are added as Child Menu Items

    • Proper parent-child relationship exists

The caret (▼) appears only when the system detects child items

Step 2: Test OOTB Behavior

  • After fixing hierarchy, reload Employee Center

  • Check if caret appears automatically

✔ In many cases, no customization is needed

Step 3: Add Caret via CSS 

If caret is not showing but structure is correct, use CSS:

  1. Go to:

    • Service Portal → Themes → CSS

  2. Add:

 

 
.sn-mega-menu .sn-nav-item.has-children > a::after {
content: " ▼";
font-size: 10px;
margin-left: 5px;
}
 

3.Save and refresh portal

✔ No widget modification
✔ Fully upgrade safe

Step 4: Clone Widget (Only If Logic Change Needed)

If you want to force caret for subcategories, then:

  1. Go to:

    • Service Portal → Widgets

  2. Open:

    • Employee Center Navigation

  3. Click Clone Widget

Step 5: Modify Caret Logic

In the cloned widget:

  1. Search for logic like:

     
    hasChildItems(item)

  2. Modify it:

 

 
item.showCaret = true;
OR condition-based:

 

if (item.type == 'subcategory') {
item.showCaret = true;
}

 Step 6: Replace OOTB Widget

  1. Go to:

    • Employee Center → Portal Configuration

  2. Update Header / Navigation

  3. Replace OOB widget with your cloned widget

 Step 7: Test

  • Reload Employee Center

  • Verify:

    • Caret appears for subcategories

    • Navigation works correctly

0 Helpfuls