UIkit 3.14 – Updated Drop, Sticky and Navbar
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.
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
bottom options to
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
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
% unit relates to the element's height. Both options allow basic mathematics operands,
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
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.
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
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.
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.