Plus UI Menu Generator Tool

Plus UI v3.0++

Get Started

Join Telegram

Easily generate and edit your Blogger Plus UI menus without touching theme code. Smart, fast, and ReactUI powered!

Tool NamePlus UI Menu Generator

PlatformReact UI

TypeDevelopment Utility

Version1.0 (Beta)

DeveloperDeo Kumar

Release DateOctober 2025

Build your navigation menu items below. Choose the type of item, fill in the details, and click "Add". Use the "Choose Icon" button to select an icon (the full SVG code will be generated).

Menu Item Class Reference

Class	Meaning	Behavior / Purpose
.mr	Menu Root / Heading	Used for section titles inside the menu. These items are not clickable and are often used to group related links.
.br	Border / Divider	Adds a horizontal line below the item — useful for separating menu sections.
.nt	Notification Indicator	Displays a small dot (usually colored) to highlight new or important links.
Normal <li>	Standard Menu Item	Regular clickable link used for navigation or actions.

Add Standard Link

Title:

URL:

Icon (Optional):

Optional <li> Classes:

Add Badge Link

Adds a link with a special class (new or free) to show a theme-defined badge.

Title:

URL:

Icon (Optional):

New Free Badge:

Optional <li> Classes:

Add Dropdown (Style 1: No Sub-Item Icons)

Dropdown Title:

Dropdown Icon:

Optional <li> Classes:

Start expanded (add checked)

Sub-Items:

Add Dropdown (Style 2: With Sub-Item Icons)

Dropdown Title:

Dropdown Icon:

Optional <li> Classes:

Start expanded (add checked)

Sub-Items (Icon required for each):

Add Dropdown (Style 3: Top Level Sub-Menu)

A dropdown with no parent icon, designed for "More..." links. Sub-items require icons.

Dropdown Title:

Optional <li> Classes:

Start expanded (add checked)

Sub-Items (Icon required for each):

Generated Menu Code

Copy the code below to update your Blogger menu:

Method 1: Using Layout

1. Go to your Blogger Dashboard → Layout.
2. Locate the Navigation Menu section.
3. Replace the existing menu code with the code generated by the ReactUI Menu Generator Tool.

Tip: If you prefer not to manage the menu via Layout, leave the Layout field empty and edit your theme’s XML manually.

Method 2: Editing Theme Code

Go to your Blogger Dashboard → Theme → Edit HTML. Find <b:includable id='items-mainMenu'> and replace everything between its opening and closing tags (including <!--[ ... ]--> comments and all existing <li> elements) with your new copied code. Save the theme to apply changes.

Select an Icon

Click an icon to choose it. Use the search bar to filter.