UIkit 3.14 – Updated Drop, Sticky and Navbar

Sascha
April 27, 2022
UIkit

Today we are happy to introduce UIkit 3.14. With this update we continue to modernize our JavaScript components. We started with the Parallax component, and this time we focused on the Drop component and further refinements for the Sticky and Navbar components. Let's take a look.

Make sure to subscribe to our YouTube channel and join our Discord Chat Server for all news and discussions.

Drop Component

UIkit 3.14 heavily improves the Drop component, in particular its responsive behavior. Before, when a dropdown did not fit the viewport, it automatically flipped its position to stay in view. This often did not fit on smaller viewports and created a scrollbar. This is why we introduce a new shifting behavior. Now instead of flipping, the element will shift its position in order to better fit in view. And if it gets too large for the viewport, it will start shrinking.

If the element the dropdown is aligned to is in the way of the shifting direction, it will flip to the other side instead. If this is also not possible, the element will flip the axis.

Sticky Component

Our last UIkit 3.12 release already came with a lot of improvements for the Sticky component, but we have refined it even further. First of all, we renamed the top and bottom options to start and end to bring it in line with the Parallax component. By default, the element becomes sticky when its top border reaches the top of the viewport, and it stays sticky till it reaches the end of the page. With the start and end options you can apply an offset to when the element becomes or stops being sticky. Values can be set in any dimension units, namely vw, vh, % and px. The % unit relates to the element's height. Both options allow basic mathematics operands, + and -.

There is a new overflow-flip option that disables the sticky behavior for oversized content. If the element is larger than the viewport, the sticky position is flipped, and changing the scroll direction will not affect its position. Together with the start and end options you can achieve two nice sticky effects. You can cover an element by following content or reveal it by previous content.

Finally, we completely renewed our documentation and updated UIkit tests.

Next we have some smaller improvements for the Navbar component. You can justify the navbar items by equally distributing the space between them.

Additionally, Nav, Dropdown and Navbar components can all have subtitles.

And we removed the dropbar push mode from the Navbar component as it felt outdated.

Parallax Component

When working with the Parallax component, we noticed that the usage of the scale property was quite limited. In CSS, it is only possible to set a number or percentage representing the scaling vector. To give you more control, we added support for the vw, vh and px dimension units. Now you can scale an element to a specific pixel value or even relative to the viewport without knowing the element's size.

Migration to UIkit 3.14

There is a small breaking change for the Sticky component, so please take a look at the migration guide. Additionally, we removed support for the Edge Legacy and its EdgeHTML engine, the deprecated Gif component and Safari fallback for focus-visible. Of course, UIkit 3.14 comes with tons of smaller improvements and fixes. For example, UIkit now loads much faster and is less heavy on the CPU for large pages with many HTML elements. For the full list of features and fixes, check out the changelog.

What's Next

We are glad that the Parallax, Sticky and Drop components are now completely overhauled and modernized. As always, we are looking for your feedback, so let us know what you think about this release in the comments below.