Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <script src="//unpkg.com/office-ui-fabric-react@7/dist/office-ui-fabric-react.js"></script>
<script src="//unpkg.com/@uifabric/react-hooks@7/dist/react-hooks.js"></script>
<div id="content"></div>
              
            
!

CSS

              
                html, body {
  overflow: hidden;
  height: 100vh;
}
              
            
!

JS

              
                const {
  Pivot,
  PivotItem,
  PivotLinkFormat,
  PivotLinkSize,
  Label,
  initializeIcons
} = window.Fabric;

// Initialize icons in case this example uses them
initializeIcons();

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

const PivotTabsLargeExample = () => (
  <div>
    <Pivot
      aria-label="Links of Large Tabs Pivot Example"
      linkFormat={PivotLinkFormat.tabs}
      linkSize={PivotLinkSize.large}
    >
      <PivotItem style={pivotItemStyle} headerText="Foo">
        <Label>Pivot #1</Label>
        <div>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. In malesuada tristique justo ac dignissim. Vivamus sed egestas elit, ac malesuada nisl. Pellentesque a condimentum nibh. Quisque sit amet dolor consequat, tincidunt purus sit amet, tincidunt nunc. Etiam nec tellus odio. Etiam porta porttitor justo, in consectetur diam tincidunt id. Praesent et varius sem, vitae lacinia augue.

Maecenas lorem nunc, porta ac lacus eget, scelerisque gravida nulla. Aenean nulla ligula, aliquam sit amet risus eget, tempor fermentum est. Etiam euismod enim enim, vitae pretium diam fringilla ut. Pellentesque fermentum elit nisl, eget ultricies sapien congue vel. Integer et libero eleifend, venenatis sem non, dapibus dui. Aenean eros tortor, dapibus eu metus in, laoreet rutrum nunc. Aenean sit amet libero dictum, ornare diam ut, sodales sem. Proin ligula tellus, semper in suscipit id, condimentum venenatis erat. Nullam mattis iaculis magna, eu iaculis nisl efficitur vitae. Nullam at sollicitudin nunc. Sed quis malesuada dolor. Nulla lacinia arcu augue. Donec iaculis, mauris id hendrerit congue, ipsum neque blandit velit, porta lacinia neque ipsum ac purus.

Aliquam erat volutpat. Suspendisse porttitor consequat ipsum sed vulputate. Nam non ultricies eros. Nulla facilisi. Vivamus suscipit dui eu orci facilisis, ac auctor metus interdum. Curabitur at eleifend tortor, pellentesque aliquam nulla. Donec convallis mi vehicula velit bibendum imperdiet. Ut scelerisque porta eleifend. Nam vitae dapibus turpis. Pellentesque dignissim, diam a finibus pellentesque, nisi mi luctus orci, id venenatis neque diam in turpis. Morbi tristique non leo et fermentum. Donec gravida ante eros, eu ultrices sapien lobortis ac. Mauris arcu sapien, lobortis ac eleifend ut, ullamcorper et enim.

Maecenas ut congue odio. Vivamus a nulla vitae lorem ultrices rutrum. Vivamus a aliquam diam, vel commodo sem. Nulla facilisi. Nulla facilisi. Cras bibendum congue mi at volutpat. Nullam sit amet facilisis metus, sit amet dictum purus. Duis sit amet erat ac lorem tristique suscipit. Nam turpis quam, efficitur eget lobortis at, maximus non enim. Integer vitae bibendum sapien, vitae volutpat augue. Integer quis malesuada risus.

Curabitur sollicitudin condimentum augue, ac egestas dui sodales at. Mauris eget sodales metus, at faucibus nunc. Vestibulum consectetur ornare mattis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc pellentesque dui nec eros maximus pharetra. Integer tincidunt eleifend lectus, sed tincidunt urna. Nunc ut aliquet sapien. Phasellus ac odio non ex egestas ullamcorper. Fusce facilisis, mi eget pulvinar tempor, diam lacus eleifend neque, ac fermentum turpis elit ac erat. Integer eleifend lacinia lorem eget finibus. Mauris in vulputate dolor. Proin sed arcu facilisis, ullamcorper nulla id, suscipit erat. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Phasellus at condimentum mi, non gravida augue. Fusce elementum id quam sed auctor. Nunc posuere ante sed diam condimentum gravida. Fusce nec ipsum metus. Vivamus ultrices, urna nec ultricies gravida, erat nibh lobortis orci, pulvinar consectetur neque nisl ac lectus. Duis nec ligula ac eros tincidunt suscipit. Aenean sed molestie ex. Aenean quis tempor est. Nunc lobortis lectus rutrum, eleifend nisl non, finibus enim. Vivamus congue leo eget mollis mattis.

Suspendisse laoreet lorem enim, quis egestas sapien eleifend sed. Phasellus ornare tortor ullamcorper, tempor nibh quis, vulputate lacus. Sed at elit in turpis tempus accumsan. Nunc quis risus eu mauris ornare finibus sit amet ut dolor. Suspendisse quis elementum sapien, nec rutrum mi. Phasellus volutpat justo orci, sit amet volutpat elit venenatis sit amet. Vestibulum a laoreet nisl. Nunc vitae eros placerat, suscipit dolor vitae, commodo dui. Phasellus ut molestie ipsum. Integer eget venenatis tellus. Nullam massa neque, luctus sit amet dolor et, egestas accumsan purus. Cras ligula nisi, facilisis eu placerat quis, placerat sit amet lorem. Vestibulum laoreet et turpis vel vulputate. Curabitur arcu mi, malesuada sit amet efficitur quis, ornare et quam.

Duis ante ante, consectetur sed nisl ut, imperdiet ullamcorper dolor. Sed in justo id diam consequat tempor. Mauris ultrices dolor at viverra sollicitudin. Sed at quam ac arcu efficitur tempor. Proin eget venenatis purus, quis laoreet purus. Sed purus ante, aliquet sed hendrerit accumsan, bibendum vel sapien. Cras commodo hendrerit fringilla. Proin vitae augue justo. Nullam vitae molestie eros, eget sollicitudin augue. Nulla pellentesque ex massa, eu tempus nulla aliquet quis. Sed convallis erat vel hendrerit accumsan. Sed eu nunc eget nibh tincidunt maximus sed vel augue. Sed ex nulla, molestie vitae ligula id, luctus cursus dui. Quisque a tellus maximus, ornare nulla vitae, semper elit.

Nam ultricies libero quis nibh ornare, sed vehicula quam sodales. Phasellus tempus felis volutpat imperdiet finibus. Etiam sed neque ac magna consequat volutpat ut et ante. Ut ut nulla id libero vulputate maximus ac nec ipsum. Phasellus porttitor libero ac tempor commodo. Donec pharetra lorem ut arcu cursus, nec egestas est consequat. Nunc vulputate luctus erat non ornare. Phasellus efficitur dictum urna vitae convallis. Duis aliquet ultricies magna, vitae dignissim massa. Sed finibus sapien ac laoreet efficitur. Vestibulum tincidunt lacus eget dolor condimentum rutrum. Quisque commodo dolor ac vestibulum pellentesque.

Mauris dapibus imperdiet leo ut molestie. Nulla non nunc et odio dignissim lobortis nec ac elit. In et tellus eu diam lobortis hendrerit in vel lectus. Nulla pharetra scelerisque sagittis. Vestibulum interdum dui non est efficitur, sit amet laoreet nisl dignissim. Sed ex urna, iaculis sed pulvinar sit amet, convallis nec diam. Nullam ultrices ligula vitae lacus tempus vulputate. Praesent sed lacinia ipsum, in fermentum sem. Fusce sapien neque, fermentum vitae tincidunt quis, egestas sed ipsum.

Sed vel massa vitae turpis porttitor blandit. Etiam a metus est. Aliquam in finibus sem, sed scelerisque erat. Aenean aliquam risus sed tempor fermentum. In condimentum suscipit ligula id fermentum. Quisque ipsum tortor, tincidunt at viverra eu, tincidunt ac nunc. Curabitur vel egestas lectus. Suspendisse posuere quam eu dictum tempor. Maecenas orci quam, vulputate id turpis a, varius maximus ligula.

Interdum et malesuada fames ac ante ipsum primis in faucibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec eget consequat leo. Proin scelerisque elit vitae metus iaculis porttitor. Donec suscipit dui eget leo consequat, placerat dictum dui fermentum. Aenean efficitur eros at egestas scelerisque. Etiam a arcu arcu. Etiam aliquet ligula ut aliquam vestibulum.

In sem risus, rutrum quis velit id, dictum tempus sem. Maecenas scelerisque dolor vitae pellentesque hendrerit. Nunc bibendum bibendum sem, a lobortis augue condimentum eu. Curabitur fermentum ipsum mi. Nunc blandit iaculis pulvinar. Nullam molestie sem a metus tristique tristique. Maecenas pharetra, ante et imperdiet mattis, metus nibh sodales tortor, quis placerat lectus arcu ac erat.

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nulla consectetur turpis at risus rutrum malesuada. Nam interdum vestibulum libero, vitae sagittis lectus sodales et. Mauris finibus placerat nunc. Nam vel viverra enim, sit amet aliquam justo. Nunc leo velit, vulputate ut ipsum eu, viverra mattis leo. In turpis massa, posuere in turpis eget, dapibus fermentum mauris. Nulla eget accumsan mauris, eu laoreet arcu. Phasellus bibendum feugiat metus eget consectetur. Curabitur a congue lacus, luctus facilisis ex. Curabitur pulvinar, ligula ultrices blandit bibendum, orci sem ultricies risus, at maximus libero augue in orci. Fusce tempus quam et ullamcorper vestibulum. In id velit metus. Donec pretium dui quis laoreet finibus. Aenean vel magna ac dolor molestie luctus id in lacus. Mauris ullamcorper arcu vitae leo suscipit, nec facilisis lectus molestie.

Nulla varius purus in dolor tincidunt, ac sodales sem tincidunt. Aliquam cursus fermentum est, sed aliquet enim blandit in. Morbi rutrum laoreet vulputate. Fusce vitae tortor suscipit, malesuada dui quis, porttitor leo. Integer non neque varius, tempus felis auctor, rutrum lorem. Nulla ac nunc egestas, imperdiet tellus vel, volutpat diam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed fringilla leo eu vehicula vehicula. In accumsan, ante id pretium convallis, lorem sapien ultricies sapien, a ultrices ante turpis nec lectus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

In eu dui egestas, sagittis nisi sed, mattis nunc. Morbi dignissim facilisis massa vehicula sodales. Morbi neque nunc, sollicitudin eget neque id, sodales mollis risus. Duis sit amet faucibus odio, nec hendrerit ante. Aenean vitae lacus mollis, varius purus nec, tempus turpis. Nullam ornare nisl et dapibus tristique. Sed semper enim vel neque convallis cursus. Cras risus nibh, ullamcorper in pharetra quis, rhoncus eget arcu. Morbi convallis aliquam eros, at lobortis mauris tempor blandit. Ut et libero faucibus, tincidunt metus ornare, lacinia dui. Suspendisse tellus nulla, pulvinar vel nisl sed, fermentum congue sem. Maecenas sed nibh dolor. Sed consectetur eget leo a mattis.

Suspendisse rhoncus risus enim, ac porttitor lorem varius quis. Donec dictum sodales massa, a gravida nulla venenatis quis. Duis et nisi nisl. Proin purus odio, blandit id cursus vitae, rhoncus nec dolor. Integer eu tincidunt erat, sed condimentum lectus. Pellentesque et ipsum purus. Sed vehicula mauris sagittis nisi fermentum, sed sagittis libero viverra. Nulla euismod congue erat a fringilla. Nam blandit ultricies turpis, nec commodo purus blandit a. Aliquam augue nulla, aliquet ut volutpat et, fermentum ac neque. Cras lobortis orci est, sed accumsan mi tempus et. Aliquam non metus dui. In hac habitasse platea dictumst. Maecenas maximus felis felis, et posuere ipsum dictum eu. Nam vel erat id nisi lobortis iaculis. Aliquam rutrum, erat id iaculis gravida, libero libero consequat enim, et commodo magna tellus vitae lectus.

Nulla facilisis cursus posuere. Integer rhoncus neque arcu, a fermentum orci ullamcorper vitae. Nullam eu hendrerit quam, at commodo velit. Ut gravida ex est, eu ultrices lacus finibus ac. Suspendisse sit amet velit vel sem suscipit gravida quis sit amet mi. Donec sit amet venenatis ligula. Cras vel dignissim lectus. Sed vitae malesuada elit. Morbi feugiat, libero sed pulvinar aliquam, lectus dolor interdum enim, ac lobortis sem eros a quam. Aliquam et auctor ipsum, ac gravida sem. Mauris faucibus porta magna, eu laoreet ante auctor nec. Fusce a tortor nunc. Cras consectetur velit vitae sem accumsan euismod. Curabitur ut mauris sed velit hendrerit dapibus.

Sed posuere augue ut massa interdum, nec dignissim ipsum pulvinar. Aliquam placerat sed velit sit amet finibus. Curabitur tincidunt sem ac dolor facilisis, ac mollis diam imperdiet. Donec ullamcorper malesuada elit vitae ultrices. Donec sed volutpat arcu. Suspendisse egestas tincidunt lectus non vestibulum. Fusce eu metus orci. Sed sit amet est mauris. Cras ut magna sed ante condimentum malesuada.

Sed sed nibh neque. Donec dapibus odio eget ligula porta, nec egestas quam volutpat. Maecenas placerat nibh turpis, non feugiat tortor posuere at. Morbi feugiat varius metus eget laoreet. Nunc sit amet dignissim ligula. Sed id urna vitae purus sagittis dictum. Nulla dignissim ligula ut metus molestie imperdiet. Cras ullamcorper, ex at bibendum iaculis, metus mi blandit libero, sed auctor leo justo nec velit. Vivamus scelerisque diam placerat sodales feugiat. Etiam nunc lorem, efficitur ac tempor sit amet, placerat id lorem. Mauris ac justo est. Quisque vel magna auctor, lacinia ligula eu, dapibus metus.

Quisque nisi nisl, consequat in lacus eget, accumsan mattis nunc. Phasellus fermentum posuere mauris, tristique molestie felis aliquam vel. Donec sit amet nunc ligula. Pellentesque dignissim tortor convallis, luctus sem sit amet, dapibus diam. Integer id dolor sit amet erat congue tempor. Mauris laoreet, urna eleifend eleifend sodales, elit nulla venenatis diam, ac interdum metus turpis in dui. Vivamus sed pellentesque leo, nec euismod nulla. Pellentesque interdum et enim ut interdum. Duis nec tortor ut sem mattis vestibulum eu non neque. Praesent congue dui at erat blandit commodo.

Maecenas luctus feugiat sem, sed bibendum nulla ultricies non. Sed bibendum nulla molestie, accumsan nunc et, pulvinar mi. Aenean malesuada urna vitae augue dignissim aliquam. Donec dapibus est nec ipsum scelerisque posuere. Nullam quis ante et justo vulputate convallis. Morbi et quam vehicula justo posuere facilisis vitae a erat. Sed imperdiet accumsan porta. Mauris ut euismod ex. Suspendisse condimentum dolor id accumsan consequat. Integer vel sagittis nunc.

Vestibulum semper, turpis a rhoncus sollicitudin, orci est malesuada metus, dignissim scelerisque ante libero id ligula. Quisque leo nulla, luctus hendrerit ligula non, placerat convallis felis. Quisque id neque molestie, elementum neque ac, condimentum nisi. Cras pulvinar, dolor ac hendrerit dictum, mi purus mollis lacus, a tincidunt nisl urna in lectus. Duis ac luctus sem, vel laoreet sem. Proin sed dignissim mi, at placerat ipsum. Nullam accumsan nibh vitae ex hendrerit tristique. Nullam purus dolor, maximus id nibh in, suscipit hendrerit dolor. Suspendisse sit amet nisi in ex aliquam facilisis at a purus.

Curabitur leo ipsum, commodo vel faucibus non, congue eget lacus. Praesent consequat scelerisque diam, eget finibus tortor maximus quis. Suspendisse tempus nulla a leo cursus scelerisque. Curabitur posuere non nunc ac congue. Sed ut risus nec justo interdum ultrices id nec leo. Integer aliquam eu ante at malesuada. Maecenas euismod purus ac rhoncus porttitor. Maecenas at auctor felis. Phasellus at blandit lacus, in semper ex.

Nulla non finibus augue. Ut non consequat ipsum. Mauris pulvinar erat eget faucibus luctus. Proin mollis nulla metus, eget luctus metus lobortis non. Sed mollis enim vitae pretium scelerisque. Proin et convallis nisl. Aliquam gravida dolor lacinia lectus vulputate laoreet. Donec et nisi ultricies, dapibus nunc maximus, ullamcorper erat. Cras sed pellentesque turpis. Duis et nibh at velit pulvinar imperdiet sed et lorem. Nullam auctor ex elementum vestibulum ornare. Aenean quis mauris ante. Interdum et malesuada fames ac ante ipsum primis in faucibus.

Etiam sed erat justo. Aliquam erat volutpat. Proin pretium felis nec sem pretium, vel eleifend nisi suscipit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nam gravida venenatis sagittis. Aenean semper at odio vitae mattis. Proin condimentum nisl aliquam metus pharetra bibendum. Nunc nisi eros, rhoncus eu ex auctor, finibus mattis libero. Fusce magna augue, pharetra vehicula elit eget, euismod tristique orci. Vivamus blandit vel dolor vel porta.

Sed commodo magna sit amet tincidunt lacinia. Praesent iaculis sapien nibh, at pharetra velit molestie ac. Etiam eu justo sit amet tortor egestas accumsan sed nec erat. Proin justo lectus, mollis at fringilla non, tempor a purus. Aliquam eget libero metus. Fusce laoreet urna eu diam egestas, eget euismod justo pellentesque. Integer eu lorem nibh. Nulla ut elit a enim consequat fermentum. Duis ac placerat ante. In faucibus finibus nulla, sit amet feugiat ligula placerat quis. Aliquam eget turpis et eros tempus placerat et et purus. Donec quis enim elit. Vestibulum eget quam commodo, tempus velit quis, convallis justo. Phasellus feugiat massa ut aliquam consectetur.

Donec lacinia, tellus sit amet aliquam placerat, augue massa laoreet elit, eu molestie lectus arcu eu ipsum. Proin dapibus odio faucibus, gravida nunc in, pellentesque risus. Nulla ac sem blandit, convallis orci nec, rhoncus diam. Fusce non molestie velit. Morbi lacinia ut nibh vel semper. Aenean varius lobortis lectus id tincidunt. Vivamus imperdiet odio et elementum euismod. Duis nunc augue, semper eu enim non, venenatis euismod urna. Aenean facilisis quam molestie nunc tincidunt, ac venenatis magna mollis. Aliquam justo nulla, vestibulum in lectus et, ullamcorper vulputate libero. Integer rhoncus eros ac lectus mollis, rutrum condimentum magna pharetra. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas purus nunc, blandit non magna id, vehicula convallis magna. Vestibulum ante ex, dapibus eget blandit ut, ornare sed metus. Suspendisse potenti.

Cras odio nulla, posuere ac dui vel, scelerisque ultricies est. Suspendisse suscipit justo est, in viverra nulla tristique et. Etiam lobortis dui gravida sapien gravida, sed consequat nibh maximus. Duis nec tellus non est suscipit volutpat. Aliquam dignissim velit ullamcorper eleifend sagittis. Proin aliquet, nibh eu aliquet tempor, nulla ligula rutrum lorem, et accumsan metus enim ut lorem. Nullam convallis orci velit, ut molestie purus vehicula vel. In sapien tortor, sodales nec rutrum varius, interdum vel metus. Fusce elementum nec dolor vitae ultricies. Sed vel maximus turpis, at gravida lorem. Maecenas a dapibus diam. Nam risus lorem, mattis et ultrices eget, rhoncus porttitor risus. Ut vestibulum fringilla lorem, eu tincidunt sapien commodo vitae.

Vestibulum tristique, dolor quis fringilla fringilla, eros orci ultrices quam, eu fermentum tellus ante sed erat. Integer ut efficitur mauris. Duis convallis ligula eu vulputate hendrerit. Quisque sed dictum lorem, vitae pulvinar massa. Morbi sit amet nunc nec ipsum tempus molestie. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam porttitor euismod lacus. Morbi id risus sapien.

Nulla imperdiet nisi felis, vel consequat tellus gravida vel. Praesent id dui placerat, pulvinar ipsum non, sollicitudin leo. Fusce dapibus nisl quis lacinia lobortis. Vestibulum tincidunt magna ac lectus consequat tempor. Mauris malesuada nibh quis enim sodales, eget iaculis metus facilisis. In non orci feugiat, elementum odio nec, vehicula ligula. Aliquam gravida blandit nulla in vehicula. Cras congue, est et bibendum elementum, nulla elit elementum arcu, quis vestibulum diam leo id augue. Sed ut magna ut lectus tristique mollis.

Nunc efficitur turpis at cursus mollis. Sed pretium eros eu dui aliquam sodales. Phasellus lobortis, dolor vitae accumsan vehicula, nulla metus commodo ex, in eleifend erat sem a felis. Sed volutpat libero diam. Morbi aliquam, nibh id tempor viverra, velit purus efficitur risus, in pellentesque libero lectus et nibh. Curabitur et dui tellus. Donec facilisis odio tortor, id maximus magna dictum non.
        </div>
      </PivotItem>
      <PivotItem headerText="Bar">
        <Label>Pivot #2</Label>
      </PivotItem>
      <PivotItem headerText="Bas">
        <Label>Pivot #3</Label>
      </PivotItem>
      <PivotItem headerText="Biz">
        <Label>Pivot #4</Label>
      </PivotItem>
    </Pivot>
  </div>
);

const PivotTabsLargeExampleWrapper = () => (
    <PivotTabsLargeExample />
);
ReactDOM.render(
  <PivotTabsLargeExampleWrapper />,
  document.getElementById("content")
);

              
            
!
999px

Console