Tabs (primary level navigation)

[katz95]

🗒 General

Hi! Would love if someone could help us build our primary level navigation, which comes in the form of tabs! ✨Please add this to our Storybook as well.

💻 Usage

Horizontal tabs are the first level of navigation within a plugin or entity page on Backstage. First level navigation should be broader, and we recommend keeping the number of first level tabs to less than 8. However, if there are more tabs, we have designed a way for users to view additional tabs by clicking on the caret icon at the very right of the tab area.

We recommend that you follow the usage and interaction guidelines for tabs that Material has listed.

📐 Specs

🔮 Future

We're currently brainstorming secondary and tertiary level navigation as well! We'll keep you all posted! 🎉

[Rugvip]

There's an existing component for horizontal scrolling that we should reuse: https://github.com/spotify/backstage/tree/master/packages/core/src/components/HorizontalScrollGrid

[shmidt-i]

I think actually this is exactly what is needed +- styling:
https://material-ui.com/components/tabs/#scrollable-tabs

[ayshiff]

Can I work on it ? 🚀

[stefanalund]

@ayshiff for sure! I've assigned you.

[shmidt-i]

Hey @ayshiff, just checking in to see if you need any help on this one?

[ayshiff]

Hey @shmidt-i ! Thank you, I'm almost done !