> For the complete documentation index, see [llms.txt](https://docs.openspaces.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.openspaces.design/readme-1/pages-and-menus/homepage-+-menu/compact-menu-layout-global-menu.md).

# Compact Menu Layout (Global Menu)

> **What You’ll Learn**
>
> * How to use the Compact Menu section in Plain Jane
> * How to connect navigation using Global Menu settings
> * Best practices for scrollable homepages

> ***
>
> **What is the Compact Menu?**
>
> The **Compact Menu** is a section available in the Plain Jane theme that adds a "hamburger-style" navigation icon to the top of your homepage. When clicked, it opens a full menu drawer containing your navigation links.
>
> While the section is called **Compact Menu**, it connects to the navigation defined in your **Theme Settings > Global Menu Settings**. That’s why you may see it referred to both ways.
>
> This layout is best for brands that want:
>
> * A minimal, modern top bar with expandable navigation
> * Full control over scrollable homepage content
> * A clean visual experience for storytelling or drops
>
> ***
>
> **How to Add the Compact Menu**
>
> 1. In the Theme Editor, go to the **Sections** panel.
> 2. Remove any existing menu sections (Center Menu, Side-Aligned Menu).
> 3. Click **Add Section > Compact Menu**.
> 4. You’ll see a hamburger icon appear in the top-right preview.
>
> ***
>
> **Connect Your Navigation**
>
> To make the drawer menu functional:
>
> 1. Go to **Theme Settings > Global Menu Settings**.
>
> 2. Select a Shopify menu (or create a new one via Shopify admin).
>
> 3. The menu will now appear when clicking the hamburger icon.
>
> > 💡 Tip: Update your navigation structure under **Online Store > Navigation** in your Shopify admin.
>
> ***
>
> **Customizing the Look**
>
> * **Logo Positioning**: Left, center, or right
> * **Backgrounds**: Pair with a `Dynamic Background` section for color, image, or slideshow
> * **Fonts & Sizes**: Tweak menu link size and spacing under **Theme Settings > Typography**
> * **Sections**: Add other homepage sections such as:
>   * Collection List
>
>   * Product Carousel
>
>   * Image Stream
>
> > ⚠️ Use the `Page Canvas` section to wrap and structure all homepage sections.
>
> ***
>
> **When to Use the Compact Menu**
>
> Great for:
>
> * Scroll-heavy homepages
> * Brands using visuals, videos, or carousels
> * Mobile-friendly layouts
>
> Avoid if:
>
> * You want a single-screen landing page (use Center or Side-Aligned Menu instead)
>
> ***
>
> **Sample Build Workflow**
>
> 1. Add the `Compact Menu` section
> 2. Add a `Dynamic Background` (image, color, or slideshow)
> 3. Add key content sections (Collections, Products, etc.)
> 4. Link navigation via Theme Settings > Global Menu Settings
> 5. Tweak font sizes and logo position
>
> ***
>
> **Need Help?**
>
> * 💬 **Join our community on Discord:** <https://discord.gg/hcc2GvgZc6>
> * 📧 **Email us at:** <support@openspaces.design>
> * 💻 **Live chat with us:** Available Monday–Friday, 10AM–6PM EST, directly on our website


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.openspaces.design/readme-1/pages-and-menus/homepage-+-menu/compact-menu-layout-global-menu.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.