Add link to toolbar item in React Toolbar component

30 Jan 20236 minutes to read

You can add link inside Toolbar using React template. Follow the below guidelines for add link as template in Toolbar.

  • Declare a template within the function which returns jsx element. If the template does not need any arguments, then no need to pass the properties.

  • Assign the function as value for the template option of toolbar item.

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ToolbarComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-navigations';
const App = () => {
    const AnchorTemplate = () => {
        return (<div>
        <a target="_blank" href="https://ej2.syncfusion.com/react/documentation/toolbar/getting-started/">
          Anchor Toolbar Link
        </a>
      </div>);
    }
    return (<div id='container'>
      <ToolbarComponent id="ej2Toolbar">
        <ItemsDirective>
          <ItemDirective text="Cut"/>
          <ItemDirective text="Copy"/>
          <ItemDirective type="Separator"/>
          <ItemDirective text="Paste"/>
          <ItemDirective type="Separator"/>
          <ItemDirective template={AnchorTemplate}/>
        </ItemsDirective>
      </ToolbarComponent>
    </div>);
}
const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { ToolbarComponent, ItemsDirective, ItemDirective } from '@syncfusion/ej2-react-navigations';


const App = () => {
  const AnchorTemplate = (): JSX.Element => {
    return (
      <div>
        <a
          target="_blank"
          href="https://ej2.syncfusion.com/react/documentation/toolbar/getting-started/"
        >
          Anchor Toolbar Link
        </a>
      </div>
    );
  }
  return (
    <div id='container'>
      <ToolbarComponent id="ej2Toolbar">
        <ItemsDirective>
          <ItemDirective text="Cut" />
          <ItemDirective text="Copy" />
          <ItemDirective type="Separator" />
          <ItemDirective text="Paste" />
          <ItemDirective type="Separator" />
          <ItemDirective template={AnchorTemplate} />
        </ItemsDirective>
      </ToolbarComponent>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById('element'));
root.render(<App />);
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React Toolbar Sample</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #container {
            max-width: 700px;
            min-width: 520px;
        }

        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='container'>
        <div id='element'>
            <div id='loader'>Loading</div>
        </div>
    </div>
</body>

</html>