How to Dynamically Create Menu Items

How can I dynamically create menu items?

How to Dynamically Add Menu Items to an Android Activity

public class yourActivity extends Activity {
    ...
    private static final int MENU_ADD = Menu.FIRST;
    private static final int MENU_LIST = MENU.FIRST + 1;
    private static final int MENU_REFRESH = MENU.FIRST + 2;
    private static final int MENU_LOGIN = MENU.FIRST + 3;

    /**
     * Use if your menu is static (i.e. unchanging)
     */
    /*
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        super.onCreateOptionsMenu(menu);
        menu.add(0, MENU_ADD, Menu.NONE, R.string.your-add-text).setIcon(R.drawable.your-add-icon);
        menu.add(0, MENU_LIST, Menu.NONE, R.string.your-list-text).setIcon(R.drawable.your-list-icon);
        menu.add(0, MENU_REFRESH, Menu.NONE, R.string.your-refresh-text).setIcon(R.drawable.your-refresh-icon);
        menu.add(0, MENU_LOGIN, Menu.NONE, R.string.your-login-text).setIcon(R.drawable.your-login-icon);
        return true;
    }
    */

    /**
     * Gets called every time the user presses the menu button.
     * Use if your menu is dynamic.
     */
    @Override
    public boolean onPrepareOptionsMenu(Menu menu) {
        menu.clear();
        if(enableAdd)
            menu.add(0, MENU_ADD, Menu.NONE, R.string.your-add-text).setIcon(R.drawable.your-add-icon);
        if(enableList)
            menu.add(0, MENU_LIST, Menu.NONE, R.string.your-list-text).setIcon(R.drawable.your-list-icon);
        if(enableRefresh)
            menu.add(0, MENU_REFRESH, Menu.NONE, R.string.your-refresh-text).setIcon(R.drawable.your-refresh-icon);
        if(enableLogin)
            menu.add(0, MENU_LOGIN, Menu.NONE, R.string.your-login-text).setIcon(R.drawable.your-login-icon);
        return super.onPrepareOptionsMenu(menu);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        super.onOptionsItemSelected(item);

        switch (item.getItemId()) {
        case MENU_ADD: doAddStuff(); break;
        case MENU_LIST: doListStuff(); break;
        case MENU_REFRESH: doRefreshStuff(); break;
        case MENU_LOGIN: doLoginStuff(); break;
        }
        return false;
    }

---

The following specific example adds a MENU_LOGOUT option if the user is logged in.

    private static final int MENU_LOGOUT = MENU.FIRST + 4;

    public boolean onPrepareOptionsMenu(Menu menu) {
        ...
        if(auth.isLoggedIn()) {
            menu.add(0, MENU_LOGOUT, Menu.NONE, R.string.your-logout-text).setIcon(R.drawable.your-logout-icon);
        }
        ...
    }

