How to disable drag&drop in a NAV menu (streamlit-option-menu)?

🎈 Using Streamlit
1

streamlit-option-menu 0.3.2

I would like to disable drag/drop from this nav menu:

import streamlit as st
from streamlit_option_menu import option_menu

selected = option_menu(
    menu_title=None,  # required
    options=["Home", "Projects", "Contact"],  # required
    icons=["house", "book", "envelope"],  # optional
    menu_icon="cast",  # optional
    default_index=0,  # optional
    orientation="horizontal",
)

if selected == "Home":
    st.title(f"You have selected {selected}")
if selected == "Projects":
    st.title(f"You have selected {selected}")
if selected == "Contact":
    st.title(f"You have selected {selected}")

When dragging the selected option it is possible to drag around a gray bubble with the link url. I want to disable this bubble.

I looked around and saw that this could possibly be solved changing <body> in hmtl:

<BODY ondragstart="return false;" ondrop="return false;">

or adding a Javascript script:

<script>
document.querySelector('body').on('dragstart drop', function(e){
    e.preventDefault();
    return false;
});
</script>

I tried the second one with
st.markdown(<script>, allow_unsafe_html=True)
and
from streamlit.components.v1 import html html(<script>)
but nothing works.

Is there any way to solve this problem?

2

This topic was automatically closed 365 days after the last reply. New replies are no longer allowed.