Sticky tab bar with Fluent UI's Pivot

Question

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?

If I understand well you need something like https://codepen.io/savkelita/pen/abZRwZR If that's a case I'll explain my answer. — Marko Savic, Nov 09 '20 at 09:08
Hi Marko, this indeed looks like what I need. Could you add this as the answer with explanations? Thanks, I appreciate it. — foobar, Nov 09 '20 at 17:56

score 3 · Accepted Answer · answered Nov 09 '20 at 20:44

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

Thank you for the solution, Marko. It works and does the job for me. I think that ideally Fluent UI should expose a property that allows making the tab bar sticky to avoid having to rely on a hardcoded constant (`44px`) in the height property for the `PivotItem`s. — foobar, Nov 10 '20 at 03:43

Sticky tab bar with Fluent UI's Pivot

1 Answers1