Skip to content

Vertical Menu Item - reduced padding for nested menu items #7907

@amieedwards-sage

Description

@amieedwards-sage

Description

As a developer using Vertical Menu Item, I often want to nest menu items x3 levels deep.
When rendering these nested menu items, the padding left and right values jump at big increments, meaning the text in nested menu items (up to 3 levels deep) often spans several lines and visually looks quite squashed with lots of white space left/right.

The current padding values:

1 level deep - padding left/right 40px & padding top/bottom 16px
2 levels deep - padding left/right 72px & padding top/bottom 16px
3 levels deep - padding/left/right 104px & padding top/bottom 16px

Suggested solution

Is it possible to reduce the increments for padding to the left/right values as each level of nesting occurs.

Demo URL

https://stackblitz.com/edit/parsium-carbon-starter-qt13ksk5?file=src%2FApp.tsx

Alternatives

No response

Additional context

No response

Confidentiality

  • I confirm there is no confidential or commercially sensitive information included.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions