UIkit 3.16 – Accessibility and Dropdown Menus
Today we are happy to introduce UIkit 3.16. It is all about accessibility and keyboard interaction, so everything to make your UIkit website WCAG-compliant. But that's not all. There is also a new flexible Dropnav component that adds dropdown menus to any navigation type. Want to know more? Let's take a look.
WAI-ARIA Roles, States and Properties
This is different for each component, so if you are interested in all the details, take a look at the corresponding documentation: Accordion, Filter, Switcher, Tab, Slider, Slideshow, Lightbox, Modal, Offcanvas, Toggle, Close, Marker, Totop, Countdown, Notification, Spinner, Navbar, Tooltip and Form.
UIkit also supports language internationalization (i18n) of its components. Since we automatically add default texts for the
aria-label attributes, these texts can be translated. You can find the translation strings in the corresponding component documentation. Learn how to translate them in the internationalization documentation.
WCAG 2.1 Standards
If you still find the components are lacking accessibility or the documentation needs further improvements, please let us know and open an issue or pull request for the documentation or UIkit on GitHub.
But that's not all. There is also a new Dropnav component. We abstracted the functionality to create dropdown menus from the navbar so you can now create dropdown menus for any navigation, for example a subnav.
The dropnav will automatically initialize all dropdowns in the navigation with the same options, so there is no need to initialize them individually. By the way, did you know that dropdowns in UIkit are aim-aware? They stay open as long as the mouse pointer moves towards the dropdown. There is also an additional delay before closing even if the mouse pointer shortly moves in another direction. Finally, in hover mode the dropdowns immediately close when another menu item is hovered.
Another great feature of the dropnav is that it can show content of the dropdowns within a dropbar. The dropbar extends to the full width of the viewport and adjust its height to the open dropdown.
And of course the dropnav has the same accessibility pattern and keyboard interaction as the navbar.
Drop Parent Icon
The Drop component has a new parent icon to indicate that an element toggles a drop. It can be used in buttons, subnavs or tabs. Similar to the navbar parent icon, it inherits the text color. Additionally, we added a smooth transition to both the navbar and drop parent icon animation.
UIkit icon library got a small update as well. We added seven new icons, Eye, Eye Slash and Crosshairs as well as Android, Android Robot, Apple and Microsoft. We also updated the Lifesaver, Paint Bucket and Video Camera icons to fit the overall UIkit outline style.
Of course, UIkit 3.16 comes with a lot of other smaller improvements and fixes. For example, the lightbox now supports YouTube Shorts URLs. And to ensure a smooth animation and a better performance, the Parallax component adds the
will-change CSS property, and, whenever possible, the Sticky component uses the native CSS
position: sticky property. For the full list of features and fixes, check out the changelog.
Migration to UIkit 3.16
There are breaking changes for the Dropdown and Navbar components. We moved functional CSS from Dropdown, Dropbar and Navbar component to Drop component which why we had to rename some HTML classes. So please take a look at the migration guide.