Dropdown Subnav Multiple Levels

Inspect the full details and code of a selected snippet

<div class="uk-flex-1 uk-flex uk-flex-middle">
  <div class="uk-container uk-flex-1 uk-flex uk-flex-column uk-margin-medium-top uk-margin-medium-bottom">
    <div class="uk-card uk-card-default uk-padding-small uk-border-rounded">
      
      
      <a class="uk-button uk-button-primary uk-border-rounded uk-width-small">DROPDOWN</a>
      <div class="uk-padding-small uk-border-rounded uk-drop uk-dropdown" uk-dropdown="mode: click; offset: 15; pos: bottom-center;">
        <ul class="uk-nav uk-dropdown-nav">
          <li>
            <a>SUBNAV</a>
            <div class="uk-border-rounded uk-drop uk-dropdown" uk-dropdown="mode: click; offset: 0; pos: right-top;">
              <ul class="uk-nav uk-dropdown-nav uk-width-small">
                <li>
                  <a href="#">NAV</a>
                </li>
                <li>
                  <a href="#">NAV</a>
                </li>
                <li>
                  <a href="#">NAV</a>
                </li>
                <li>
                  <a>SUBNAV</a>
                  <div class="uk-border-rounded uk-drop uk-dropdown" uk-dropdown="mode: click; offset: 0; pos: right-top;">
                    <ul class="uk-nav uk-dropdown-nav uk-width-small">
                      <li>
                        <a href="#">NAV</a>
                      </li>
                      <li>
                        <a href="#">NAV</a>
                      </li>
                      <li>
                        <a href="#">NAV</a>
                      </li>
                      <li>
                        <a href="#">NAV</a>
                      </li>
                    </ul>
                  </div>
                </li>
              </ul>
            </div>
          </li>
          <li class="">
            <a href="#">NAV</a>
          </li>
          <li class="">
            <a href="#">NAV</a>
          </li>
          <li class="">
            <a href="#">NAV</a>
          </li>
        </ul>
      </div>
      
      
    </div>
  </div>
</div>

Information

Detailed overview of a selected code snippet

yaneony

14.10.2025, 18:20:52

14.10.2025, 18:31:25

uk-border, uk-button, uk-card, uk-container, uk-drop, uk-dropdown, uk-flex, uk-margin, uk-nav, uk-padding, uk-width

Comments

Browse user feedback and discussions in detail

Currently in development and will be available soon. Stay tuned for updates!