> For the complete documentation index, see [llms.txt](https://aries-theme.gitbook.io/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://aries-theme.gitbook.io/docs/theme-sections-by-category/navigation/navigation-items.md).

# Navigation Items

The Navigation Items section displays a grid of clickable navigation items, each with an image and text label. This section is perfect for creating category navigation, quick links to important pages, or visual navigation menus that help visitors find what they're looking for quickly. Items are displayed in a responsive grid that automatically adjusts to fit the available space, and on mobile devices, items can be swiped horizontally.

<figure><img src="https://2498163780-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2LxG3rPCoA6sZo7ovFkR%2Fuploads%2FdY4Gf08An7kgdnHUrXpC%2Fimage.png?alt=media&amp;token=5e3eb3e5-db6b-4ddd-a360-e34149887a7e" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}

### How to set it up

1. Go to **Online Store** > **Themes** > **Customize**.
2. Open **Sections** > **Video**.
3. Make your changes, preview live, then click **Save**.
   {% endhint %}

### Settings

#### Heading

* **Heading**: The main title that appears above the navigation items. This helps visitors understand what the section is for.
* **Heading size**: Controls how large the heading appears, from extra small (XS) to extra extra large (2XL).
* **Underline**: Adds a decorative underline beneath the heading when enabled.
* **Header text position**: Controls where the heading is positioned horizontally. Options include Left (start), Center, or Right (end).

#### Layout

* **Full width**: When enabled, the navigation items section spans the entire width of the browser window instead of being contained within the page margins.
* **Color scheme**: Choose a color scheme that matches your store's design. This affects the background and text colors of the section.

#### Navigation item settings

* **Border radius**: Controls how rounded the navigation item images are, measured as a percentage. Higher values create more rounded (circular) images. Set to 0% for square images.
* **Image size**: Controls how large each navigation item image appears, measured in pixels. Options range from 100px to 200px. Larger images create more prominent navigation items.
* **Uppercase text**: When enabled, all navigation item text labels appear in uppercase letters for a more uniform, bold appearance.

#### Padding

* **Top**: Adds space above the navigation items section to create visual separation from other content.
* **Bottom**: Adds space below the navigation items section to create visual separation from other content.

#### Navigation item

Each navigation item block represents one clickable navigation link in your grid.

* **Image**: Upload a square image (1:1 aspect ratio recommended) for the navigation item. This image appears above the text label.
* **Text**: The label that appears below the image. This text describes what the navigation item links to.
* **Link**: The URL where visitors go when they click the navigation item. This can be a page, collection, product, or any other URL.

***

### Tips

* Use square images (1:1 aspect ratio) for the best appearance, as they display more consistently in the grid layout.
* Keep text labels short and descriptive. Long labels can wrap awkwardly and make the grid look cluttered.
* The border radius setting is useful for creating circular navigation items, which work well for category icons or profile-style navigation.
* Larger image sizes (150-200px) work well when you have fewer items, while smaller sizes (100-120px) are better for grids with many items.
* On mobile devices, navigation items automatically become swipeable, making it easy for visitors to browse through all items even on smaller screens.
* Use consistent image styles across all navigation items for a cleaner, more professional appearance. For example, use all product photos, all icons, or all lifestyle images.
* Test your navigation items on mobile devices to ensure images and text are readable and easy to tap.