[SOLVED] Sticky tab bar with Fluent UI's Pivot

Sticky tab bar with Fluent UI's Pivot

I am building a tabbed environment using Fluent UI's Pivot component. Some of the tabs (or PivotItems in Fluent UI parlance) are quite long and need to be scrollable. Is there a way of having the tab bar be sticky such that it stays on top of the frame and visible no matter where the user scrolls to on the tab?

Solution

To get expected behavior you just need some CSS.

Set height of body and html to 100vh, and overflow: hidden to avoid multiple scrollbars.

body, html {
  height: 100vh; /* Viewport height */
  overflow: hidden; /* To avoid multiple scrollbars */
}

As a working example I'm gonna use Links of large tab style. Content of every item renders inside PivotItem Component. So, you have to put some styles on it:

const pivotItemStyles = {
  height: 'calc(100vh - 44px)',
  overflow: 'auto',
}

PivotTabs by default uses height: 44px that's the reason why I put calculate inside height property. overflow: auto is to get scrollable content. Reference: Pivot.styles.ts

Codepen working solution