Before you start

1. Make sure you have permission to edit the board and are in design editing mode.
2. You can access menu components from the Smart Components section in the Wireframe Library.

Available menu components

1. Header Menu: Creates a horizontal navigation menu, typically placed at the top of a screen.
2. Tab Bar Menu: Organizes navigation items into tabs that users can switch between.
3. Sidebar Menu: Creates a vertical navigation menu for the side of a screen.
4. Collapsed Sidebar Menu: Creates a compact sidebar that primarily uses icons and optional text.
   

Add a menu component

1. Open the board where you want to add a menu.
2. Open Wireframe Library.
3. Select the menu you want to use from the Smart Components section.
4. Click the canvas to add it.
5. Move, resize, or customize the menu as needed.
   

Menu components help represent navigation in your design, but they do not automatically navigate between screens. Add interactions in Prototype mode to make them functional.

Manage a menu component

1. Style: Choose a preset style to quickly update the menu’s appearance.
2. Size: Apply a preset size or manually adjust the menu dimensions, spacing between items, and padding.
3. Color and opacity: Customize the menu color and layer opacity.
4. Text style and alignment: Format the menu text and control how it is aligned within each item.
5. Equalize menu item width: Make all items in a Header Menu the same width for a consistent layout.
6. Add or remove text: Show or hide text labels in a Tab Bar Menu or Collapsed Sidebar Menu.
7. Save as template: Save the menu and its settings as a reusable template.
8. Export: Export the selected menu component to image/PDF or to Figma.
9. More actions: Access additional options such as align, arrange layers, copy, paste, duplicate, and delete.

If you want to edit or reuse each part of the smart components separately, select Break into basic elements.