> For the complete documentation index, see [llms.txt](https://ursus-ecom.gitbook.io/arctos-theme/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://ursus-ecom.gitbook.io/arctos-theme/blocks/links/menu.md).

# Menu

Display any navigation menu as a standalone block, with full control over layout, style, and spacing.

The Menu block displays any navigation menu from your store, such as your main menu or a footer menu, as a standalone block. Use it in headers, footers, or any custom section where you want to surface navigation links outside the main nav bar.

A clear, well-organized menu helps customers find collections, pages, and policies without hunting through your store. It's especially useful in footers, where customers expect to find links to shipping, returns, and contact information.

### 1. What you can do

* Display any menu you've created in your store's navigation settings
* Arrange menu items horizontally or vertically, with custom width, alignment, and spacing
* Add an optional heading above the menu, with its own link and typography
* Turn the menu into a collapsible accordion on mobile
* Customize menu item typography, hover style, and color scheme independently of your theme defaults
* Set different layout, heading, and typography values for mobile

### 2. How to add a Menu block

You can add a **Menu** block to any [custom section](/arctos-theme/section-templates/section.md) or any compatible block, with no limit on how many you use in a single section.

{% stepper %}
{% step %}
**Click the section**

In the Theme Editor (Customize), click the section where you want to add the menu.
{% endstep %}

{% step %}
**Add a block**

Click **Add block**.
{% endstep %}

{% step %}
**Select Menu**

Select **Menu** from the block list.
{% endstep %}

{% step %}
**Choose your menu**

Select which menu to display.
{% endstep %}

{% step %}
**Adjust the settings**

Control appearance and layout using the settings below.
{% endstep %}

{% step %}
**Save your changes**

Click **Save**.
{% endstep %}
{% endstepper %}

{% hint style="info" %}
This block displays an existing menu. To add, remove, or reorder links, go to [Content > Menus](https://admin.shopify.com/content/menus) in your Shopify admin.
{% endhint %}

### 3. Block settings

These settings let you control which menu displays, how it's arranged, and how it's styled.

<details>

<summary>Menu</summary>

Choose which menu to display. This pulls from the navigation menus you've already created in [Content > Menus](https://admin.shopify.com/content/menus) .

</details>

<details>

<summary>Layout</summary>

Controls how menu items are sized and arranged within the block. See [Group](/arctos-theme/blocks/layout/group.md) for detailed layout guide.

<table><thead><tr><th width="109.60546875">Setting</th><th width="129.70703125">Options</th><th width="443.890625">What it does</th></tr></thead><tbody><tr><td><strong>Width</strong></td><td><ul><li>Fill</li><li>Custom</li></ul></td><td><ul><li><strong>Fill</strong> stretches the block to the full width of its container.</li><li><strong>Custom</strong> lets you set an exact width in pixels or as a percentage.</li></ul></td></tr><tr><td><strong>Direction</strong></td><td><ul><li>Vertical</li><li>Horizontal</li></ul></td><td><ul><li><strong>Vertical</strong> stacks menu items in a column; common for footers.</li><li><strong>Horizontal</strong> lines them up in a row; common for in-page navigation.</li></ul></td></tr><tr><td><strong>Alignment</strong></td><td><ul><li>Left</li><li>Center</li><li>Right</li></ul></td><td>Positions menu items within their available space.</td></tr><tr><td><strong>Gap</strong></td><td><ul><li>Default</li><li>0–32px</li><li>Custom</li></ul></td><td>Sets the spacing between menu items.</td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Turn on to set a different width, alignment, and gap specifically for mobile screens.</td></tr></tbody></table>

</details>

<details>

<summary>Accordion menu (mobile)</summary>

Only available when a heading is set and **Direction** is **Vertical**. Turn this on to collapse the menu into an expandable accordion on mobile, with the heading acting as the toggle.

<table data-search="false"><thead><tr><th width="109.66796875">Setting</th><th width="139.98828125">Options</th><th width="431.8046875">What it does</th></tr></thead><tbody><tr><td><strong>Show accordion menu</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Turn on for long vertical menus on mobile, where showing every link at once would take up too much screen space.</td></tr><tr><td><strong>Expand by default</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Turn on if you want the menu open on page load, with the option for customers to collapse it.</td></tr><tr><td><strong>Icon</strong></td><td><ul><li>Caret</li><li>Plus</li><li>Dot</li></ul></td><td>Sets the icon shown next to the heading to indicate the menu can be expanded.</td></tr><tr><td><strong>Style</strong></td><td><ul><li>Classic</li><li>Underline</li><li>Boxed</li></ul></td><td>Controls the visual treatment of the accordion toggle. <em>Boxed</em> adds a container around the heading.</td></tr><tr><td><strong>Box style</strong></td><td><ul><li>Fill</li><li>Outline</li></ul></td><td><ul><li><strong>Fill</strong> gives the box a solid background</li><li><strong>Outline</strong> gives it a border with no fill.</li></ul><p><em>Only available when <strong>Style</strong> is <strong>Boxed</strong>.</em></p></td></tr><tr><td><strong>Shape</strong></td><td><ul><li>Square</li><li>Rounded</li><li>Pill</li></ul></td><td><p>Match your store's overall <a href="/pages/MtcWsJuspkVnqjnkw5Ur#id-1.-global-style-main-corner">main corner</a> for visual consistency.</p><ul><li><strong>Square:</strong> Use if your main corner is <code>0px</code></li><li><strong>Rounded:</strong> Use if your main corner radius is <code>10px</code> or <code>20px</code>.</li><li><strong>Circle/Pill:</strong> Use if your main corner is <code>30px</code></li></ul><p><em>Only available when <strong>Style</strong> is <strong>Boxed</strong>.</em></p><p><em>You can also mix and match different shapes to create a unique design; you don't strictly have to follow a single style.</em></p></td></tr><tr><td><strong>Corner radius</strong></td><td><ul><li>Main corner</li><li>Small</li><li>Extra small</li><li>None</li><li>Custom</li></ul></td><td><p>Controls how rounded the corners of your menu accordions are.</p><ul><li><strong>Main corner</strong> matches the global corner radius set in your theme.</li><li><strong>Small</strong> and <strong>Extra small</strong> inherit from the <a href="/pages/MtcWsJuspkVnqjnkw5Ur#id-1.-global-style-main-corner">main corner</a> value and scale it down proportionally for a subtler effect.</li><li><strong>None</strong> removes rounding entirely for a sharp, full-bleed look.</li><li><strong>Custom</strong> lets you set a precise value to match a specific design.</li></ul><p><em>Only available when <strong>Shape</strong> is <strong>Rounded</strong>.</em></p></td></tr><tr><td><strong>Top and bottom padding</strong></td><td>0–50px</td><td>Space above and below the heading text inside the toggle.</td></tr><tr><td><strong>Left and right padding</strong></td><td>0–50px</td><td><p>Space to the left and right of the heading text inside the box.</p><p><em>Only available when <strong>Style</strong> is <strong>Boxed</strong>.</em></p></td></tr></tbody></table>

</details>

<details>

<summary>Menu item style</summary>

These settings control the typography, hover behavior, and color of the menu items themselves.

<table><thead><tr><th width="129.98046875">Setting</th><th width="150.2265625">Options</th><th width="402.7421875">What it does</th></tr></thead><tbody><tr><td><strong>Hover style</strong></td><td><ul><li>Classic</li><li>Underline</li></ul></td><td><ul><li><strong>Classic</strong> relies on your theme's default hover treatment (typically a color or opacity change).</li><li><strong>Underline</strong> adds an underline beneath menu items on hover</li></ul></td></tr><tr><td><strong>Show divider</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td><p>Adds a vertical line between menu items.</p><p><em>Only available when Direction is <strong>Horizontal</strong>.</em></p></td></tr><tr><td><strong>Text style</strong></td><td><ul><li>Display</li><li>Heading 1–6</li><li>Paragraph</li><li>Eyebrow text</li><li>Description</li><li>Label</li><li>Custom</li></ul></td><td>Sets the font style of menu item text. Each style applies a predefined combination of font, size, weight, and letter spacing from your theme's <a href="/arctos-theme/theme-settings/typography.md">typography</a> settings.</td></tr><tr><td><strong>Text color</strong></td><td><ul><li>Strong</li><li>Base</li><li>Light</li><li>Subtle</li></ul></td><td>Sets the text color of menu items. Colors are pulled from your <a href="/pages/1b5ffa40c2962e0b91c4af81ede33af2f4c7d020#id-2.1.-general">theme's text colors</a> for Heading and Body colors.</td></tr><tr><td><strong>Disable other items on hover</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Turn on to dim or fade non-hovered menu items when a customer hovers over one, drawing focus to the active link.</td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Turn on to set a different text style and custom font sizing specifically for mobile screens. Text color inherits from desktop settings.</td></tr></tbody></table>

</details>

<details>

<summary>Heading</summary>

Only available when **Direction** is **Vertical**. Adds an optional heading above the menu, such as "Shop" or "Customer Care."

<table data-search="false"><thead><tr><th width="120.15234375">Setting</th><th width="150.36328125">Options</th><th width="412.09765625">What it does</th></tr></thead><tbody><tr><td><strong>Heading</strong></td><td>Text field</td><td>The heading text. Leave blank to hide the heading and its related settings entirely.</td></tr><tr><td><strong>Heading link</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Turn on to make the heading itself a clickable link, separate from the menu items below it.</td></tr><tr><td><strong>Link</strong></td><td>URL</td><td><p>Link the heading to a product, collection, page, or external URL.</p><p><em>Only available when <strong>Enable heading link</strong> is on.</em></p></td></tr><tr><td><strong>Open in new tab</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td><p>Turn on if you want the link to open in a new browser tab instead of replacing the current page.</p><p><em>Only available when <strong>Enable heading link</strong> is on.</em></p></td></tr><tr><td><strong>Text style</strong></td><td><ul><li>Display</li><li>Heading 1–6</li><li>Paragraph</li><li>Eyebrow text</li><li>Description</li><li>Label</li><li>Custom</li></ul></td><td>Sets the font style of heading text. Each style applies a predefined combination of font, size, weight, and letter spacing from your theme's <a href="/arctos-theme/theme-settings/typography.md">typography</a> settings.</td></tr><tr><td><strong>Text color</strong></td><td><ul><li>Strong</li><li>Base</li><li>Light</li><li>Subtle</li></ul></td><td>Sets the text color of the heading. Colors are pulled from your <a href="/pages/1b5ffa40c2962e0b91c4af81ede33af2f4c7d020#id-2.1.-general">theme's text colors</a> for Heading and Body colors.</td></tr><tr><td><strong>Margin bottom</strong></td><td>0-100px</td><td>Adds space between the heading and the menu items below it.</td></tr><tr><td><strong>Customize for mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Turn on to set a different text style and bottom margin specifically for mobile screens.</td></tr></tbody></table>

</details>

<details>

<summary>Style</summary>

This setting controls the colors of your text, buttons, and inner blocks based on your store's pre-made color palettes.

<table><thead><tr><th width="119.94921875">Setting</th><th width="99.55078125">Options</th><th width="463.63671875">What it does</th></tr></thead><tbody><tr><td><strong>Inherit color scheme</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td><ul><li>Turning this <strong>On</strong> ensures everything inside the group automatically blends in with its outer layer.</li><li>Turning it <strong>Off</strong> lets you pick a unique color scheme to make this specific group stand out.</li></ul></td></tr><tr><td><strong>Color scheme</strong></td><td>Color scheme picker</td><td>Use the color scheme picker to select a color scheme set in <a href="/pages/1b5ffa40c2962e0b91c4af81ede33af2f4c7d020#id-2.-color-schemes">Theme settings > Colors</a>.</td></tr></tbody></table>

</details>

<details>

<summary>Spacing</summary>

<table><thead><tr><th width="102.04296875">Setting</th><th width="159.05078125">Options</th><th width="421.41796875">What it does</th></tr></thead><tbody><tr><td><strong>Padding</strong></td><td>Custom value per side</td><td>Adds space inside the block, between its edge and the menu content.</td></tr><tr><td><strong>Custom on mobile</strong></td><td><ul><li>On</li><li>Off</li></ul></td><td>Set separate padding values for mobile.</td></tr></tbody></table>

</details>