Example: 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:

Property	Type	Description	From
content	ReactElement	The tab content	2.3.0
icon	ReactElement	The tab icon	2.3.0
title	ReactElement	The tab title	2.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 => defaultTabs.concat({
        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' />
            </Icon>
        ),
        title: <>Notes</>,
    }),
});

// Render
<Viewer
    fileUrl='...'
    plugins={[
        defaultLayoutPluginInstance,
    ]}
/>
);

(The sample code)

Related examples

• Add a custom element to the toolbar of the default layout
• Change the order of tabs in the sidebar
• Create a toolbar with custom buttons for the default layout
• Create a toolbar with different slots for the default layout
• Display reading progress at the top
• Remove a tab from the sidebar
• Use the default layout