    public boolean onOptionsItemSelected(MenuItem item) {
        ...
        case MENU_LOGOUT:
            if(auth.isLoggedIn()) {
                doLogout();
            } else {
                Toast.makeText(this, "You must have somehow been logged out between the time the menu button was pressed and now.", Toast.DURATION_LONG).show();
            }
            break;
        ...
    }

That's all there is to it.

How to create dynamic menu with list items?

Try this by checking if ul has .show

let targets = document.querySelectorAll("li");let main, sub;targets.forEach(function(target) {  if (target.parentElement.parentElement.tagName == "DIV") { // for mains    target.addEventListener("click", function(e) {      e.preventDefault();      e.stopPropagation();      let subMenu = target.querySelector("ul");      toggleClass(subMenu);      if (main && main != subMenu) {        main.classList.remove("show")      }      main = subMenu;    });  } else if (target.parentElement.parentElement.parentElement.parentElement.tagName == "DIV") {    target.addEventListener("click", function(e) {      e.preventDefault();      e.stopPropagation();      let subMenu = target.querySelector("ul");      toggleClass(subMenu);      if (sub && sub != subMenu) {        sub.classList.remove("show")      }      sub = subMenu;    });  } else {    target.addEventListener("click", function(e) {      e.preventDefault();      e.stopPropagation();    });  }});

function toggleClass(subMenu) {  if (subMenu.className.includes('show')) {    subMenu.classList.remove("show")  } else {    subMenu.classList.add("show");  }}

ul {  display: none;}
.show {  display: flex;  flex-direction: column;}

<div class="container">  <div class="menu">    <ul class="show">      <li>        <span class="topLevel">Services</span>        <ul>          <li>            1            <ul>              <li>1.1</li>              <li>1.2</li>              <li>1.3</li>            </ul>          </li>          <li>            2            <ul>              <li>2.1</li>              <li>2.2</li>              <li>2.3</li>            </ul>          </li>          <li>            3            <ul>              <li>3.1</li>              <li>3.2</li>              <li>3.3</li>            </ul>          </li>        </ul>      </li>      <li>        <span class="topLevel">Technology</span>        <ul>          <li>            1            <ul>              <li>1.1</li>              <li>1.2</li>              <li>1.3</li>            </ul>          </li>          <li>            2            <ul>              <li>2.1</li>              <li>2.2</li>              <li>2.3</li>            </ul>          </li>          <li>            3            <ul>              <li>3.1</li>              <li>3.2</li>              <li>3.3</li>            </ul>          </li>        </ul>      </li>      <li>        <span class="topLevel">About</span>        <ul>          <li>            1            <ul>              <li>1.1</li>              <li>1.2</li>              <li>1.3</li>            </ul>          </li>          <li>            2            <ul>              <li>2.1</li>              <li>2.2</li>              <li>2.3</li>            </ul>          </li>          <li>            3            <ul>              <li>3.1</li>              <li>3.2</li>              <li>3.3</li>            </ul>          </li>        </ul>      </li>    </ul>  </div></div>

How can I dynamically add a new menu item to the beginning of a specific WordPress menu?

The $menu->slug here apply_filters( "wp_nav_menu_{$menu->slug}_items", $items, $args ); is not the nav menu id... it's the Menu Name slug... like here i have named my Menu as Main Menu so the slug becomes main-menu so your filter would be...

add_filter( 'wp_nav_menu_main-menu_items', 'so68759013_add_menu_item', 10, 2 );

function so68759013_add_menu_item( $items, $args )
{   
  $items .=  '<li class="menu-item">My New Item Here</li>';

  return $items;
}

Create a menu subitems dynamically

You can create sub-menu dynamically. This is one of many ways.

I've created this using without bootstrap to give an idea what goes under the hood. Add class to sub-menu-items acc to bootstrap and personal preference.

Style yourself. I've done basic styling

const menuItem = document.querySelectorAll(".menu-item");
menuItem.forEach((mi) => {
  mi.addEventListener("click", (e) => {
    const nextSibling = e.target.nextElementSibling;
    nextSibling.classList.toggle("hide");
  });
});

function addSubMenuItem(menuItemId, smi) {
  const menuItem = document.querySelector(`#${menuItemId}`);
  const sibling = menuItem.nextElementSibling;
  smi.forEach((subMenuItemName) => {
    const li = document.createElement("li");
    li.classList.add("sub-menu-item");
    li.textContent = subMenuItemName;
    sibling.append(li);
  });
}

addSubMenuItem("home", ["a", "b", "c"]);
addSubMenuItem("blog", ["a"]);
addSubMenuItem("work", ["a", "b", "c", "d", 1, 24]);
addSubMenuItem("about", ["a", "b", "c", 0, 83, 93]);

.container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: relative;
  background-color: red;
}

.menu-item-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.menu-item {
  padding: 1rem;
  cursor: pointer;
  user-select: none;
}

ul.sub-menu {
  display: inline-block;
  list-style-type: none;
  top: 100%;
  background-color: royalblue;
  position: absolute;
  padding: 0;
  margin: 0;
}

li.sub-menu-item {
  padding: .25rem 1rem;
}

.hide {
  display: none !important;
}

<div class="container">
  <div class="menu-item-container">
    <div class="menu-item" id="home">Home</div>
    <ul class="sub-menu hide">
    </ul>
  </div>
  <div class="menu-item-container">
    <div class="menu-item" id="blog">Blog</div>
    <ul class="sub-menu hide"></ul>
  </div>
  <div class="menu-item-container">
    <div class="menu-item" id="work">Work</div>
    <ul class="sub-menu hide"></ul>
  </div>
  <div class="menu-item-container">
    <div class="menu-item" id="about">About</div>
    <ul class="sub-menu hide"></ul>
  </div>
</div>

---

Related Topics