Menu (lv_menu)

The Menu Widget can be used to create multi-level menus that automatically handle navigation among menu levels, and enable its user to capture page navigation and click events.

Overview

The Menu Widget can be used to create multi-level menus that automatically handle navigation among menu levels, and enable its user to capture page navigation and click events.

Parts and Styles

The Menu Widget is built from the following Widgets:

• Main container: lv_menu_main_cont
• Main header: lv_menu_main_header_cont
• Back button: Button (lv_button)
• Back button icon: Image (lv_image)
• Main Page: lv_menu_page
• Sidebar container: lv_menu_sidebar_cont
• Sidebar header: lv_menu_sidebar_header_cont
• Back button: Button (lv_button)
• Back button icon: Image (lv_image)
• Sidebar Page: lv_menu_page

Usage

Create a Menu

lv_menu_create(parent) creates a new empty Menu.

This creates a Menu Widget with this object hierarchy:

• Menu: lv_menu_t

  • Hidden Sub-Page Storage: lv_obj_t

  • Main container: lv_menu_main_cont_class

    • Main header: lv_menu_main_header_cont_class

      • Back button: Button (lv_button)

        • Back button icon: Image (lv_image)

      • Main header title: Label (lv_label) (default hidden)

Note that no sidebar is created. You can create one later if you wish.

Header mode

The following header modes exist:

• LV_MENU_HEADER_TOP_FIXED Header is positioned at the top. (default)
• LV_MENU_HEADER_TOP_UNFIXED Header is positioned at the top and can be scrolled out of view.
• LV_MENU_HEADER_BOTTOM_FIXED Header is positioned at the bottom.

You can set header modes with lv_menu_set_mode_header(menu, LV_MENU_HEADER...).

Root back button mode

The following root back button modes exist:

• LV_MENU_ROOT_BACK_BTN_DISABLED (default)
• LV_MENU_ROOT_BACK_BTN_ENABLED

You can set root back button modes with lv_menu_set_mode_root_back_button(menu, LV_MENU_ROOT_BACK_BTN...).

Create a Menu Page

lv_menu_page_create(menu, title) creates a new empty Menu Page. You can add any Widgets to the Page.

Set a Menu Page in the main area

Once a Menu Page has been created, you can set it to the main area with lv_menu_set_page(menu, page). NULL to clear main and clear Menu history.

Set a Menu Page in the sidebar

Once a Menu Page has been created, you can set it to the sidebar with lv_menu_set_sidebar_page(menu, page). NULL to clear sidebar.

Linking between Menu Pages

If you have, for instance, created a button obj in the main Page. When you click the button Widget, you want it to open up a new Page, use lv_menu_set_load_page_event(menu, btn, new page).

Create a Menu container, section, separator

The following objects can be created so that it is easier to style the Menu:

• lv_menu_cont_create(parent_page) creates a new empty container.
• lv_menu_section_create(parent_page) creates a new empty section.
• lv_menu_separator_create(parent_page) creates a separator.

Events

• LV_EVENT_VALUE_CHANGED Sent when a Page is shown.

  • lv_menu_get_cur_main_page(menu) returns a pointer to Menu Page that is currently displayed in the main container.
  • lv_menu_get_cur_sidebar_page(menu) returns a pointer to Menu Page that is currently displayed in the sidebar container.

• LV_EVENT_CLICKED Sent when a back button in a header from either main or sidebar is clicked. LV_OBJ_FLAG_EVENT_BUBBLE is enabled on the buttons so you can add events to the Menu itself.

  • lv_menu_back_button_is_root(menu, button) to check if button is root back button.

Keys

No Keys are processed by Menu Widgets.

Examples

Simple Menu

Simple Menu with root btn

Simple Menu with custom header

Simple Menu with floating btn to add new menu page

Complex Menu

API