Headers, dividers, and nesting

A flat list of 15 links is hard to scan. A structured menu of 3 groups of 5 each, with a divider between admin and user areas, is scannable in two seconds.

Headers — group items by topic

A header is a small heading that sits above a group of related links. It's not clickable; it's just a label.

HR
  · Staff Directory
  · Leave Applications
  · Training

Operations
  · Asset Register
  · Vehicle Booking
  · Procurement Requests

Two headers, six links underneath. Way easier to scan than six unlabelled links.

Dividers — separate sections

A divider is a thin horizontal line. Use one to split the menu into clear regions:

Dashboard
─────────
Tables
Forms
Lists
─────────
Settings

Don't overdo it — three dividers is a lot. Two is plenty for most menus.

Nesting — sub-menus one level deep

A link with children becomes a submenu. Click the parent → its children fold open.

Reports ▾
  · Monthly summary
  · Annual report
  · By department

Use sparingly. If you find yourself nesting more than 5 children under one parent, the parent itself is probably the wrong concept — split into multiple top-level groups instead.

Don't go more than one level deep. Two-level trees become hard to navigate. v1 of Luna enforces this.

A good menu

• 7–12 top-level items (links, headers, dividers combined).
• 1–2 headers grouping related links.
• 1–2 dividers separating major regions.
• At most 2 or 3 sub-menus, each with 3–6 children.

If you're staring at a menu with 30 items, that's a sign your app is either too big for one menu, or some items belong as cards on a dashboard.

Where to next

• Permissions on menu items.
• Common mistakes.