oxyextras
Oxy Extras component library for Oxygen
Get Started

Slide Menu

The Slide Menu component allows you to add slide toggle menus, ideal for menus inside modal, inside an off canvas component or used seperately for mobile menus.

The advantage of having the burger toggle, the off canvas and the slide menu all as separate components is maximum flexibility for building your own off canvas menu without any limitations on the positioning.

Option Settings

The Slide Menu element will display any menu created via Appearance → Menus.

State on Page Load

Default: Open.

The option to have the menu hidden on page load allows you to choose a trigger selector to reveal the menu. Ideal for mobile menus where a burger toggle may be used to reveal the menu.

Icon Settings

Allows you to customise the SVG icon for the menu’s sub menu toggle buttons with lots of styling options included.

All the style settings for menu item links.

Allows you to customise the sub menu and the sub menu items separately.

FAQ

How to add bullet icons for all the list items

Add this sample CSS and modify as needed:

.oxy-slide-menu .menu-item {
  position: relative;
}

.oxy-slide-menu .menu-item::before {
  content: '>';
  position: absolute;
  top: 2px;
  left: -1em;
  font-size: 1.1em;
}

How to have the link text also act as a click trigger for top-level menu links?

Set the URL of top-level menu items to #.

Screen recording.

Assuming that you are using a Burger Trigger component to trigger the opening (and closing) of the Slide Menu, add this JS in a Code Block in your Page/Template:

document.addEventListener("DOMContentLoaded", () => {
  // when any ".oxy-slide-menu .menu-item a" that has the URL of a hashlink is clicked, click the burger ".oxy-burger-trigger .hamburger".
  // this is to prevent the menu from staying open when a hashlink is clicked.
  document
    .querySelectorAll(".oxy-slide-menu .menu-item a[href^='#']")
    .forEach((el) => {
      el.addEventListener("click", () => {
        document
          .querySelector(".oxy-burger-trigger .hamburger")
          .click()
      })
    })
})

How to increase the clickable area of the arrows?

Before:

After:

Set Slide Menu’s width to 100%.

Add this CSS:

.oxy-slide-menu_dropdown-icon-click-area {
  flex-grow: 1;
  text-align: right;
}

Tutorials

chevron-down