[Feat] UI - Add Open in New Tab on leftnav Bar

[ishaan-jaff]

[Feat] UI - Add Open in New Tab on leftnav Bar

Relevant issues

Pre-Submission checklist

Please complete all items before asking a LiteLLM maintainer to review your PR

• I have Added testing in the tests/test_litellm/ directory, Adding at least 1 test is a hard requirement - see details
  Note: Existing UI tests were verified to ensure no regressions, but no new tests were added for this specific UI feature.
• My PR passes all unit tests on make test-unit
• My PR's scope is as isolated as possible, it only solves 1 specific problem
• I have requested a Greptile review by commenting @greptileai and received a Confidence Score of at least 4/5 before requesting a maintainer review

CI (LiteLLM team)

CI status guideline:

• 50-55 passing tests: main is stable with minor issues.
• 45-49 passing tests: acceptable but needs attention
• <= 40 passing tests: unstable; be careful with your merges and assess the risk.

• Branch creation CI run
  Link:

• CI run for the last commit
  Link:

• Merge / cherry-pick CI run
  Links:

Type

🆕 New Feature

Changes

This PR enhances the dashboard's left navigation by wrapping menu items in native <a> tags. This allows users to open navigation links in new tabs using standard browser interactions (e.g., Ctrl/Cmd+click, middle-click, or right-click "Open link in new tab"), while still maintaining fast SPA navigation for regular clicks.

---

  

[cursor]

Cursor Agent can help with this pull request. Just @cursor in comments and I'll start working on changes in this branch.
_{Learn more about Cursor Agents}

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
litellm	Error		Mar 4, 2026 3:56am

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you sign our Contributor License Agreement before we can accept your contribution.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[greptile-apps]

Greptile Summary

This PR wraps sidebar navigation labels in <a> tags across both Sidebar2.tsx and leftnav.tsx to enable right-click "Open in new tab" and Ctrl/Cmd+click behavior, while preserving SPA navigation for normal clicks. It also adds a dev_config.yaml for local proxy development.

• Nav link anchors: Both sidebar components now use a renderNavLink helper that wraps menu item labels in <a> tags with proper href values. Normal clicks call preventDefault() to let existing SPA navigation handle routing, while modifier-key clicks (Ctrl/Cmd/Shift) and middle-clicks allow default browser behavior for new-tab opening.
• Parent submenu bug: renderNavLink is applied to all items including parent submenu containers (Tools, Experimental, Settings) that are not navigable pages — their hrefs point to non-existent routes, causing 404s when opened in a new tab.
• Dev config: A new dev_config.yaml with dummy credentials is committed but not gitignored, which could lead to accidental credential leaks if contributors modify it with real values.

Confidence Score: 3/5

• Low-risk UI change but has a functional bug with parent submenu items generating invalid links
• The core idea is sound and the implementation mostly works, but parent submenu items (Tools, Experimental, Settings) incorrectly get anchor tags pointing to non-existent routes in both sidebar components. This will result in 404 pages when users right-click and open these items in new tabs. The dev_config.yaml should also be gitignored.
• Both ui/litellm-dashboard/src/app/(dashboard)/components/Sidebar2.tsx and ui/litellm-dashboard/src/components/leftnav.tsx need the parent-submenu anchor fix. dev_config.yaml should be added to .gitignore.

Important Files Changed

Filename	Overview
dev_config.yaml	New dev config file with dummy credentials; should be added to .gitignore to prevent future accidental credential commits.
ui/litellm-dashboard/src/app/(dashboard)/components/Sidebar2.tsx	Adds renderNavLink wrapping menu labels in anchor tags for open-in-new-tab support; parent submenu items incorrectly get href links to non-existent routes.
ui/litellm-dashboard/src/components/leftnav.tsx	Same renderNavLink pattern as Sidebar2.tsx with external URL support; parent submenu items also incorrectly wrapped with anchor tags pointing to non-page routes.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[User clicks nav item] --> B{Modifier key held?<br/>Ctrl/Cmd/Shift/Middle-click}
    B -->|Yes| C[stopPropagation + allow default]
    C --> D[Browser opens href in new tab]
    B -->|No| E[preventDefault on anchor]
    E --> F{Has children?}
    F -->|Yes| G[Ant Menu toggles submenu]
    F -->|No| H[onClick fires goTo/navigateToPage]
    H --> I[SPA navigation]
    
    D --> J{Is parent item?<br/>Tools/Experimental/Settings}
    J -->|Yes| K[❌ 404 - route doesn't exist]
    J -->|No| L[✅ Page loads correctly]

Loading

_{Last reviewed commit: fe22345}

[greptile-apps]

Dev config should be gitignored

This file contains a master_key and api_key. While these are clearly dummy/fake values, committing dev config files to the repo creates a risk pattern — contributors may update this file with real credentials. The .gitignore already excludes config.yaml and various other config files, but dev_config.yaml is not listed.

Consider adding dev_config.yaml to .gitignore to prevent accidental credential leaks.

[greptile-apps]

Parent submenu items get invalid hrefs

renderNavLink is called for all items including parent submenu containers like "Tools" (page: "tools") and "Experimental" (page: "experimental"). These slugs have no entry in routeFor, so they fall through to the default case and produce hrefs like /tools or /experimental — routes that don't correspond to real pages. While normal clicks are fine (parent items expand the submenu and onClick is undefined), right-click "Open in new tab" will navigate to a 404.

Consider skipping the <a> wrapper for items that have children, since they're not navigable:

Suggested change

	label: renderNavLink(item.label, item.page),
	label: item.children ? item.label : renderNavLink(item.label, item.page),

[greptile-apps]

Parent submenu items get invalid hrefs

Same issue as in Sidebar2.tsx — renderNavLink is called for parent items like "Tools", "Experimental", and "Settings" that have children. Right-clicking these and opening in a new tab will navigate to ?page=tools / ?page=experimental, which are submenu containers, not real pages.

Consider skipping the <a> wrapper for items that have children:

Suggested change

	label: renderNavLink(item.label, item.page, item.external_url),
	label: item.children ? item.label : renderNavLink(item.label, item.page, item.external_url),