Skip to content

Apply Tabler dropdown-item-icon spacing class to icons in the User menu #20608

@pheus

Description

@pheus

NetBox version

v4.4.4

Feature type

Change to existing functionality

Proposed functionality

In the User dropdown (top‑right), add Tabler’s dropdown-item-icon class to each menu icon to ensure consistent spacing between the icon and its label. This affects:

  • Profile
  • Bookmarks
  • Subscriptions
  • Preferences
  • API Tokens
  • Log Out (if rendered with an icon element)

Markup example

Before

<a class="dropdown-item" href="#">
  <i class="mdi mdi-account"></i> {% trans "Profile" %}
</a>

After

<a class="dropdown-item" href="#">
  <i class="dropdown-item-icon mdi mdi-account"></i> {% trans "Profile" %}
</a>

dropdown-item-icon standardizes icon size and spacing for dropdown items.

Use case

  • Improves visual consistency across all items in the User menu.
  • Reduces visual noise (especially in dark theme) and keeps emphasis on labels.
  • Aligns with Tabler’s recommended pattern for dropdowns with icons.

Database changes

None.

External dependencies

None.

Additional context
Attach screenshots demonstrating the improvement:

Before
Image

After
Image

Metadata

Metadata

Assignees

Labels

complexity: lowRequires minimal effort to implementstatus: acceptedThis issue has been accepted for implementationtype: featureIntroduction of new functionality to the application

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions