--- title: "How to add custom items to the workspace dropdown" slug: "how-to-add-custom-items-to-the-workspace-dropdown" description: "Enhance your workspace dropdown with custom JavaScript to add links like \"API Documentation\" for better navigation in your Knowledge base portal." updated: 2026-06-22T08:23:56Z published: 2026-06-22T08:23:56Z canonical: "docs.document360.com/how-to-add-custom-items-to-the-workspace-dropdown" --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.document360.com/llms.txt > Use this file to discover all available pages before exploring further. # 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. ![Workspace dropdown with custom item](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image(151).png) :::(Info) (NOTE) This method uses custom JavaScript to achieve the customization. Document360 updates usually maintain backward compatibility, but it's possible DOM structure changes could affect this workaround. ::: --- ## 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: ```javascript 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): ```javascript newItem.textContent = 'Release Notes'; // Example ``` **b.** On the line with `window.location.href` — replace `'https://your-domain.com/apidocs/'` with your actual URL: ```javascript 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. --- :::(Warning) (**Security note: URL validation and open redirect risk**) When you paste your domain URL into the code, ensure it: 1. Matches your actual knowledge base domain (same-origin only) 2. Includes the correct protocol (`https://`) 3. Contains no typos or extra spaces **IMPORTANT — Open redirect risk:** 1. The code redirects users to whatever URL you specify without validation. If you paste an external URL or make a typo, readers may be redirected to: - A malicious site (phishing attacks) - An incorrect destination (user confusion) or a competitor's site (accidentally) 3. Always use the same domain as your knowledge base. Do NOT link to external websites with this code. 4. Always test the link after adding this code to verify it navigates to the correct location on your own domain. ::: --- ### 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)** ```javascript // 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/](https://feedback.document360.com/). ## Related - [How to hide the project's workspace dropdown in the Knowledge base site](/how-to-hide-the-project-versions-dropdown-in-the-knowledge-base-site.md)