Navigate to a page with tabbed element

What is the Code/Link to navigate to a specific tabbed element on a page?

You can set the SelectedIndex property of the Tabs component to select a specific item. Just make sure the Selected property of all items isn't checked. You can also data-bind it to a page property e.g. ${selectedTab}

I'm trying to have a button that navigates to a page, and to a specific tab.(not the default selected tab) ex. tabIndex = "2" or ${selectedTab(2)}, something along that line.


You still need the same approach. You will however use a page parameter to pass the selected tab. Here is how to do that.

  1. Add a new page property in the page that contains the tab. Set it to ${parameters.selectedTab}
  2. Data-bind the SelectedIndex property of the Tabs component to ${selectedTab}

Then you can navigate to that page by passing a parameter.

Here is how to navigate from a Link component (set the Path property and add a selectedTab parameter):

And here is how to navigate from a button (handle its Click event and use the Navigate to page action).

I am attaching a sample application that demonstrates this approach. (5.8 KB)

1 Like

Thanks, This works great. though the link from the PanelMenu is disabled, is there an option for the PanelMenu link as well.

Yes, the link in the PanelMenu should be updated to include the page parameter. Here is a short gif that shows how to do that.