Menu ▶️ | Notion

This Menu template allows you to discover how to manage a menu on your website (in the form of a horizontal list in the Desktop version) which will turn into a Burger menu in the Mobile version (an icon in the top left corner which when clicked opens a vertical list menu on one side of the screen).

You will see how to integrate new items into this Burger Menu by creating them ex nihilo in the Desktop version or by creating them by duplicating pre-existing nodes in the Mobile version.

⚠️ Before you start, remember to regularly switch to Preview mode to test your nodes to make sure all your changes have been taken into account and are working properly. ⚠️

Template composition:

Different Screen nodes that will correspond to the pages in your menu.
2 Screen Size nodes, one configured for the Desktop version (computer) the other for the Mobile version.

The Desktop version:

The Screen Size node contains :

a horizontal Section node with content.

Mobile version:

The Screen Size node contains :

a Icon node that represents the Burger Menu.
a Modular Window node that opens with the content.

How do I add an item to these Menus?

To add an item in these Menus several steps are necessary: you have to create a new screen for each new item that you will create in parallel in the Mobile version, and in the Desktop version. You can add items by duplicating pre-existing nodes (see Mobile version) or by creating new nodes (see Desktop version).

Start by creating a new screen:

Add a Screen node (e.g. Screen5) to the parent Screens node.
To find your way around this example, you can add a Text node in Screen5 and write "Screen5" for example**.**
Click on Variables, then currentScreen. In the right pane, click Add and name the variable Screen5.
Then click on the parent node Screens and switch to graph mode.
Add a Switch Screen action block, then click on it and select Screen5 in the screen settings of the right inspector.
Delete the Single selection switch block and recreate it: click on Blocks then Controls then Single selection switch.
Click on the newly created block, then in the right inspector, link the single selection to the currentScreen variable.
All entries corresponding to the different screens are created. Link them to the corresponding Change Screen blocks.

Duplicate a new element in the Mobile version:

Duplicate the Screen4 text node and rename it Screen5.
Switch to graph mode, delete the define currentScreen block and recreate it: click on Blocks then Variables then currentScreen.
Click on the newly created block, then in the right inspector select Screen5.
Link the block to the define isMenuOpen block.

You can then change the style of your new element to match the others directly in the graph mode.

Click on the Condition block. In the right inspector, change the test parameter. Change 'Screen 4' to 'Screen5'.

Create an element ex nihilo in the Desktop version:

(You can of course duplicate a pre-existing node, like in the Mobile version. The point here is to show you how to create the element from scratch.)

Add a Text node inside the Section. node
Then change its value to the desired screen name (e.g. Screen5).
Switch to Plot mode and add a "Click" event block.
Link it to the Define currentScreen, block then click on it and in the right inspector choose the screen you have created (Screen5).

Next you need to change the style of your new element so that it fits with the others.

Click on the Text node of your new element (Screen5). In the inspector on the right under Text you have the setting Disabled. Click on the link icon and select Convert to Formula.
Delete the value entered and replace it with : @currentScreen = 'Screen5'.
Then in Shape, change the font and color theme to match the other nodes. Disconnect the associated varibals and replace them with the appropriate variables: theme.textBold for the font, then theme.subForeground for the color.
Remember also to replace the color themes in the Flight mode: disconnect the associated variable and change it by theme.foreground; do the same thing for the Deactivated mode.
In the disabled mode, go to Style and reset the opacity to 100%.

How to add an element that is different from the others

You may want to add a different element to the Text node, such as a button, image or icon. We will see here as an example how to add an image to the Menu that will correspond to your profile picture and lead to your profile page.

First, create a new "Profile" screen by repeating the steps seen previously. This new screen will be your profile page, fill in the different elements accordingly.
In the desktop version add the Image node. In the Image node inspector, click on the Source parameter field and then Find on Unspash and select the profile picture you want. In the Fill parameter, choose Cover.
To adjust the size of the photo on the Menu bar, go to Layout. In the fields Width and Height choose the unit "px" and enter as value for each 30.
To round the edges of the image, go to Style and then in Rounding enter the value 100 px.
To add a border to the image when the mouse hovers over it, go to Flyover then in Style, click on the Border field and enter the value 1 px. You can also change its color and choose black for example.

Now that your image is well integrated in your Menu, you have to connect it to the Profile page that you have previously created.

Switch to Plot mode and add a "Click" event block.
Link it to the Define currentScreen, block then click on it and in the right inspector choose the screen you created (Profile).

Your new item is now correctly integrated in the Menu in the desktop version. You will now quickly integrate it in the mobile version.

Duplicate the Profile node from your Desktop version, and drag it into the mobile version, inside the Section node.
To adjust the size of the photo to the Menu, go to Disposition. In the Width and Height fields choose the unit "px" and enter as value for each 40.