Skip to content

[Feature] UI - Leftnav: Add external link icon to Learning Resources#24069

Merged
yuneng-jiang merged 1 commit intolitellm_yj_march_18_2026from
litellm_leftnav_external_icon
Mar 19, 2026
Merged

[Feature] UI - Leftnav: Add external link icon to Learning Resources#24069
yuneng-jiang merged 1 commit intolitellm_yj_march_18_2026from
litellm_leftnav_external_icon

Conversation

@yuneng-jiang
Copy link
Copy Markdown
Contributor

@yuneng-jiang yuneng-jiang commented Mar 19, 2026

Summary

Problem

The "Learning Resources" nav item opens an external page but has no visual indicator distinguishing it from internal navigation links.

Fix

Added an ExportOutlined antd icon next to nav labels that have an external_url, so users can tell at a glance that the link opens in a new tab.

Testing

  • Verified the icon renders next to "Learning Resources" in the left nav
  • Icon applies generically to any nav item with external_url

Type

🆕 New Feature

@yuneng-jiang @claude
[Feature] UI - Leftnav: Add external link icon to Learning Resources
d984b29 
Add ExportOutlined icon next to nav items that link to external pages,
making it clear to users when a link opens in a new tab.

Co-Authored-By: Claude Opus 4.6 (1M context) <[email protected]>
@vercel
Copy link
Copy Markdown

vercel bot commented Mar 19, 2026 •
edited
Loading

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

Project Deployment Actions Updated (UTC)
litellm Ready Ready Preview, Comment Mar 19, 2026 0:58am

Request Review

@greptile-apps
Copy link
Copy Markdown
Contributor

greptile-apps bot commented Mar 19, 2026

Greptile Summary

This PR adds a small ExportOutlined antd icon next to the label of any left-nav item that has an external_url, making it visually clear to users that the link opens in a new tab. Currently the only affected item is "Learning Resources" (pointing to https://models.litellm.ai/cookbook), but the implementation is generic and will automatically apply to any future nav item that sets external_url.

  • The icon is rendered inside the existing <a> wrapper returned by renderNavLink, so it inherits the link's colour and inherits correct click/keyboard behaviour.
  • The change is correctly scoped to the externalUrl branch of renderNavLink and does not affect internal SPA navigation items.
  • Only one minor accessibility gap was found: the decorative icon is missing aria-hidden="true", which could produce unhelpful announcements for screen-reader users.

Confidence Score: 5/5

  • Safe to merge — the change is a one-line UI addition with no logic, routing, or API impact.
  • The diff touches only the label rendering path for external-URL nav items, which is a purely presentational change. No business logic, API calls, or routing is affected. The single issue (missing aria-hidden) is a minor accessibility best practice, not a functional bug.
  • No files require special attention.

Important Files Changed
Filename Overview
ui/litellm-dashboard/src/components/leftnav.tsx Adds ExportOutlined antd icon next to the label of any nav item with an external_url (currently only "Learning Resources"). The change is minimal and well-scoped; only a missing aria-hidden on the decorative icon is worth addressing.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A["renderNavLink(label, page, externalUrl?)"] --> B{externalUrl set?}
    B -- Yes --> C["Render &lt;a href=externalUrl target=_blank&gt;"]
    C --> D["label text + ExportOutlined icon ✨"]
    B -- No --> E["Render &lt;a href=?page=...&gt;"]
    E --> F["label text only"]
Loading

Last reviewed commit: "[Feature] UI - Leftn..."

greptile-apps[bot]
greptile-apps bot reviewed Mar 19, 2026
View reviewed changes
Comment thread ui/litellm-dashboard/src/components/leftnav.tsx
style={{ color: "inherit", textDecoration: "none" }}
>
{label}
{label} <ExportOutlined style={{ fontSize: 10, marginLeft: 4 }} />
Copy link
Copy Markdown
Contributor

@greptile-apps greptile-apps bot Mar 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Icon missing aria-hidden for screen readers

The ExportOutlined icon is purely decorative — its meaning is already conveyed by the target="_blank" on the surrounding <a> and (for screen readers) can be announced via rel="noopener noreferrer". Without aria-hidden="true", assistive technologies may attempt to announce the icon as an unnamed interactive element, producing confusing output like "icon" or nothing at all.

Suggested change
{label} <ExportOutlined style={{ fontSize: 10, marginLeft: 4 }} />
{label} <ExportOutlined aria-hidden="true" style={{ fontSize: 10, marginLeft: 4 }} />

@yuneng-jiang yuneng-jiang merged commit e8e4d9f into litellm_yj_march_18_2026 Mar 19, 2026
56 of 65 checks passed
@ishaan-berri ishaan-berri deleted the litellm_leftnav_external_icon branch March 26, 2026 22:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

1 more reviewer

@greptile-apps greptile-apps[bot] greptile-apps[bot] left review comments

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@yuneng-jiang