I have a UIkit navbar but the dropdown won't work. I have seen a similar post on here that suggested jquery may be the problem, but I have tried installing jquery in all the ways I can think. That being said, it does seem like a javascript issue. I am currently happily using jquery in the app though. I am using webpacker, and I see that uikit and uikit icons are present on the sources tab of the chrome debugger. This is the haml and generated html:
%nav#navbar.uk-navbar-container.uk-navbar
#logo.uk-navbar-left
Logo
#user-navbar.uk-navbar-right
- if user_signed_in?
%ul.uk-navbar-nav
%li.uk-parent
%a{href: '#'} #{current_user.display_name}
.uk-navbar-dropdown
%ul.uk-nav.uk-navbar-dropdown-nav
%li
= link_to 'Sign out', '/users/sign_out', :method => :delete
<nav class="uk-navbar-container uk-navbar" id="navbar">
<div class="uk-navbar-left" id="logo">
Logo
</div>
<div class="uk-navbar-right" id="user-navbar">
<ul class="uk-navbar-nav">
<li class="uk-parent">
<a href="#">Should Dropdown</a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<li>
<a rel="nofollow" data-method="delete" href="/users/sign_out">Sign out</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</nav>
It seems to me that it follows the example here: https://getuikit.com/docs/navbar#usage
this SHOULD WORK :
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit-icons.min.js"></script>
<nav class="uk-navbar-container" uk-navbar>
<div class="uk-navbar-left">
Logo
</div>
<div class="uk-navbar-right">
<ul class="uk-navbar-nav">
<li>
<a href="#">Should Dropdown</a>
<div class="uk-navbar-dropdown">
<ul class="uk-nav uk-navbar-dropdown-nav">
<a rel="nofollow" data-method="delete" href="/users/sign_out">Sign out</a>
</ul>
</div>
</li>
</ul>
</div>
</nav>