Multiple Attributes / Options on UI Kit Components

Hi everyone,

I'm trying to assign several UI kit attributes to a navbar, to repeat what I was able to do with a static page, where I created a 'one-page' menu, using several UI kit components.

For instance, I assigned a data-uk-sticky attribute to a navbar, and then I also gave it several 'options' , like animation: 'uk-animation-slide-top' , clsactive: 'uk-navbar-attached' and showup: true , so that the code for the navbar, on the static html page ends up looking like this :

<nav class="uk-navbar" data-uk-sticky="{clsactive: 'uk-navbar-attached', animation: 'uk-animation-slide-top', showup: true}">
 <a href="#" id="ymtest-01" class="uk-navbar-content"><img width="60" src="images/LOGO-22.png" alt=""></a>
    <ul class="uk-navbar-nav" data-uk-scrollspy-nav="{closest: 'li', smoothscroll: {offset: 30}}">
        <li><a href="#section-01">SECTION 01</a></li>
        <li><a href="#section-02">SECTION 02</a></li>
        <li><a href="#section-03">SECTION 03</a></li>
        <li><a href="#section-04">SECTION 04</a></li>

In my Beans childtheme's functions.php , when I add only one attribute and one option :

add_action( 'wp', 'custom_modify_child_theme');

function custom_modify_child_theme() {

    beans_add_attribute( 'beans_menu_navbar_one-page-menu', 'data-uk-sticky', 'showup:true' );


it works fine to make the navbar stick to the top and show up only on scroll-up.

But when I try adding other attributes, to either beans_add_attribute or beans_add_attributes, like this :

add_action( 'beans_before_load_document', 'custom_modify_child_theme');

function custom_modify_child_theme() {

      beans_add_attributes( 'beans_menu_navbar_one-page-menu', 'data-uk-sticky', array( 'clsactive' => 'uk-navbar-attached', 'animation' => 'uk-animation-slide-top', 'showup' => true ) );


then the functionality is lost. I tried both wp and beans_before_load_document hooks, but it doesn't seem to make a difference.

I looked through the documentation, and couldn't find anything that deals with this.

Any thoughts ?



just do that:

beans_add_attribute( 'beans_header', 'data-uk-sticky', '{top: -100, animation: "uk-animation-slide-top"}' );

although that animations nor working very good on my sticky header.

Hey Jochen,

I tried that. It still doesn't work.

Although, on my static site, the animation appears much better when it's used together with showup:true , compared to when it's used with top:-100 . When I give it the 'top' value, the animation is a little 'wonky', on the scroll-up to the very top.

Personally, I like the showup:true option. It clears the space and gives more room to the 'above the fold' screen area. I find it makes a difference, especiallly on tablets, where the space gets cramped easily.

I tried all sorts of combinations here, but I couldn't get it to work. The animation is not showing at all.

I have registered it, and it shows up in my list of UIkit components :

    [components] => Array
            [core] => Array
                    [0] => base
                    [1] => block
                    [2] => grid
                    [3] => article
                    [4] => comment
                    [5] => panel
                    [6] => nav
                    [7] => navbar
                    [8] => subnav
                    [9] => table
                    [10] => breadcrumb
                    [11] => pagination
                    [12] => list
                    [13] => form
                    [14] => button
                    [15] => badge
                    [16] => alert
                    [17] => dropdown
                    [18] => offcanvas
                    [19] => text
                    [20] => utility
                    [21] => icon
                    [22] => animation
                    [23] => flex
                    [24] => animation
                    [25] => contrast
                    [26] => overlay
                    [27] => thumbnail
                    [28] => modal
                    [29] => scrollspy
                    [30] => smoothscroll
                    [31] => animation
                    [32] => flex
                    [33] => close
                    [34] => modal
                    [35] => overlay

            [add-ons] => Array
                    [0] => slidenav
                    [1] => dotnav
                    [2] => lightbox
                    [3] => slider
                    [4] => slideshow
                    [5] => accordion
                    [6] => slideshow-fx
                    [7] => sticky
                    [8] => tooltip


    [themes] => Array
            [default] => G:/xampp/htdocs/wp/wp-442-1044/wp-content/themes/tm-beans/lib/api/uikit/src/themes/default
            [beans] => G:/xampp/htdocs/wp/wp-442-1044/wp-content/themes/tm-beans/lib/assets/less/uikit-overwrite/


Not sure what's going on . πŸ™

I got the animation to work ! πŸ™‚

All I had to do was change the single and double quotes. I noticed that the static html site expects the single quotes inside the curly brackets, so I changed things around, to look like this :

beans_add_attribute( "example_primary_menu", "data-uk-sticky", "{ animation: 'uk-animation-slide-top', showup:true }" );

Now the animation is showing quite nicely, when the navbar apears, on scroll-up.

Thanks again, Jochen, you pointed me in the right direction. Again πŸ™‚

cool, you made it πŸ™‚

But in that situations its easier to escape the single quote with an backslash before. Like that:

beans_add_attribute( 'example_primary_menu', 'data-uk-sticky', '{ animation: \'uk-animation-slide-top\', showup:true }' );

I knew that !

Just couldn't think of it πŸ˜‰

I just figured out the smooth-scroll for my one-page menu.

The problem was what I would call a 'naming confusion', which - IMHO - is a bit of an oversight on the part of the UIkit developers.

The component 'smooth scroll' is controlled by smooth-scroll.js , or smooth-scroll.min.js . Notice the hyphen - in the file name.

Now, to CALL the component's functionality on some page element, like an ul of a menu, and to combine it with the scrollspy UIkit component, this code works :

<ul class="uk-navbar-nav" data-uk-scrollspy-nav="{closest: 'li', smoothscroll: {offset: 30}}">

Notice that the property smoothscroll is WITHOUT a hyphen.

This is what threw me. I assumed that the name which is used to register UIkit components and add-ons with Beans , with beans_uikit_enqueue_components would also be smoothscroll, without a hyphen.

Once I added the hyphen there , like this : smooth-scroll, the code started to work .

What made things even more complicated, is that the printed list of active UIkit components also listed smoothscroll without hyphen, even though that's a wrong name.

A little thing, but hard to spot.

I just thought I should give others a bit of a 'heads-up'.


Yuna M.

Good thing to point out.

Hey Yuna

It would be great if you post the finished result of the code and CSS. Thank you.

Write a reply

Login or register to write a reply, it's free!