# How to shift Ribbons to main header

**URL:** <https://pdfjs.community/t/how-to-shift-ribbons-to-main-header/3159>\
**Category:** Technical Support\
**Tags:** pdfjs-express\
**Created:** [February 28, 2024, 5:47am UTC](https://pdfjs.community/t/how-to-shift-ribbons-to-main-header/3159 "2024-02-28T05:47:51Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![donotreply.testing.w](https://avatars.discourse-cdn.com/v4/letter/d/6a8cbe/32.png) [@donotreply.testing.w](https://pdfjs.community/u/donotreply.testing.w)\
**Post date:** [February 28, 2024, 5:47am UTC](https://pdfjs.community/t/how-to-shift-ribbons-to-main-header/3159/1 "2024-02-28T05:47:51Z")

</div>

Hi, I am Deepak ,  
I want to show these tools in the main header but these are showing at right most-position on main header, and i want to change Polygon Tooltip title

```javascript
instance.UI.setHeaderItems(function(header:any) {
        const toolsHeader = header.getHeader('default');
        toolsHeader.push({
          type: "toolGroupButton",
          dataElement: "rectangleToolButton",
          toolGroup: "rectangleTools",
          img: "icon-tool-shape-rectangle",
          showColor: "always",
          title:"Rectangle" ,
          toolName: "AnnotationCreateRectangle",
        },{
          type: "toolGroupButton",
          dataElement: "polygonToolGroupButton",
          toolGroup: "polygonTools",
          title: "Mask",
          toolName: "AnnotationCreatePolygon",
        },{
          type: "toolGroupButton",
          dataElement:"cloudToolButton",
          toolGroup: "cloudTools",
          title: "Cloud",
          toolName: "AnnotationCreatePolygonCloud",
        },{
          type: "toolGroupButton",
          dataElement: "eraserToolButton",
          img: "icon-operation-eraser",
          showColor: "never",
          title: "Eraser",
          toolName: "AnnotationEraser",
        });

```

 ![image](https://canada1.discourse-cdn.com/flex031/uploads/pdfjscommunity/original/2X/7/73119d9ed20191e9f51bb90c2f9a816306bd1482.png)

---

<div class="post-metadata">

**Author:** ![tgordon](https://avatars.discourse-cdn.com/v4/letter/t/aca169/32.png) [@tgordon](https://pdfjs.community/u/tgordon)\
**Post date:** [March 1, 2024, 6:29pm UTC](https://pdfjs.community/t/how-to-shift-ribbons-to-main-header/3159/2 "2024-03-01T18:29:52Z")

</div>

Hello Deepak,

If you add a “spacer” to the right side it should push it to the left.

```javascript
{
   .... your elements....
},
{
        type: 'spacer'
}

```

Let me know if that works for you!

Best regards,  
Tyler