Adjust icon alignment in the left nav bar about core HOT 5 OPEN

Any movement on this?

from core.

Hi, yes, @lil-kim did some investigation work on the design side and discovered the issue is much more complex than simply fixing the alignment of the icon.

For example, if you have nested grouping with icons and collapse the navigation, the alignment is such that you can still tell which icons are children of other icons:

Long story short - this component is still in beta and we've realized we have much work to do on it to get the experience correct - especially once we start considering other breakpoints besides desktop, which this beta component does not do.

As a workaround, you can apply a margin to the icon to center align it, here is a stackblitz:

cds-navigation-item cds-icon {
  margin-left: var(--cds-global-space-5);
}

from core.

Excellent thanks @ashleyryan for the update.

from core.

Thanks for the update, @ashleyryan!

We don't currently have any nested items in our nav bar so I didn't even notice what was going on with those secondary labels/icons.

There is some angular documentation on clarity.design that seems to resolve this by only applying icons to the top level navigation items (I think this helps keep visual clutter to a minimum as well). Though not as clearly illustrated, it also looks like, if a collapsed top level item with a carrot is clicked, the nav bar expands to reveal secondary items.

That workaround should be sufficient for now though. Thanks!

from core.

That documentation is for the older clr/angular component, it doesn't necessarily apply to the newer Core component - though as we update the component we may bring some of that in.

from core.