> For the complete documentation index, see [llms.txt](https://help.shopifas.com/manual/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.shopifas.com/manual/internal/what-is/common/step-1-other-properties-of-menu-item.md).

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