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:

contentReactElementThe tab content2.3.0
iconReactElementThe tab icon2.3.0
titleReactElementThe 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

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

(The sample code)

Related examples