# Custom Menu Showcase

**URL:** <https://forum.makecode.com/t/custom-menu-showcase/18381>\
**Category:** Show & Tell\
**Tags:** javascript\
**Created:** [March 10, 2023, 4:08pm UTC](https://forum.makecode.com/t/custom-menu-showcase/18381 "2023-03-10T16:08:51Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![meeeeeeeep1](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/meeeeeeeep1/32/7912_2.png) [@meeeeeeeep1](https://forum.makecode.com/u/meeeeeeeep1)\
**Post date:** [March 10, 2023, 4:08pm UTC](https://forum.makecode.com/t/custom-menu-showcase/18381/1 "2023-03-10T16:08:51Z")

</div>

Hello! I want to share with you something I found to make creating custom menus easier. This piece of code uses the menu button.  
`scene.systemMenu.addEntry(() => string, () => handler, image)`

How to use:

1. Replace `string` with the name
2. Replace `handler` with the code
3. Replace `image` with the icon

![Screenshot 2023-03-09 at 21-54-17 Microsoft MakeCode Arcade](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/8/86638e09aebf913166bbf60efb6ddfb8507f9bc9.png)

Here is how you can use it as an extension:

```auto
//% color="#e6ac00" icon="" block="Menu"
namespace menu {

    //% block="Add system menu option $name icon $image function:"
    //% handlerStatement=1
    //% image.shadow=screen_image_picker
    export function addmenuoption(name: string, image: Image, handler: () => void): void {
        scene.systemMenu.addEntry(() => name, handler, image);

    }
}

```

 ![Screenshot 2023-03-09 at 21-52-59 Microsoft MakeCode Arcade](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/7/7e5bd0a0bceeaa3e688be6b1639d5a4767de37a0.png)

---

<div class="post-metadata">

**Author:** ![PixelDoodle](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/pixeldoodle/32/24129_2.png) [@PixelDoodle](https://forum.makecode.com/u/PixelDoodle)\
**Post date:** [March 10, 2023, 5:46pm UTC](https://forum.makecode.com/t/custom-menu-showcase/18381/2 "2023-03-10T17:46:57Z")

</div>

Woah! This Is Cool! I never knew you could add Stuff to The System Menu!

---

<div class="post-metadata">

**Author:** ![randomuser](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/randomuser/32/32505_2.png) [@randomuser](https://forum.makecode.com/u/randomuser)\
**Post date:** [March 10, 2023, 5:47pm UTC](https://forum.makecode.com/t/custom-menu-showcase/18381/3 "2023-03-10T17:47:00Z")

</div>

Wow thanks for the tutorial! Is there any way to export the extension?

---

<div class="post-metadata">

**Author:** ![meeeeeeeep1](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/meeeeeeeep1/32/7912_2.png) [@meeeeeeeep1](https://forum.makecode.com/u/meeeeeeeep1)\
**Post date:** [March 10, 2023, 7:03pm UTC](https://forum.makecode.com/t/custom-menu-showcase/18381/4 "2023-03-10T19:03:58Z")

</div>

Yeah! All you have to do to create an extention is to go to javascript, then press the plus button:  
 ![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/9/9e6f10c7bda8b95307fa7733ad938169e0a9c78d.png)  
Name your extention whatever you want, then import the code below.

> [@meeeeeeeep1](#):
>
> ```auto
> //% color=“#e6ac00” icon=“” block=“Menu”
> namespace menu {
> 
> //% block="Add system menu option $name icon $image function:"
> //% handlerStatement=1
> //% image.shadow=screen_image_picker
> export function addmenuoption(name: string, image: Image, handler: () => void): void {
> scene.systemMenu.addEntry(() => name, handler, image);
> 
> }
> 
> ```

To export it so you can turn it into a sharable extension is to press the github icon in the bottom of the screen next to the project title, then follow the directions it gives you.

---

<div class="post-metadata">

**Author:** ![danger\_kitty](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/danger_kitty/32/32006_2.png) [@danger\_kitty](https://forum.makecode.com/u/danger_kitty)\
**Post date:** [March 10, 2023, 7:04pm UTC](https://forum.makecode.com/t/custom-menu-showcase/18381/5 "2023-03-10T19:04:15Z")

</div>

cool I did this back with three brave cats 2 [Three Brave Cats 2: Return to the Sea](https://forum.makecode.com/t/three-brave-cats-2-return-to-the-sea/14327)  
but the way you did it prevents you form just coding in Js to do it

---

<div class="post-metadata">

**Author:** ![randomuser](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/randomuser/32/32505_2.png) [@randomuser](https://forum.makecode.com/u/randomuser)\
**Post date:** [March 11, 2023, 7:22am UTC](https://forum.makecode.com/t/custom-menu-showcase/18381/6 "2023-03-11T07:22:48Z")

</div>

Wow amazing, I thought making extensions was much more complicated :0 I could totally use the samples you gave, learn a bit, and make my text to speech into an extension !!

---

<div class="post-metadata">

**Author:** ![SoftTalker](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/softtalker/32/10776_2.png) [@SoftTalker](https://forum.makecode.com/u/SoftTalker)\
**Post date:** [March 11, 2023, 11:16pm UTC](https://forum.makecode.com/t/custom-menu-showcase/18381/7 "2023-03-11T23:16:36Z")

</div>

sorry you had missed one string of code:)

namespace menu {

```
//% block="Add system menu option $name icon $image function:"
//% handlerStatement=1
//% image.shadow=screen_image_picker
export function addmenuoption(name: string, image: Image, handler: () => void): void {
    scene.systemMenu.addEntry(() => name, handler, image);

}
}

```

---

<div class="post-metadata">

**Author:** ![SoftTalker](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/softtalker/32/10776_2.png) [@SoftTalker](https://forum.makecode.com/u/SoftTalker)\
**Post date:** [March 11, 2023, 11:16pm UTC](https://forum.makecode.com/t/custom-menu-showcase/18381/8 "2023-03-11T23:16:41Z")

</div>

Agreed

---

<div class="post-metadata">

**Author:** ![Maketendo](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/maketendo/32/27571_2.png) [@Maketendo](https://forum.makecode.com/u/Maketendo)\
**Post date:** [March 11, 2023, 11:16pm UTC](https://forum.makecode.com/t/custom-menu-showcase/18381/9 "2023-03-11T23:16:46Z")

</div>

This is Cool. Good Job @meeeeeeeep1 👍

---

<div class="post-metadata">

**Author:** ![Sonicblaston](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/sonicblaston/32/19164_2.png) [@Sonicblaston](https://forum.makecode.com/u/Sonicblaston)\
**Post date:** [March 11, 2023, 11:17pm UTC](https://forum.makecode.com/t/custom-menu-showcase/18381/10 "2023-03-11T23:17:19Z")

</div>

I did it! I am going to have so much fun with this

 ![image](https://us1.discourse-cdn.com/flex020/uploads/makecode/original/2X/b/bb8643555e1e7aaf4590e003a13690b0e65dc31c.jpeg)

---

<div class="post-metadata">

**Author:** ![Sarge](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/sarge/32/19590_2.png) [@Sarge](https://forum.makecode.com/u/Sarge)\
**Post date:** [March 27, 2023, 11:20pm UTC](https://forum.makecode.com/t/custom-menu-showcase/18381/11 "2023-03-27T23:20:44Z")

</div>

Have you considered putting this on GitHub so people can import it easier into their projects? If you don’t know how, I can show you- but anyways very good extension, I can see myself using this

---

<div class="post-metadata">

**Author:** ![ChimbroDaPro](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/chimbrodapro/32/15852_2.png) [@ChimbroDaPro](https://forum.makecode.com/u/ChimbroDaPro)\
**Post date:** [April 3, 2023, 4:23pm UTC](https://forum.makecode.com/t/custom-menu-showcase/18381/12 "2023-04-03T16:23:37Z")

</div>

Noice!

---

<div class="post-metadata">

**Author:** ![meeeeeeeep1](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/meeeeeeeep1/32/7912_2.png) [@meeeeeeeep1](https://forum.makecode.com/u/meeeeeeeep1)\
**Post date:** [April 3, 2023, 4:38pm UTC](https://forum.makecode.com/t/custom-menu-showcase/18381/13 "2023-04-03T16:38:26Z")

</div>

Sure! Sorry for the late response, I haven’t checked the forum in awhile. For anyone who needs it, here is the link to the extension: [https://github.com/meeeeeeeep1/custom-systemmenu-options/](https://github.com/meeeeeeeep1/custom-systemmenu-options/). Scroll down to the bottom of the page for instructions on how to import it into your projects.

---

<div class="post-metadata">

**Author:** ![meeeeeeeep1](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/meeeeeeeep1/32/7912_2.png) [@meeeeeeeep1](https://forum.makecode.com/u/meeeeeeeep1)\
**Post date:** [June 9, 2023, 5:18pm UTC](https://forum.makecode.com/t/custom-menu-showcase/18381/14 "2023-06-09T17:18:52Z")

</div>

Great news! I’ve fixed the error that occurred when opening the menu. Additionally, I found a neat trick to retrieve the title of any menu option. Simply use `scene.systemMenu.buildOptionList()[option index].getText()`.

---

<div class="post-metadata">

**Author:** ![MeatballDev](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/meatballdev/32/28502_2.png) [@MeatballDev](https://forum.makecode.com/u/MeatballDev)\
**Post date:** [September 10, 2024, 11:48pm UTC](https://forum.makecode.com/t/custom-menu-showcase/18381/15 "2024-09-10T23:48:00Z")

</div>

> [@meeeeeeeep1](#):
>
> `addmenuoption`

I have revived the addmenuthon

---

<div class="post-metadata">

**Author:** ![LostPineappleGames](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/lostpineapplegames/32/19789_2.png) [@LostPineappleGames](https://forum.makecode.com/u/LostPineappleGames)\
**Post date:** [October 6, 2024, 8:30pm UTC](https://forum.makecode.com/t/custom-menu-showcase/18381/16 "2024-10-06T20:30:45Z")

</div>

@meeeeeeeep1 is it possible to delete the menu bits that are in default?

---

<div class="post-metadata">

**Author:** ![RobbyZero](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/robbyzero/32/17188_2.png) [@RobbyZero](https://forum.makecode.com/u/RobbyZero)\
**Post date:** [October 7, 2024, 2:57pm UTC](https://forum.makecode.com/t/custom-menu-showcase/18381/17 "2024-10-07T14:57:42Z")

</div>

I couldn’t find anything. That doesn’t mean there isn’t though (I think)  
@richard do you know of anything?

---

<div class="post-metadata">

**Author:** ![richard](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/richard/32/5417_2.png) [@richard](https://forum.makecode.com/u/richard)\
**Post date:** [October 7, 2024, 4:41pm UTC](https://forum.makecode.com/t/custom-menu-showcase/18381/18 "2024-10-07T16:41:34Z")

</div>

no, i don’t think there is

---

<div class="post-metadata">

**Author:** ![YamJam](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.makecode.com/yamjam/32/29681_2.png) [@YamJam](https://forum.makecode.com/u/YamJam)\
**Post date:** [July 23, 2026, 5:12pm UTC](https://forum.makecode.com/t/custom-menu-showcase/18381/19 "2026-07-23T17:12:10Z")

</div>

I know this is from 2 years ago, but for some reason after I open a custom menu option in this game, it won’t let me close the menu after. Please help!

> **[Burger - Refined](https://arcade.makecode.com/S38822-81614-14102-55691)**
>
> Made with ❤️ in Microsoft MakeCode Arcade.