Tab Group, Tab, Tab Panel suggestions

[ajmchambers]

I find myself wanting to use the Tabs as a navbar due to the nice styling and left/right arrows when overflowed, but changing the url and having just the router outlet instead of panels. Want to achieve something similar to the youtube channel page tabs:

It would also be nice to be able to set the active tab on the tab group itself (not sure how this would interact with disabled tabs though):

<sl-tab-group active="panel1">
    ...
</sl-tab-group>

Another thing I find myself wanting to do is storing the active tab in the url query params e.g.
/page?tab=panel1 and have the correct tab active when navigating back and forward through history.

Found this tricky to do and ended up doing basically this:

• react-router useLocation hook
• store a ref of the tab-group element
• useEffect depending on location and tab-group ref
• manually run the el.show(panelName) with the panel I want active (if not currently active)
• also manually set active prop on each tab and tab-panel (so if I press the browser back button the correct tab is active, not sure why this was necessary - maybe I was calling el.show(panel) too early or something as running it in a setTimeout also seemed to work)

Here's a similar-ish example I was attempting in react (with routes rather than query params): https://codesandbox.io/s/happy-tharp-2whuol?file=/src/pages/Companies.js

In summary:

• In general would be nice to be able to control the active tab using a property on sl-tab-group
• Maybe separate the tab selection behaviour from the panel behaviour
• Maybe have the option of using the tab buttons as links.

Not sure how feasible this would be, maybe good reasons for the current approach... just my thoughts as I was trying them out

[claviska]

Want to achieve something similar to the youtube channel page tabs

I'm not sure how well this will work in terms of accessible navigation. It seems like you're looking for a navigation role which has a different semantic meaning than the tab role. If that matters to you, tabs may not be the best choice — although I totally understand why this would be convenient!

In general would be nice to be able to control the active tab using a property on sl-tab-group

I'll take another look to see if it makes sense to move the selected tab/panel to Tab Group. Radio Group was recently updated to "own" the selected value, so this would be consistent with that behavior.

Maybe separate the tab selection behaviour from the panel behaviour

Maybe have the option of using the tab buttons as links.

Unfortunately, I don't think either of these can be done easily for accessibility reasons. I'm open to suggestions or PRs that experiment with this, but I don't think I'll be able to tackle it myself in the near future.

[ajmchambers]

Ah ok that makes sense