How to add custom items to the workspace dropdown

By default, the workspace dropdown shows only available workspaces. However, you can use custom JavaScript to add items, such as "API Documentation," or external resource links, directly to this dropdown menu to improve navigation.

Prerequisites

• Access to Settings in the Knowledge base portal
• The URL where your custom item should link to (must be on the same domain as your knowledge base)

Steps

1. Access Custom JavaScript settings

1. Go to Settings in the left navigation bar.
2. Navigate to Knowledge base site > Site customization > Custom CSS & JavaScript.
3. Select the JavaScript tab.

2. Paste the code

Copy and paste the following code into the JavaScript text area:

document.addEventListener('click', (e) => {
  if (e.target.closest('#projectVersiondropdown')) {
    setTimeout(() => {
      const dropdownMenu = document.querySelector('.project-version-dropdown .dropdown-menu');

      if (dropdownMenu && !dropdownMenu.querySelector('.custom-api-docs-item')) {
        const existingItem = dropdownMenu.querySelector('.dropdown-item');
        const newItem = document.createElement('button');

        newItem.className = existingItem ? existingItem.className : 'dropdown-item';
        newItem.classList.add('custom-api-docs-item');
        newItem.textContent = 'API Documentation'; // Change this to your item label

        const isOnApiDocsPage = window.location.href.includes('/apidocs');

        if (!isOnApiDocsPage) {
          newItem.classList.remove('active', 'selected');
          const tick = newItem.querySelector('.check-icon, .fa-check, svg');
          if (tick) tick.style.display = 'none';
        }

        newItem.addEventListener('click', () => {
          window.location.href = 'https://your-domain.com/apidocs/'; // Replace with your URL
        });

        dropdownMenu.appendChild(newItem);
      }
    }, 50);
  }
});

3. Customize for your site

Make the following two changes in the code:

a. On the line with newItem.textContent — change 'API Documentation' to your desired label (what appears in the dropdown):

newItem.textContent = 'Release Notes'; // Example

b. On the line with window.location.href — replace 'https://your-domain.com/apidocs/' with your actual URL:

window.location.href = 'https://docs.yourdomain.com/release-notes/';

4. Save and test

1. Select Save.
2. Go to your Knowledge base site and select the workspace dropdown to verify the new item appears.
3. Select your custom item to verify it navigates to the correct location.

Examples of correct URLs

• https://docs.yourdomain.com/apidocs/
• https://documentation.company.com/api-reference/

Examples of incorrect URLs (avoid these)

• https://docs.yourdomain.com /apidocs/ — extra space
• http://docs.yourdomain.com/apidocs/ — http instead of https
• https://external-site.com/apidocs/ — different domain

The code redirects users to whatever URL you specify. If you paste an incorrect or malicious URL, readers may be taken to an unexpected destination. Always test the link after adding this code to verify it works correctly.

Troubleshooting

The custom item stops working after a Document360 update

If the custom item was working but suddenly disappears or the code stops functioning after Document360 releases an update:

1. This may indicate Document360 changed the internal dropdown structure.
2. The CSS selectors in the code (such as .project-version-dropdown) may have changed.
3. Contact Document360 support with details: which version you're running and when it stopped working.
4. Support can provide an updated code snippet compatible with the new version.

The custom item doesn't appear in the dropdown

1. Clear your browser cache and refresh the page.
2. Check your browser's developer console (F12 > Console) for error messages.
3. Verify that the JavaScript was saved successfully.

The item appears, but the link doesn't work

1. Check that the URL you pasted is correct and accessible.
2. Verify you're using https:// (not http://).
3. Test the URL directly in your browser address bar to confirm it works.
4. Ensure the URL uses the same domain as your knowledge base.

Can I add multiple custom items?

Yes. You can add multiple items by repeating the code block and making specific changes for each item.

For each new item, you must change:

1. The class name — Change .custom-api-docs-item to a unique class name for each item:
   • First item: .custom-api-docs-item
   • Second item: .custom-release-notes-item
   • Third item: .custom-changelog-item
   • Each must be different.
2. The label — Change the textContent value to your item's name.
3. The URL — Change the window.location.href to the destination link.

Example: Adding two items (API Docs + Release Notes)

// First item: API Documentation
document.addEventListener('click', (e) => {
  if (e.target.closest('#projectVersiondropdown')) {
    setTimeout(() => {
      const dropdownMenu = document.querySelector('.project-version-dropdown .dropdown-menu');
      if (dropdownMenu && !dropdownMenu.querySelector('.custom-api-docs-item')) {
        const existingItem = dropdownMenu.querySelector('.dropdown-item');
        const newItem = document.createElement('button');
        newItem.className = existingItem ? existingItem.className : 'dropdown-item';
        newItem.classList.add('custom-api-docs-item');
        newItem.textContent = 'API Documentation';
        
        const isOnApiDocsPage = window.location.href.includes('/apidocs');
        if (!isOnApiDocsPage) {
          newItem.classList.remove('active', 'selected');
          const tick = newItem.querySelector('.check-icon, .fa-check, svg');
          if (tick) tick.style.display = 'none';
        }
        
        newItem.addEventListener('click', () => {
          window.location.href = 'https://docs.yourdomain.com/apidocs/';
        });
        dropdownMenu.appendChild(newItem);
      }
    }, 50);
  }
});

// Second item: Release Notes
document.addEventListener('click', (e) => {
  if (e.target.closest('#projectVersiondropdown')) {
    setTimeout(() => {
      const dropdownMenu = document.querySelector('.project-version-dropdown .dropdown-menu');
      if (dropdownMenu && !dropdownMenu.querySelector('.custom-release-notes-item')) {
        const existingItem = dropdownMenu.querySelector('.dropdown-item');
        const newItem = document.createElement('button');
        newItem.className = existingItem ? existingItem.className : 'dropdown-item';
        newItem.classList.add('custom-release-notes-item');
        newItem.textContent = 'Release Notes';
        
        const isOnReleaseNotesPage = window.location.href.includes('/release-notes');
        if (!isOnReleaseNotesPage) {
          newItem.classList.remove('active', 'selected');
          const tick = newItem.querySelector('.check-icon, .fa-check, svg');
          if (tick) tick.style.display = 'none';
        }
        
        newItem.addEventListener('click', () => {
          window.location.href = 'https://docs.yourdomain.com/release-notes/';
        });
        dropdownMenu.appendChild(newItem);
      }
    }, 50);
  }
});

How to use this example

1. Paste both code blocks into the same JavaScript text area in Custom CSS & JavaScript settings.
2. Update the URLs for both items: change https://docs.yourdomain.com/apidocs/ and https://docs.yourdomain.com/release-notes/ to your actual domains.
3. Update the item labels if needed: change 'API Documentation' and 'Release Notes' to your preferred names.
4. Make sure each item has a unique class name (such as .custom-api-docs-item, .custom-release-notes-item) to avoid conflicts.

Things to remember:

1. Each item needs a different class name — do not reuse the same class name for multiple items.
2. Test after adding — verify both items appear and work correctly.
3. Performance consideration — adding more than 3–4 custom items may affect dropdown performance.
4. Same domain only — all URLs must be on the same domain as your knowledge base.

If you need to add custom items beyond 3–4 items, or if this approach becomes complex, consider raising a feature request at https://feedback.document360.com/.