📋 Menu Button doesn't just have Hamburger! Knows 25 popular menu styles used in Web and Mobile.

Menu is the starting point of navigation. If you choose a menu format to suit the system, it makes it easy for users to find features, reduce the number of clicks, and increase the user experience (UX).

💡 What do users get?

- ✅ know the Menu Button actually used in modern systems.

- ✅ Select the menu to suit Web, Mobile and Desktop.

- ✅ easy to use Navigation design

- ✅ Create a professional-looking UI.

🧭 25 popular Menu Button patterns

1️⃣ Hamburger Menu ()

Hide the menu on the side. Fits Mobile App and Responsive Website.

2️⃣ Kebab Menu ()

Vertical 3-point menu for more commands

3️⃣ Meatballs Menu (calendar)

Horizontal 3-point menu, commonly used in Desktop and Web App

4️⃣ Bento Menu (App Launcher)

A 3 × 3 tabular menu for opening apps such as Google Workspace.

5️⃣ Grid Menu

Display menu as Grid, fits Dashboard or Super App

6️⃣ Gear / Settings ⚙️

System Settings Page Entry Button

7️⃣ User Menu

User menus such as profile, settings and login

8️⃣ Avatar Menu.

Use the profile image as the menu button.

9️⃣ Chevron Menu ()

Use the arrow to expand or collapse the menu.

🔟 Dropdown Arrow.

Open the list of options within Dropdown.

1️⃣1️⃣ Plus Menu (+)

Add information or create a new item.

1️⃣2️⃣ FAB Menu.

Floating Action Button for Screen Main Action

1️⃣3️⃣ Speed Dial.

When pressing FAB, it shows several sub-menus.

1️⃣4️⃣ Context Menu

Right-click menu or hold on Mobile

1️⃣5️⃣ Command Palette

Search menus and commands with a keyboard, such as Ctrl + K or Cmd + K.

1️⃣6️⃣ Navigation Rail

Vertical Navigation Bar Fits Tablet and Desktop

1️⃣7️⃣ Bottom Navigation

The menu below for Mobile App applies to 3-5 main menus.

1️⃣8️⃣ Tab Menu.

Toggle content between multiple tabs on a single page.

1️⃣9️⃣ Floating Menu

Floating menu over content, quick access

2️⃣0️⃣ Radial Menu.

The menu sorts around the center. Fits design and games.

2️⃣1️⃣ Pie Menu.

Circular menus reduce mouse movement distance

2️⃣2️⃣ Dock Menu.

Dock-style menus for opening apps or tools such as macOS

2️⃣3️⃣ Ribbon Menu

Ribbon menus include commands as categories, such as Microsoft Office.

2️⃣4️⃣ Sidebar Toggle

Sidebar Condensed-Expansion Button to Boost Workspace

2️⃣5️⃣ Workspace Switcher

Toggle Workspace, Project, Team, or Organization in one system.

🎯 UX / UI Best Practice

- Use the menu format to suit devices such as Bottom Navigation for Mobile and Sidebar / Navigation Rail for Desktop.

- Do not hide important menus in Hamburger Menu if users need frequent access.

- Use standard icons with directing text when necessary.

- If there are many commands, use Command Palette or Context Menu to find them quickly.

- Limit the number of main menus to too much and group related commands together.

- Displays the active state to help the user know the current location.

💬 Which menu do you like the most? Hamburger Menu, Bottom Navigation, Command Palette or Workspace Switcher? Let's share our feedback!

# CreatifyX # UXUI # Navigation # MenuDesign # WebDesign

📌 Follow CreatifyX

Includes AI tools • Digital • Graphic Design • Practical Productivity, updated weekly 🚀