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.
Other basic options (Divider, Badge)
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.
Layout Group (Display Layout, Width Layout)
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.
Interface (Text style, Icon/Image style, Background, Spacing, Align)
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.
Important Tip: All interface settings can also be applied globally in the Design tab. Individual settings here will override global ones if defined.
Advance (Class name, Animation, Internal Stylesheet (CSS), Attributes)
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.
Last updated