How to redirect to the specific page when the menuButton is clicked

Panel
1

When I create a menuButton, I want to click on menuBotton to jump to the specific page。
I found botton .

import panel as pn

code = """
window.location.href="https://panel.holoviz.org"
"""

button = pn.widgets.Button(name="Open Link", button_type="success")
button.js_on_click(code=code)
pn.Column(
    button
).servable()

but, I need menuBotton.
I used Streamlit and now I’m just starting to use the panel. Thank you for your help.

1 Like
2

Do you mean MenuButton — Panel v1.3.8

3

Hi @mason

Welcome to the community.

You could create a custom ReactiveHTML class like below.

import param

import panel as pn

class Javascript(pn.reactive.ReactiveHTML):
    value = param.String(
        default="",
        allow_None=False,
        doc="""Javascript code. When the value is set it will be evaluated in the browser.
        Afterwards the value will be set to ''""",
    )

    def __init__(self):
        super().__init__(height=0, width=0, margin=0)

    def eval(self, value: str):
        self.value = value

    _template = "<div id='pn-container'></div>"
    _scripts = {
        "value": """
        console.log(data.value)
        
        if (data.value!=''){
            eval(data.value)
            data.value=""
        }"""
    }

javascript = Javascript()

menu_items = [
    ("Twitter", "https://twitter.com/Panel_org"),
    ("LinkedIn", "https://www.linkedin.com/company/panel-org/"),
    ("Discourse", "https://discourse.holoviz.org/"),
]
menu_button = pn.widgets.MenuButton(
    name="Dropdown", items=menu_items, button_type="primary"
)

@pn.depends(menu_button.param.clicked, watch=True)
def handle_selection(value):
    code = f"window.location.href='{value}'"
    javascript.eval(code)

pn.Column(
    menu_button,
    javascript,
).servable()

4

Thank you very much!