To show tabbed content within Markdown files, you can fall back on MDX. Docusaurus provides
<Tabs> components out-of-the-box.
And you will get the following:
By default, tabs are rendered eagerly, but it is possible to load them lazily by passing the
lazy prop to the
You may want choices of the same kind of tabs to sync with each other. For example, you might want to provide different instructions for users on Windows vs users on macOS, and you want to changing all OS-specific instructions tabs in one click. To achieve that, you can give all related tabs the same
groupId prop. Note that doing this will persist the choice in
localStorage and all
<Tab> instances with the same
groupId will update automatically when the value of one of them is changed. Note that
groupID are globally-namespaced.
For all tab groups that have the same
groupId, the possible values do not need to be the same. If one tab group with chooses an value that does not exist in another tab group with the same
groupId, the tab group with the missing value won't change its tab. You can see that from the following example. Try to select Linux, and the above tab groups doesn't change.
Tab choices with different
groupIds will not interfere with each other:
You might want to customize the appearance of certain set of tabs. To do that you can pass the string in
className prop and the specified CSS class will be added to the