# Step 1: Other properties of menu item

Navi+ offers a wide range of properties for menu items, allowing you to customize them for different purposes. Browse the list below and use them as needed.

<details>

<summary>Sub group: Other basic options (Divider, Badge)</summary>

**Add Divider**: Use this to separate menu items with a line. You can customize its size, style, and color.\
**Tip:** If your menu is long (more than 5 items), separate items with dividers or better—group them with custom group titles.

**Add Badge**: Adds a red dot (you can change the badge color) to draw user attention.\
Use “Show badge (+n) when items are in the cart” if this is a Cart menu item.

</details>

<details>

<summary>Sub group: Layout Group (Display Layout, Width Layout)</summary>

* **Display Layout**: A key setting that defines how icon/image and text are positioned—top-bottom, left-right, text only, icon only, etc.\
  Use **Automation** to let Navi+ choose the best layout based on context.
* **Width Layout**: Defines the width of the menu item.\
  Example 1: Set 3/12 width for 4 items in a row to create a grid layout, common in modern designs.\
  Example 2: Choose **Hug content** to make width flexible based on content length, useful in horizontal or mega menus.\
  Example 3: Choose **Enter a fixed width** to set a specific pixel value.\
  **Automation** is a smart option to auto-assign a suitable width.

</details>

<details>

<summary>Sub group: Interface (Text style, Icon/Image style, Background, Spacing, Align)</summary>

* **Text Style**: Customize color and font for this menu item only, without affecting others.
* **Icon/Image Style**: Customize the size and color of the icon or image.\
  **Container**: A box wrapping around the icon/image. You can style its color, spacing, and border radius. Useful for creative and colorful designs.
* **Background**: Set a background color or image for this menu item.
* **Spacing**: Define the padding/margin around this menu item.
* **Align**: Align the menu item to the left, center, or right.

{% hint style="info" %}
**Important Tip:**\
All interface settings can also be applied globally in the **Design** tab.\
Individual settings here will override global ones if defined.
{% endhint %}

</details>

<details>

<summary>Sub group: Advance (Class name, Animation, Internal Stylesheet (CSS), Attributes)</summary>

As the group name suggests, these properties are for users with experience and deeper knowledge of HTML/CSS, allowing more control over how a menu item is displayed.

* **Class Name**: Define a custom class name for this menu item (e.g., `red-button`), then go to the **CSS/Coding** section to write styles for it (e.g., `.red-button { background: red; }`).\
  There are also many built-in hidden class options:\
  Example 1: `navi-expand` — this item will auto-expand if it’s a parent.\
  Example 2: `navi-click` — this item will auto-click 2 seconds after it appears.
* **Animation**: Apply visual effects (e.g., blink, shake, bounce) when the menu item appears. Great for drawing attention to specific items.
* **Internal Stylesheet (CSS)**: Custom CSS that applies only to this menu item.
* **Attributes**: Use these to make the menu item interact with other apps on your site.\
  Example: If you install a tooltip app, use attributes to trigger a tooltip when users hover over the item.

</details>

<details>

<summary>Sub group: Publish</summary>

Set visibility rules to show or hide a menu item based on context—for example, only show it when the user is logged in.

</details>

<details>

<summary>Sub group: Submenu</summary>

Only for parent menu items, properties in this group apply specifically to their sub-menus—for example, expanded dropdown settings.

</details>


---

# Agent Instructions: 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:

```
GET https://help.shopifas.com/manual/internal/market-global/common/step-1-other-properties-of-menu-item.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.