UIkit 3.15 – Dropbar, Dropdown and Navbar

It's UIkit time again! Today we are happy to introduce UIkit 3.15. It comes with the new Dropbar component, refines the Drop JavaScript and brings smaller improvements to the Dropdown, Nav, Navbar and more. Let's get right into it.

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

Dropbar Component

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.

Drop Component

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 x or 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 slide and 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 bg-scroll option.

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 boundary and target options.

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 true.

With the 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 shift and 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 false.

To show you all the new features in action, we have completely reworked the UIkit tests and documentation.

Navbar Toggle

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?

Large Dropdowns

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.

Navbar Gaps

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

Parent icons in the Nav component are no longer compiled into CSS. Instead, we use a JavaScript component just like with the slidenav and close icons. As a result, the icons automatically change their color and are not compiled multiple times. Removing the .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.

Nav Secondary

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.

Further Improvements

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

There are breaking changes for the nav parent icon, the Drop JavaScript component options, the navbar dropbar and some Less variables which got renamed, so please take a look at the migration guide.

What's Next

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.