Building Custom Menus and Sidebars in Google Docs with Google Apps Script

Create Real Tools Inside Docs (Not Just Scripts)

Most Google Apps Script tutorials stop at automation.
But the real power starts when you turn scripts into tools users can interact with—directly inside Google Docs.

In this article, you’ll learn how to create custom menus and sidebars that transform a Google Doc into a mini application.

Why Custom Menus & Sidebars Matter

Automation is powerful—but interaction changes everything.

With menus and sidebars, you can:

Guide users step-by-step
Reduce errors (no running random functions)
Build repeatable workflows
Create Apps Script tools that feel native to Google Docs

This is how you move from:

“I wrote a script”
to
“I built a Docs tool.”

Custom Menus: The Entry Point

Menus are created when a document opens.

Example: Adding a Menu on Open

function onOpen() {
  DocumentApp.getUi()
    .createMenu("Doc Tools")
    .addItem("Clean Formatting", "cleanFormatting")
    .addItem("Insert Template", "insertTemplate")
    .addSeparator()
    .addItem("Open Tool Panel", "openSidebar")
    .addToUi();
}

Once added, users access your tools from the Docs menu—no script editor required.

Sidebar vs Dialog: What’s the Difference?

Feature	Sidebar	Dialog
Persistent	✅ Yes	❌ No
Complex UI	✅ Yes	⚠️ Limited
Best for tools	✅	⚠️
Best for alerts	❌	✅

For real workflows, sidebars win.

Creating a Sidebar (HTML + Apps Script)

Step 1: Create the Sidebar HTML

Create a file called Sidebar.html.

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <style>
      body { font-family: Arial, sans-serif; padding: 10px; }
      button { width: 100%; margin-bottom: 8px; }
    </style>
  </head>
  <body>
    <h3>Doc Tools</h3>

    <button onclick="insertTitle()">Insert Title Block</button>
    <button onclick="highlightText()">Highlight Keyword</button>

    <script>
      function insertTitle() {
        google.script.run.insertTitleBlock();
      }

      function highlightText() {
        const word = prompt("Word to highlight:");
        if (word) {
          google.script.run.highlightWord(word);
        }
      }
    </script>
  </body>
</html>

Step 2: Open the Sidebar from Apps Script

function openSidebar() {
  const html = HtmlService.createHtmlOutputFromFile("Sidebar")
    .setTitle("Doc Tools");
  DocumentApp.getUi().showSidebar(html);
}

Connecting UI Actions to Script Functions

Your Apps Script functions handle the real work.

function insertTitleBlock() {
  const body = DocumentApp.getActiveDocument().getBody();
  body.appendParagraph("Document Title")
    .setHeading(DocumentApp.ParagraphHeading.TITLE);
}

function highlightWord(word) {
  const body = DocumentApp.getActiveDocument().getBody();
  let result = null;

  while ((result = body.findText(word, result))) {
    const text = result.getElement().asText();
    text.setBackgroundColor(
      result.getStartOffset(),
      result.getEndOffsetInclusive(),
      "#fff2ac"
    );
  }
}

Making Sidebars Feel Professional

Small details make a big difference:

Disable buttons while processing
Show success messages
Validate user input
Keep functions focused and reusable

google.script.run
  .withSuccessHandler(() => alert("Done!"))
  .withFailureHandler(err => alert(err.message))
  .insertTitleBlock();

Real-World Use Cases

This pattern is perfect for:

Document cleanup tools
AI-powered writing assistants
Style enforcement (headings, spacing, fonts)
Accessibility helpers
Internal Docs utilities for teams

At scale, these sidebars become internal products, not just scripts.

Vibe Learning Insight 💡

Menus and sidebars align perfectly with Vibe Learning:

Users learn by doing
Tools guide behavior instead of enforcing rules
The UI becomes the instructor

This is how AI + automation evolve into interactive learning systems.

What to Build Next

If you’re comfortable with sidebars, the next steps are:

Combining sidebars with Libraries
Adding Gemini-powered AI actions
Turning the tool into a Marketplace Add-on
Adding usage tracking and versioning

Final Thought

Google Apps Script isn’t just for automation.
It’s a platform for building embedded tools inside Google Docs.

Once you start thinking in menus and sidebars,
you stop writing scripts—and start building products.