Support Thread

Adding Custom Menu to the Top Navigation Bar

📅 👤 ASP Playground
Adding Custom Menu to the Top Navigation Bar — APG vNext Guide

This archived community thread from the APG vNext support forum discusses: Adding Custom Menu to the Top Navigation Bar.

About This Topic

You can add a custom menu item to the top navigation bar like the following: adding menu to the end[attachment=custommenuright.png] adding menu to...

Getting Help with APG vNext

APG vNext is a powerful ASP.NET forum and community platform. For questions related to this topic:

If you need direct assistance, the support team is active in the community forum.

Adding a Custom Menu to the APG vNext Top Navigation Bar

The APG vNext top navigation bar is rendered from a skin template file, making it fully customisable without modifying core application code. Adding a custom menu — whether a simple link, a dropdown with sub-items, or a mega-menu — requires editing the skin's header template and optionally adding CSS and JavaScript for dropdown behaviour.

Locating the Navigation Template

In APG vNext, the top navigation bar is rendered from the skin's header.ascx or _header.htm file (location depends on your version and skin). Find it at:

-- APG vNext skin file locations
/skins/[YourSkin]/header.ascx     (version 4.x+)
/skins/[YourSkin]/templates/_header.htm  (version 3.x)

Always work on a copy of the default skin — never edit the default skin directly, as upgrades will overwrite it.

Adding a Simple Navigation Link

To add a single link (e.g., "Resources") to the navigation bar, locate the <ul> element that contains the existing nav items and add a new <li>:

<!-- APG vNext nav bar — add after existing menu items -->
<ul class="apg-nav-menu">
  <li><a href="/community">Forum</a></li>
  <li><a href="/community/Knowledge-Base-f40.aspx">Knowledge Base</a></li>
  <!-- Custom addition: -->
  <li><a href="/resources">Resources</a></li>
</ul>

Adding a Dropdown Menu

For a dropdown sub-menu, APG vNext's default skin includes CSS hooks for the standard hover-reveal pattern. Add the parent item with a nested <ul>:

<li class="apg-nav-dropdown">
  <a href="#" aria-haspopup="true" aria-expanded="false">
    Support ▾
  </a>
  <ul class="apg-nav-submenu">
    <li><a href="/faq.aspx">FAQ</a></li>
    <li><a href="/install.aspx">Install Guide</a></li>
    <li><a href="/upgrade.aspx">Upgrade Guide</a></li>
    <li><a href="/Contact.aspx">Contact Us</a></li>
  </ul>
</li>

CSS for Dropdown Reveal

.apg-nav-dropdown { position: relative; }
.apg-nav-submenu  {
  display:    none;
  position:   absolute;
  top:        100%;
  left:       0;
  background: #fff;
  border:     1px solid #e2e8f0;
  border-radius: 6px;
  min-width:  180px;
  z-index:    100;
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
}
.apg-nav-dropdown:hover .apg-nav-submenu { display: block; }
.apg-nav-submenu li a {
  display: block;
  padding: .5rem 1rem;
  color:   #0f1a2b;
}
.apg-nav-submenu li a:hover { background: #f1f5f9; }

Making the Dropdown Keyboard Accessible

// Toggle dropdown on Enter/Space for keyboard users
document.querySelectorAll('.apg-nav-dropdown > a').forEach(toggle => {
  toggle.addEventListener('keydown', (e) => {
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      const expanded = toggle.getAttribute('aria-expanded') === 'true';
      toggle.setAttribute('aria-expanded', !expanded);
      toggle.nextElementSibling.style.display = expanded ? 'none' : 'block';
    }
  });
});

Mobile Navigation for Custom Menu Items

Dropdown menus require additional handling on mobile, where hover states don't exist. APG vNext's default skin includes a hamburger menu toggle for mobile; custom items added to the navigation are automatically included in the mobile menu if they are inside the main <ul class="apg-nav-menu"> element.

Ensuring Mobile Compatibility

/* Custom menu items should be styled consistently with APG vNext mobile nav */
@media (max-width: 768px) {
  .apg-nav-menu li.custom-item {
    width:      100%;
    border-top: 1px solid rgba(255,255,255,.1);
  }
  .apg-nav-menu li.custom-item > a {
    padding: .75rem 1.25rem;
    display: block;
  }
  /* Mobile dropdown: expand instead of reveal on hover */
  .apg-nav-dropdown:hover .apg-nav-submenu {
    display: none; /* Disable hover on mobile */
  }
  .apg-nav-dropdown.open .apg-nav-submenu {
    display: block;
    position: relative;
    box-shadow: none;
    background: rgba(0,0,0,.1);
  }
}

Touch-Friendly Dropdown Toggle

// On mobile, tap the dropdown toggle to open/close instead of hover
document.querySelectorAll('.apg-nav-dropdown > a').forEach(toggle => {
  toggle.addEventListener('click', function(e) {
    if (window.innerWidth < 769) {
      e.preventDefault();
      this.parentElement.classList.toggle('open');
    }
  });
});

// Close dropdowns when tapping elsewhere
document.addEventListener('click', function(e) {
  if (!e.target.closest('.apg-nav-dropdown')) {
    document.querySelectorAll('.apg-nav-dropdown.open')
      .forEach(el => el.classList.remove('open'));
  }
});

Adding a Custom Nav Item Pointing to a Dev Guide

If you've added a /dev/ section to your APG vNext site (as a bridge to developer-focused content), adding it to the navigation increases discoverability without requiring members to know the URL:

<!-- Add a "Dev Guides" item to APG vNext navigation -->
<li class="apg-nav-item custom-item">
  <a href="/dev/">Dev Guides</a>
</li>

<!-- Or as a dropdown with sub-items: -->
<li class="apg-nav-dropdown custom-item">
  <a href="/dev/" aria-haspopup="true">Dev Guides ▾</a>
  <ul class="apg-nav-submenu">
    <li><a href="/dev/live-score-website-aspnet-community">Live Score App</a></li>
    <li><a href="/dev/video-player-module-aspnet-community">Video Player</a></li>
    <li><a href="/dev/">All Guides →</a></li>
  </ul>
</li>

Upgrading Custom Navigation Across APG vNext Versions

Custom skin modifications need to be re-applied after each APG vNext upgrade if the skin's header template was updated. Maintain a diff file of your customisations so you can reapply them quickly after upgrading. The safest approach is to create a child skin that extends the default skin — when the default skin updates, your child skin's overrides still apply without needing to be merged manually.

Related Resources

Looking for more help? Browse the support forum or check the Knowledge Base.