Using a Webflow new CSS property option “Breaking” = CSS white-space Property
The
white-space
property specifies how white-space inside an element is handled.
Start point
Base structure (Div and X inline-block
links inside)
1 - No Wrap
Add a class for the div wrapper
Set breaking: No Wrap
2 - overflow auto
Change overflow to auto
(If overflow is clipped, a scroll-bar should be added):
Result:
Mobile VS Desktop
This UI Pattern works nicer on touch devices.
One option is to change the links to display:block
on desktop (regular side menu):
And change to inline-block
on smaller screens: