This guide provides a step-by-step approach to implementing a responsive burger menu using Bootstrap within a web design project.

螢幕錄影 2025-01-16 下午6.43.49.mov

1. Make the expanded menu items into components.

Before creating the burger menu, please make sure to create expanded menu items into components, please refer to this post (Component)

2. Insert the bootstrap burger menu

After structuring all the items, navigate to the level where you want to insert the burger menu.

• Click More
• Select Insert > UI Libraries
• choose Bootstrap / Customized / Burger Menu

螢幕錄影 2025-01-16 下午4.33.19.mov

3. Configure the settings

1. Confirm the value of the Field: including iconSize, iconColor, and headerHeight.
2. select the components you want to use as menu content.
3. select the placement.
4. Insert and done.