[5.x]: Visual indication of actively selected main navigation pane item can be difficult to visually identify

[JamieC24]

What happened?

Description

Visual indication of actively selected main navigation pane item can be difficult to visually identify (uses a grey line on the far left towards the edge of the screen. While a visual object has been added to show which of the items is selected, the design is somewhat subtle.

Steps to reproduce

1. Log in to any install of Craft 5
2. Select an option on the Dashboard (i.e Entries)

Expected behavior

Ideally, the visual indicator for an active item would be more clear to the user (similar to the hover effect for each of the navigation items)

Actual behavior

The active item indicator is a grey line on the far left towards the edge of the screen.

Craft CMS version

Craft CMS Pro 5.1.0

PHP version

8.2.18

Operating system and version

MacOS Sonoma 14.4.1

Database type and version

PostgreSQL 15.8

Image driver and version

No response

Installed plugins and versions

CK Editor 4.0.4
Postmark 3.1.0

[gcamacho079]

Hi @JamieC24, thanks for your feedback! We chose the vertical indicator because it meets the requirements for non-text contrast; however, I see how it could be missed very easily since it’s right at the edge of the screen.

In addition to matching the hover style, we’ve played with a couple of different approaches. Do you feel like the following changes would help call more attention to the active item?

• A slight (<3:1 contrast ratio) change in background color
• Updating the text style to be bold
• Maintaining the vertical indicator