Menu

Difficulty: Medium

In this exercise, you will build a menu UI featuring collapsible sections with badging. The menu data will be provided by a server response, which you will use to dynamically render the menu. The menu should deliver a smooth user experience with clear visual feedback through badges on both sections and items.

Menu Structure

The menu consists of multiple sections. Each section includes:

• A title.
• A collapsible/expandable state, indicated with a chevron icon.
• A red dot badge (when collapsed) if any of its items have badges.

Each section contains multiple menu items. Each menu item includes:

• A title.
• An optional red dot badge.

Interaction Behavior

Collapsed Section

• Displays only the section title row with a chevron.
• Shows a red dot badge on the section title if any contained items are badged.

Expanded Section

• Displays the section title row with a chevron.
• Reveals all menu items.
• Hides the section’s red dot badge (since badged items become visible).

Animation

• Expand and collapse transitions should include smooth animations.
• Only 1 section should be expanded at a time.

Server Response

Path: https://breakpoint-ghost-io.github.io/ghost-web/menu/menu.json

{
  "menu": [
    {
      "sectionTitle": "Profile",
      "items": [
        { "title": "Account Settings", "badge": true },
        { "title": "Privacy", "badge": false }
      ]
    },
    {
      "sectionTitle": "Messages",
      "items": [
        { "title": "Inbox", "badge": true },
        { "title": "Sent", "badge": false },
        { "title": "Drafts", "badge": false }
      ]
    },
    {
      "sectionTitle": "Support",
      "items": [
        { "title": "Help Center", "badge": false },
        { "title": "Contact Us", "badge": false }
      ]
    }
  ]
}