Polaris-react: Main navigation is unresponsive and unclear

Created on 7 Oct 2020  路  1Comment  路  Source: Shopify/polaris-react

The design of the main navigation was crammed into a too tight schedule and never got the attention it deserves. Meanwhile, it's fair to assume that it's one of the components that merchants interact with the most. It's the face of admin 鈥搃t _needs_ to be world class.

Analysis:

  • The dynamics of hover, pressed, and active states + the active indicator are not clear or connected enough and create a scattered experience
  • Parent without children, parents with children, and child items all look different when active which makes it hard to set expectations
  • Navigating between two parent items causing one or two sub menus to open/close creates a sudden and unexpected layout change
  • Cursor flashes between pointer and default when hovering over last child and the parent below it.

Fix:

  • Dedicated design effort

main-nav-issues

Most helpful comment

The vertical alignment of navigation item badges is wrong too. The badge should be vertically centered

Screenshot 2020-10-07 at 18 52 16

Here is a simple code sample showing the problem: https://codesandbox.io/s/shopify-polaris-navigation-badge-vertical-alignment-bug-hdx8c

>All comments

The vertical alignment of navigation item badges is wrong too. The badge should be vertically centered

Screenshot 2020-10-07 at 18 52 16

Here is a simple code sample showing the problem: https://codesandbox.io/s/shopify-polaris-navigation-badge-vertical-alignment-bug-hdx8c

Was this page helpful?
0 / 5 - 0 ratings