Uikit megamenu

by Peter Knight

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.1/css/uikit.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.1/js/uikit.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.1/js/core/dropdown.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.1/css/components/dotnav.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.27.1/js/core/nav.js"></script>
<div class="uk-container uk-container-center">
  <div class="uk-grid">
    <div class="uk-width-1-1">
      <div id="main">
        <div class="uk-button-dropdown uk-megamenu" data-uk-dropdown="{delay: 100, justify:'#main'}">
          <button class="uk-button">Katalog <i class="uk-icon-angle-down"></i></button>
          <div class="uk-dropdown">
            <div class="uk-grid">
              <div class="uk-width-medium-1-3">
                <ul class="uk-nav uk-nav-dropdown uk-nav-parent-icon uk-nav-parent-icon-custom" data-uk-nav>
                  <li class="uk-parent">
                    <a href="#">Pipe</a>
                    <ul class="uk-nav-sub">
                      <li><a href="#">Pipe za umivalnike</a></li>
                      <li><a href="#">Pipe za kad, tuš</a></li>
                    </ul>
                  </li>
                  <li class="uk-parent">
                    <a href="#">Kopalne kadi, bazeni</a>
                    <ul class="uk-nav-sub">
                      <li><a href="#">Masažne kadi</a></li>
                      <li><a href="#">Kopalne kadi</a></li>
                    </ul>
                  </li>
                  <li class="uk-parent">
                    <a href="#">Sanitarna keramika</a>
                    <ul class="uk-nav-sub">
                      <li><a href="#">Pisoarji</a></li>
                      <li><a href="#">WC kotlički</a></li>
                    </ul>
                  </li>
                </ul>
             ...

CSS

body {
  padding: 1em;
}
.uk-megamenu .uk-dropdown {

}
.uk-nav-parent-icon.uk-nav-parent-icon-custom > .uk-parent > a:after {
      content:"\f067";
}
.uk-nav-parent-icon.uk-nav-parent-icon-custom > .uk-parent.uk-open > a:after {
      content: "\f068";
}