Create a menu in Holoviz Panel

Panel
, , ,
1

Hi folks,
I am wondering how we can create a fancy menu (clickable items/components) in Holoviz and get it all clickable. similar to Word or other software that has a menu on the top or left/right side of the user interface, that each menu is responsible for a specific action/job.

Any solution except the “Tab” widget would be appreciated.

Best regards.

2 Likes
2

Hi @BlueBit

For a basic menu you can use the MenuButton.

Here is an example

panel-menu

import panel as pn

pn.extension(notifications=True)

file_options = ["New File", "Save"]
file_menu = pn.widgets.MenuButton(
    name="File", items=file_options, button_type="light", width=75, margin=0
)

help_options = ["License", "About"]
help_menu = pn.widgets.MenuButton(
    name="Help", items=help_options, button_type="light", width=75, margin=0
)


def selection(clicked):
    pn.state.notifications.success(clicked)


pn.bind(selection, file_menu.param.clicked, watch=True)
pn.bind(selection, help_menu.param.clicked, watch=True)

pn.Row(
    file_menu,
    help_menu,
    styles={"border-bottom": "1px solid black"},
    sizing_mode="stretch_width",
).servable()
2 Likes
3

I’ve updated the documentation of MenuButton and its been released with Panel 1.3.2. Check it out MenuButton.

4

Hello I am using MenuButton and I cannot seem to update the items of my menu based on the callback. Can you please let me know what I am missing here.

import panel as pn

pn.extension()

class CustomViewer(pn.viewable.Viewer):
def init(self, **params):
super().init(**params)

    # Define the Select widget with options
    self.select_widget = pn.widgets.Select(name='Select Option', options=['not display', 'display'])
    self.select_widget.param.watch(self.update_menu, 'value')        
    self.menu_button = pn.widgets.MenuButton(name='Menu', items=[('Item 1', 'item_1'), ('Item 2', 'item_2')])        
    self._layout = self.make_layout()
    
def make_layout(self):
    self._layout = pn.Column(self.select_widget,                                 
                             self.menu_button,
                             height=300)
    return self._layout

def update_menu(self, event):
    if event.new=='display':
        self.menu_button.items = [('New Item 1', 'new_item_1'), ('New Item 2', 'new_item_2')]
    elif event.new=='not display':
        self.menu_button.items = [('Old Item 1', 'old_item_1'), ('New Item 2', 'old_item_2')]
    
def __panel__(self):
    return self._layout

viewer = CustomViewer()
viewer