UIkit 3.15 – Dropbar, Dropdown and Navbar
In the last UIkit 3.14 release we heavily improved the Drop component with its dropdowns. This release brings you a new Dropbar component which provides a section-like style for the Drop component. Unlike dropdowns, dropbars stretches to the full width or height of the viewport and are often used for mobile navigation. For example, you can make the dropbar look like a modal window or an offcanvas sidebar, but the main difference is that the dropbar opens below the navbar, so the navbar is visible and can be used for further navigation. The dropbar is a CSS component only responsible for the style. To add its behavior and animations, we had to update the Drop component and refine it with new features.
There is a new
stretch option that stretches dropdowns or especially dropbars to fill the size of the viewport. You can also only stretch them to the
y axis. This behavior is very similar to the old
*-justify alignment from the
pos option which has now been removed.
In addition to the UIkit animation classes, we had to add two new animation types to
reveal dropbars from all four directions. Slide animations slide the dropbar and its content from the chosen direction, while in the reveal animations the content stays in place and looks like it is being revealed by the dropbar. If you set the
animate-out option to
true, the animation will also be applied when closing the dropbar.
When dropbars stretch to the height of the viewport, and their content is larger, you can scroll within the dropbar. You can prevent the page in the background from scrolling using the new
But we also improved existing options for Drop component. As you know, dropdowns automatically shift and flip to fit into the viewport or any other element defined as their
boundary. In addition, you could set the
boundary-align option to
true so that the dropdown aligns to the boundary instead of the toggle. This also meant you could no longer set a custom boundary. That's why UIkit 3.15 removes the
boundary-align option and instead introduces a new
target option. Similar to the boundary, you can set a CSS selector to define target the dropdown aligns to. This way you can use both
If the new
target option is set to a larger container, you may want to position the drop inside the container and not outside. Just set the new
inset option to
flip option you could disable shifting and flipping behavior. Since this depended on the position direction, it was not obvious whether you disabled shifting or flipping. Now there are both
flip options which can be set to
false without knowing the position. Additionally, you can prevent the drop from repositioning when scrolling by setting the new
auto-update option to
To show you all the new features in action, we have completely reworked the UIkit tests and documentation.
Now that the navbar stays visible when toggling the dropbar, we just had to update the navbar toggle icon. It now changes from a menu icon to a close icon with a smooth animation. Pretty nice, ha?
UIkit 3.15 also comes with a new large modifier for the Dropdown and Navbar components. So in addition to the default dropdown, you can also have a dropdown with a larger padding. This may come in handy if you have a content-rich dropdown which stretches to the width of the navbar.
Color Modes for Dropdowns
The dropdown, navbar dropdown and dropbar now have Less color mode variables. This means that all UI elements perfectly adapt to their background color.
Next we have a small Less improvement for the Navbar component which was bugging us for quite some time. In addition to the horizontal padding, navbar items have new Less variables to set the gaps between items. The horizontal padding is perfect if your navbar items have background colors or borders. In other cases, you may just want a gap between items so the first and last navbar items perfectly align to the site's content.
Nav Parent Icons
.uk-nav-parent-icon from the Nav component causes breaking changes, so make sure to use the
uk-nav-parent-icon attribute on items instead.
We also added a parent icon to the Navbar component, so now you can now indicate that the navbar items have a dropdown.
Additionally, we added an extra style to the Nav component. This secondary style modifier is specifically designed for navs which have subtitles. These are often used in mega menu dropdowns.
Of course, UIkit 3.15 comes with a lot of other smaller improvements and tons of fixes. For example, there are new z-index and box sizing utility classes, and the Logo component now supports the
picture element. For the full list of features and fixes, check out the changelog.
Migration to UIkit 3.14
As you probably noticed, this release was all about improving menus in UIkit to give you all the tools to create modern navigation for your site. Now it is your turn to try them out. As always, we are looking for your feedback, so let us know what you think about this release in the comments below.