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:

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