Navigation Enhancement

[Jan-Eimertenbrink]

Description

We noticed that a navigation with groups and collapsible groups cannot be combined without causing the layout to shift. However, in our design system, we aim for a modular structure that allows our components to be as versatile as possible. Therefore, we will make some adjustments.

From now on, we will divide our navigation into "Navigation" and "Navigation with Groups". The "Navigation with Groups" will come in two variants: collapsible and not collapsible (with lable).

GroupHead

When a navigation group gets a head with a label, we will give that lable the same padding as the Menu-Items: 8px horizontally and 4px vertically. This way, the label will visually align with the content of the Menu-Items. This provides a more calm visual structure and enables the combination with collapsible groups.

For collapsible groups, we use the AccordionTrigger and place it above the Menu-Items. The AccordionTrigger will inherit the Menu-Item's padding, adjusting from 4px horizontal and 2px vertical to 8px horizontal and 4px vertical. This ensures that our Menu-Items always align with the group header, even if we later decide to adjust the accordion padding.

Tokens

The tokens used should already exist:

  --menu-item-padding-x: var(--size-s);  
  --menu-item-padding-y: var(--size-xs);