> For the complete documentation index, see [llms.txt](https://help.fluorescent.co/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.fluorescent.co/stiletto/pages/footer/links-block.md).

# Links block

Display a column of links from one of a [Shopify navigation menus](https://help.shopify.com/en/manual/online-store/menus-and-links). Only top-level links will be displayed.

<img src="/files/bSTdPBtBWRFSXP5v4KZM" alt="" width="375">

<h2 align="center">Add links block</h2>

***

Click the arrow next to the **Footer** section, then click **(+) Add block** and select **Links**. Use the drag-and-drop handles **`⋮⋮`** to re-order blocks.

Click the **Links** block to **select a menu** that you've created in the Shopify admin.

<details>

<summary><mark style="color:blue;"><strong>STEPS</strong></mark></summary>

In your theme editor (**Customize**):

1. Click the arrow beside the **Footer** section to reveal the content blocks.
2. Click one of the **Menu** blocks to edit the content or use the **(+) Add block** button.
3. Click **Change** to select a different menu to display.

   > For more information about menus on Shopify, see their [Menus and links](https://help.shopify.com/en/manual/sell-online/online-store/menus-and-links) article.
4. Change the **Heading** to title your links.

   >
5. Use the **Desktop width** and **Desktop padding** sliders to adjust the size of the block.

   > For best results, make sure all footer block widths add up to 100%. You can also add a **Spacer** block with an adjustable width to add spacing between blocks.
6. (*Optional*.) Click and hold the drag handles **`⋮⋮`** to rearrange the blocks:

   <img src="/files/tOHF9cG7TWZSPV5YgAH3" alt="" width="302">

   > Click **Remove block** or the eye icon to delete or hide a block.
7. Click **Save**.

</details>

<sub><mark style="color:$info;">Click Links block to find settings<mark style="color:$info;"></sub>

<table><thead><tr><th width="149">Setting</th><th>Description</th></tr></thead><tbody><tr><td><mark style="color:blue;">Menu</mark></td><td><p>Select a menu of links that you've created in your Shopify admin.</p><p>Only top-level links are displayed, so dropdown menus will not appear.</p></td></tr></tbody></table>

### <mark style="color:$primary;">Change block layout</mark>

Use the **Desktop width** and **Desktop padding** sliders to adjust the size of the block.

> For best results, make sure all footer block widths add up to 100%. You can also add a **Spacer** block with an adjustable width to add spacing between blocks.

<sub><mark style="color:$info;">Click Links block to find settings<mark style="color:$info;"></sub>

<table><thead><tr><th width="178">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Desktop width</mark></td><td><p>Use the slider to increase the width of the footer block on desktop.</p><p>To keep all columns in a single row, make sure all footer block widths add up to 100%. To display block on its own row, set the desktop width to 100%.</p></td><td><strong>10 - 100%</strong></td></tr><tr><td><mark style="color:blue;">Desktop padding</mark></td><td>Adjust the spacing around the links within the full width of the block.</td><td><strong>0 - 20%</strong></td></tr></tbody></table>

### <mark style="color:$primary;">Change heading</mark>

Change the heading text above the links and choose whether to show the heading on desktop.

<sub><mark style="color:$info;">Click Links block to find settings<mark style="color:$info;"></sub>

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Heading</mark></td><td>The title of the links block. Leave the field blank to remove the heading. However, a heading is required when collapsible rows on mobile are enabled.</td><td><mark style="background-color:yellow;">Default: Links</mark></td></tr><tr><td><mark style="color:blue;">Show heading on desktop</mark></td><td>Choose whether to show the block heading on desktop screens.</td><td><mark style="background-color:yellow;">Default: Enabled</mark></td></tr></tbody></table>

### <mark style="color:$primary;">Display collapsible row on mobile</mark>

On mobile screens, you can display the links block in a collapsible row, instead of as a column.

> **Note**: A **heading** is required for the collapsible row.

<sub><mark style="color:$info;">Click Links block to find settings<mark style="color:$info;"></sub>

<table><thead><tr><th width="190">Setting</th><th width="400">Description</th><th>Options</th></tr></thead><tbody><tr><td><mark style="color:blue;">Collapse on mobile</mark></td><td>Display the block as an expandable row that reveals the block content when clicked.</td><td><mark style="background-color:yellow;">Default: Disabled</mark></td></tr></tbody></table>

***

> **Related links**
>
> [Footer](/stiletto/pages/footer.md)\
> [Newsletter block](/stiletto/pages/footer/newsletter-block.md)\
> [Text and image block](/stiletto/pages/footer/text-and-image-block.md)