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.
Sub group: 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.
Sub group: 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.
Sub group: 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.
Sub group: 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