CODEWITHSUNDEEP
polymer
aloo
aloo

Reputation: 5389

programmatically changing selection of core-menu/core-submenu

I have an application that uses a typical pattern of core-items inside of core-submenus inside of a core-menu. This menu is in a drawer. My main content area is a very long text content based page. Clicking on any of the core-items, jumps you to a specific anchor in the main content.

My question is how can I programmatically control which core-item/core-submenus are selected? I'd like to implement the pattern where a user scrolls the main content area to a different section and the core-menu selection changes in unison based on what text content is currently visible. I can monitor scroll events in my main window, but how would I change which item is selected in the core-menu?

Upvotes: 1

Views: 351

Answers (1)

Justin XL
Justin XL

Reputation: 39006

You can try the selected attribute.

The following example will expand Favorites and select Favorite 3.

<core-menu selected="1">   
    <core-submenu icon="settings" label="Topics" selected="1">
        <core-item label="Topic 1"></core-item>
        <core-item label="Topic 2"></core-item>
    </core-submenu>     
    <core-submenu icon="settings" label="Favorites" selected="2">
        <core-item label="Favorite 1"></core-item>
        <core-item label="Favorite 2"></core-item>
        <core-item label="Favorite 3"></core-item>
    </core-submenu>  
</core-menu>

You can either use data binding like selected="{{selected}}" or this.$.menu.selected = '0' to update the value programmatically. See this jsbin as a small demo.

Upvotes: 1

Related Questions