← All Demos

excludeItems & triggerButtonContainer

About This Demo

This page demonstrates two FixSiteMenu features: excludeItems filters out specific menu items during automatic extraction (e.g., mobile-only links, utility links), and triggerButtonContainer places the accessible trigger button in a separate container from the menu data source.

Navigation with Excluded Items

⚠ Mouse Only
ⓘ The accessible trigger button will be inserted here (triggerButtonContainer)

Portal Component Fixes Code

Uses excludeItems to remove mobile-only and utility links from the accessible menu, and triggerButtonContainer to place the trigger button above the navigation bar.

fixSiteMenu('#demo-nav-exclude') .menuLabel('Main Navigation') .triggerButtonContainer('#trigger-target') .excludeItems(['.mobile-only', '.utility-link', '#login-link'])

How to Test (after AE JS is loaded)

  1. Press Tab to reach the trigger button. Notice it appears in the blue info bar above the dark navigation — this is because triggerButtonContainer('#trigger-target') was used.
  2. Press Enter to open the menu. The accessible menu should not contain "Contact (Mobile)", "Log In", or "Search" — these were excluded by excludeItems.
  3. Verify the remaining items: Home, Products (with sub-items), Resources (with sub-items), and About.
  4. Press Escape to close.