Help people move between the main sections of a productA menu groups destinations and makes the current location visible. Keep labels consistent, group related items, and avoid making the hierarchy deeper than the product requires. Actions such as sign out should be distinguished from navigation links.

You can say this to an AI Agent

Group the eight admin pages by task in a navigation menu and highlight the current page. Do not turn the whole product into tabs or hide every destination under More. Open each entry and verify its URL, title, current state, and mobile access.

When to use it

Primary product navigation
HomeProductDocsPricing
A compact group of destinations
DashboardProjectsMembersSettings
Nested sections with a real hierarchy
ProjectsAll projectsAssigned to meSystemMembersSettings
Account or workspace navigation
OverviewDataMembers
The highlight shows where you are

When NOT to use it

Mix unrelated actions and destinations without distinction
CommentsHistorySave
Create deep nesting for a simple site
DashboardProjectsTasksFilesMembersCalendarReportsMessagesSettingsTrash
Hide the active location
SaveDeleteExport
Rename the same destination in different menus
HomeAbout

Anatomy

The whole menu — lays out the items and tracks which one is active

A clickable entry that navigates to its page

Optional — helps users recognize the feature at a glance

Optional — flags unread counts or fresh content

Variants

Horizontal

When there are only a few navigation items and enough horizontal space for a top bar.

Vertical

When there are many functions that need to stay visibly grouped

Collapsed

When the content area is too narrow, collapse it to icon-only navigation.

Typical use cases

App sidebar

YunYunfan Backstage

Data Overview

Visit today

12,483

New user

356

Account menu

◆ Museon Homepage Product Documentation Pricing

Make team collaboration clearer

Workspace navigation

Development Guide

Core concept

Installation and configuration

npm install museon-ui

Mobile menu

Mall homepage

Alex Chen

Recommended tool

Web fine-tuning tool · Selector Pro

Select page elements for precise AI edits

Click a button, text, or card, note the change, then copy its exact location to AI.

Open Selector Pro website

Menu

You can say this to an AI Agent

When to use it

When NOT to use it

Select page elements for precise AI edits

An admin product has eight separate pages, including Projects, Members, Billing, and Settings. How should people find pages and their current location?