# 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.

![](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-4c64f6711d713aeb7edb78a253dca7d837bca634%2Ffooter-links.jpeg?alt=media)

## Add links block

***

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:

   ![](https://2417329470-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fhnqe0uck0ozZhJ77wGXt%2Fuploads%2Fgit-blob-22765d66f3708b95b5907a71e6b24326594ad146%2Fshopify-content-drag-handles.jpeg?alt=media)

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

</details>

`Click Links block to find settings`

<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>

## Change block layout

***

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.

`Click Links block to find settings`

<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>

## Change heading

***

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

`Click Links block to find settings`

<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>

## Display collapsible row on mobile

***

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.

`Click Links block to find settings`

<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](https://help.fluorescent.co/stiletto/pages/footer)\
> [Newsletter block](https://help.fluorescent.co/stiletto/pages/footer/newsletter-block)\
> [Text and image block](https://help.fluorescent.co/stiletto/pages/footer/text-and-image-block)