Add a new tab to the sidebar

This example demonstrates how we can add a new tab to the sidebar which is created by the Default Layout plugin.
A tab is constructed by three properties:
`content``ReactElement`The tab content2.3.0
`icon``ReactElement`The tab icon2.3.0
`title``string`The tab title2.3.0
To make the tab's icon looks the same as other tabs, you can wrap the icon in the `Icon` component provided by the `@react-pdf-viewer/core` package.
import { Icon } from '@react-pdf-viewer/core';
<Icon size={16}>// The body of SVG icon</Icon>;
The following example adds a new tab which is used in the highlight plugin example:
import { Icon } from '@react-pdf-viewer/core';
const defaultLayoutPluginInstance = defaultLayoutPlugin({
sidebarTabs: (defaultTabs) =>
content: <div style={{ textAlign: 'center', width: '100%' }}>Notes are listed here</div>,
icon: (
<Icon size={16}>
<path d="M23.5,17a1,1,0,0,1-1,1h-11l-4,4V18h-6a1,1,0,0,1-1-1V3a1,1,0,0,1,1-1h21a1,1,0,0,1,1,1Z" />
<path d="M5.5 12L18.5 12" />
<path d="M5.5 7L18.5 7" />
title: 'Notes',
// Render
<Viewer fileUrl="..." plugins={[defaultLayoutPluginInstance]} />;

See also